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
Building a Cabin in the Arctic | Life Below Zero
What doesn’t kill you just makes you stronger. Good practice. Get knocked down, get right back up again, and get back to work. [Music] Just got the dogs out for a good run. I’m about to start working on my cabin. It’s kind of been getting put off a long…
Eating the Invasive “Frankenfish” to Stop Its Spread | National Geographic
[Music] The snakeheads are a pretty smart fish. I think I’ve seen them where they’ll stir up mud, and they’ll sit there, and they won’t move. They’ll stir up that mud to make a camouflage for their s, but then they won’t make any more mud. So as the curre…
Kinetics of radioactive decay | Kinetics | AP Chemistry | Khan Academy
Strontium-90 is a radioactive isotope that undergoes beta decay. Because radioactive decay is a first-order process, radioactive isotopes have constant half-lives. Half-life is symbolized by t1/2, and it’s the time required for one half of a sample of a p…
Deep Sea Exploration - 360 | Into Water
I have always been fascinated by the search for life. Aliens from outer space come to mind, but I’m inspired by animals in another final frontier: the ocean’s midwater, one of the least explored places on Earth, full of creatures that defy imagination. I…
Finding the Titanic | Bob Ballard: An Explorer’s Life
The Titanic was really a cover for a highly classified military operation to investigate two nuclear submarines that we lost during the Cold War with all hands: the USS Thresher and the USS Scorpio. They ironically turned out to be on either side of where…
Spinning Disk Trick Solution
[Applause] So, in the spinning disc trick we saw that an asymmetrically weighted disc, when spun, actually flips so that the lighter side goes towards the bottom. Now, this is a variation on something called the tippy top, a little spinning toy that spins…