How to Make an Icon For Your Website

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.