yego.me
💡 Stop wasting time. Read Youtube instead of watch. Download Chrome Extension

How to Make an Icon For Your Website


3m read
·Nov 3, 2024

Hey guys, this is Mack Heads 101 here today, and I'm going to be showing you how to make an icon for your website.

So first, I’m gonna be showing you a few icons here. I’m gonna open Firefox; you can use Safari or whatever you want. As you can see, Google has a G, Apple has an apple sign, and YouTube has a YouTube thing. So how do you make one of these? I’m going to be using Photoshop.

Now, one of the most important rules, and one of the only rules to making these, is it has to be 16 by 16 pixels. So it says pixels, you’re gonna want to make it 16 by 16. Also, I’m gonna make it be RGB color codes because that’s the easiest thing for me, and I’m gonna just click okay.

Now let’s make that a little bigger and press Apple plus a few times; that makes it bigger. Okay, now to make a cool background, you can use the background tool, or known as the gradient tool. Select two different colors and then do this, and it’ll make a combination like flowing in between.

Now you can just like take the text tool if you don’t have very good handwriting, or you can just try writing it out. I’m gonna be using the text tool, and you can write. First off, you want to make it much smaller because it’s just 16 by 16 pixels, so I’m gonna make it like two.

Now you can type "Mac1," and then it’s not gonna be very good quality since it’s just 16 by 16 pixels. So the bigger you make it, the better quality it’s gonna get. So I’m just going to be actually showing you how to write it out.

And stay! So I was just showing you how to draw. So you can use the paintbrush tool with a pencil tool, or I’m gonna be using the paintbrush tool. Let’s make that like green, and let’s write out.

Obviously, it’s gonna be doing this since it’s being weird. All you have to do is change the opacity and stuff, or you can just deal with it if you like it to like match. So I’m gonna be making one big "M" for Mack Heads.

Not gonna make it very good, so I’m just showing you, and you’ll have to make it perfect since it’s gonna be tiny, and not many people are gonna be able to see it from very up close besides you.

So now if I zoom out, that looks like an "M." So I can save that. Also, it has to be a format; it can be whatever format you want, but then you’re gonna have to change it. I’m gonna make it a PNG for now, and now you’re gonna have to call it "favicon" because that’s what something is called when it’s an icon.

Then you say okay, and then you can quit. Now, you see I have a favicon there; you wanna press ENTER and rename it. That’s "ICO," geez, I see.

Now that you have that, if you have a website, I can show you all you have to do. You don’t do this on every page; you just have to do this on one page. I’m gonna show, bring up the code of my website.

You have to put in this one line of code, and I'll put it in there in the description of the video. I’m just gonna be showing you. So I’m gonna open this with Dreamweaver, Adobe Dreamweaver, a great HTML editor. You can edit code mode and the regular mode, and then you can preview it in anything you want.

So as you can see, this is my code, this is the split, and this is the design. So I’m gonna go into code mode, and in the head of your document, you’re going to want to type in this one thing:

<link rel="shortcut icon" href="/favicon.ico" />.

So now, if I preview this in Firefox, this is what my site looks like previewed in Firefox. Normally, you should get a little thing there. What’s insisted on the real site, it’s not gonna work, and also, you’re gonna want that picture to be in your home directory.

So thank you very much! Have a nice day, and please subscribe.

More Articles

View All
Policy | Vocabulary | Khan Academy
Hello wordsmiths! The word we’re featuring in this video is policy, which means an official rule or set of rules. It’s a noun. It comes from the Greek word polis, which means city. As a root, it has to do with cities and government. I live in Washington,…
Are we in a REAL ESTATE BUBBLE?!
What’s up you guys? It’s Graham here. So first off, I want to say this is a bit of a technical video. It might be a little bit more in-depth than the other videos I’ve done, but for those that are into that sort of stuff, I think you guys are really going…
Where in the World is Jessica Nabongo? | Podcast | Overheard at National Geographic
[Music] No one knows exactly when humans started traveling, venturing beyond the little corner of the world they knew to discover new places. In some ways, it feels like it’s always been part of who we are as a species. Before babies can even walk or talk…
I decided to change my life
Couple of months ago, I experienced my first burnout. I couldn’t get out of my bed. I was escaping from my responsibilities. I couldn’t do anything; I was delaying every single thing and procrastinating even from the things that I was enjoying. During tha…
BEST IMAGES of the Week -- IMG! #42
Justin Bieber without eyebrows and a hungry shirt. It’s episode 42 of IMG! The lines on the carpet of this game store produce the illusion of pockets and dips. If you’re still not dizzy, take a swig from your Full House flask and then wall down a poppy s…
Finding zeros of polynomials (2 of 2) | Mathematics III | High School Math | Khan Academy
[Voiceover] In the last video, we factored this polynomial in order to find the real roots. We factored it by grouping, which essentially means doing the distributive property in reverse twice. I mentioned that there’s two ways you could do it. You could …