How to Make a Favicon for Your Blog or Website Video

By: Guest More than a year ago

Great video tutorial.You have a talent for making a hard subject clear to others.

Reply to this Comment

How to Make a Favicon for Your Blog or Website

Hi, this is a quick video to show you how to create your own fave icon for your site. Now, what is a fave icon first of all? If I drag this and browse a bit, you can see what I mean. On a normal site you have the default internet explorer or Firefox if using Firefox icon next to the site. On this one—the Matt 4, you will notice I have a different image. It actually a copy of this image but cut down to square and shank down and saved as an icon file. Okay, there is a bit a code that you need to add to your website, webpage to make it actually appear. I have done another video for that which will also be on the four.com videos. So you can see how to add it to your site or to your blog. But this video is to show you how to actually make one of those some scratch. Let us move this back up. Now first of all there are couples of different options on how you can do it. If you have already got a suitable image and the point is the image needs to be square. So it needs to be the same width and height. If you got one like that, then you can just use one of the online fave icon generators or editors. These links, two good ones here that I have use before on that matseven.com miscellaneous. So you just go to that page, scroll down, take one of those icons and upload your image and then it will resize it automatically to 15 x 15 and save it as my code file for you which you can then download, okay. What I am going to in this video is actually use a free graphics tool called Gimp. Which you can get from gimp.org, so download that and install it. This is free which is always cool. Let us actually open up Gimp here and scroll down. Now here is the created earlier, this is actually bigger than 15 but I am not going to use this. Because I want to actually show you how to make it square, okay? So what we need to do first of all is open up a file that we want to use. I have got here, possible, okay I am going to use fright two, I think. That is a nice icon. One of the important things to know here is you should use copyright free images for this. I have no idea whether this is copyright free or not, so I am probably not going to use this. Make sure your images are copyright free. You do not want to get in legal trouble there. Now the point is that we need one to make this square. Now the tool I have got at the moment. We have got from clicking on this icon here which allows me to make or to grab a square bit of the image or as close as square as I can get, okay. Now what we do is we left click where we want to start in bottom corner. Hold down the left click button or the left button. And then drag until we have got what we think is a square. Now if you look in the line of the bottom of this box. You can see the numbers changing, down here if you look here as I do this, you will see the numbers changed and that is the two numbers that we want to get to grid. So I have got 165, if I go for a bit one more. There we go—that is 165 x 165, okay. So that is a square. We can check that by moving this up and it says size 165 x 165. All I now need to do is right click and choose image craft to selection. So it is crafted down to just that square. I could make this even smaller if I wanted too, about a cut bit, etcetera. Now, all I need to do is resize that. Now you can use these images not just for Fave icons for your website. You can also use them for you avatars for things like My Bloglog and Technorati sites like this so that they will scroll down here. Where people have My Bloglog or Technorati or something like that as a widget on their blog. You will actually have that icon appearing here, since it is your little avatar, okay. So we might not want to actually take it all the way down to the fave icon size. Okay, the fave icon size is 15 x 15, but what I am going to do first of all is save this as 150 x 150. Because then I can use it for avatars for other sites So, to resize it I am going to choose image, scale image and I am just going to change 150 in the with and if I hit tab, it will then change the height to 150 as well to keep the ratio. I am just going to click on scale, just resize it for me. Then all I need to do is click on file, save as and give it a name, what I am going to call it is in this case i150, okay. No why I actually save it as an icon, I could save it as a jpeg. Incase I want to make more changes to it or use it as a jpeg, but in this case. I am going to choose the file type ICO. By scrolling this list, it is down here somewhere. It is a Microsoft Windows icon, if I move this back across you will see the extension is ICO. So click on save and save that as an icon file. Now and then go to right click again, choose image, scale image and take all the way down to 15. So I have got my fave icon ready to go. You can see that is quite small, but looks quite cool. So I will now “File”, “Save As” and put that as i15. As you took it for, to work as a fave icon, you will actually need to save it as fave-icon, okay.

BlogTactics

Visit Blogtactics.com

http://blogtactics.com/

Featured Links:

The Benefits of Outsourcing Your Design Services t

Today, outsourcing website design has taken the internet world by storm. Everyone from small to large-scale organizations is outsourcing their web design requirements to a website design company. Here are some reasons why it works so well.

http://www.articlesbase.com/web-design-articles/the-benefits-of-outsourcing-your-design-services-to-a-website-design-company-635556.html/9461024403

Hi, this is a quick video to show you how to create your own fave icon for your site.

Now, what is a fave icon first of all? If I drag this and browse a bit, you can see what I mean.

On a normal site you have the default internet explorer or Firefox if using Firefox icon next to the site. On this one—the Matt 4, you will notice I have a different image. It actually a copy of this image but cut down to square and shank down and saved as an icon file.

Okay, there is a bit a code that you need to add to your website, webpage to make it actually appear. I have done another video for that which will also be on the four.com videos. So you can see how to add it to your site or to your blog. But this video is to show you how to actually make one of those some scratch. Let us move this back up.

Now first of all there are couples of different options on how you can do it. If you have already got a suitable image and the point is the image needs to be square. So it needs to be the same width and height.

If you got one like that, then you can just use one of the online fave icon generators or editors. These links, two good ones here that I have use before on that matseven.com miscellaneous. So you just go to that page, scroll down, take one of those icons and upload your image and then it will resize it automatically to 15 x 15 and save it as my code file for you which you can then download, okay.

What I am going to in this video is actually use a free graphics tool called Gimp. Which you can get from gimp.org, so download that and install it. This is free which is always cool. Let us actually open up Gimp here and scroll down. Now here is the created earlier, this is actually bigger than 15 but I am not going to use this. Because I want to actually show you how to make it square, okay?

So what we need to do first of all is open up a file that we want to use. I have got here, possible, okay I am going to use fright two, I think. That is a nice icon. One of the important things to know here is you should use copyright free images for this. I have no idea whether this is copyright free or not, so I am probably not going to use this. Make sure your images are copyright free. You do not want to get in legal trouble there.

Now the point is that we need one to make this square. Now the tool I have got at the moment. We have got from clicking on this icon here which allows me to make or to grab a square bit of the image or as close as square as I can get, okay.

Now what we do is we left click where we want to start in bottom corner. Hold down the left click button or the left button. And then drag until we have got what we think is a square. Now if you look in the line of the bottom of this box. You can see the numbers changing, down here if you look here as I do this, you will see the numbers changed and that is the two numbers that we want to get to grid.

So I have got 165, if I go for a bit one more. There we go—that is 165 x 165, okay. So that is a square. We can check that by moving this up and it says size 165 x 165. All I now need to do is right click and choose image craft to selection. So it is crafted down to just that square. I could make this even smaller if I wanted too, about a cut bit, etcetera. Now, all I need to do is resize that.

Now you can use these images not just for Fave icons for your website. You can also use them for you avatars for things like My Bloglog and Technorati sites like this so that they will scroll down here. Where people have My Bloglog or Technorati or something like that as a widget on their blog. You will actually have that icon appearing here, since it is your little avatar, okay.

So we might not want to actually take it all the way down to the fave icon size. Okay, the fave icon size is 15 x 15, but what I am going to do first of all is save this as 150 x 150. Because then I can use it for avatars for other sites So, to resize it I am going to choose image, scale image and I am just going to change 150 in the with and if I hit tab, it will then change the height to 150 as well to keep the ratio. I am just going to click on scale, just resize it for me.

Then all I need to do is click on file, save as and give it a name, what I am going to call it is in this case i150, okay. No why I actually save it as an icon, I could save it as a jpeg. Incase I want to make more changes to it or use it as a jpeg, but in this case. I am going to choose the file type ICO. By scrolling this list, it is down here somewhere. It is a Microsoft Windows icon, if I move this back across you will see the extension is ICO. So click on save and save that as an icon file.

Now and then go to right click again, choose image, scale image and take all the way down to 15. So I have got my fave icon ready to go. You can see that is quite small, but looks quite cool. So I will now “File”, “Save As” and put that as i15. As you took it for, to work as a fave icon, you will actually need to save it as fave-icon, okay.

Transcription by: Scribe4you Transcription Services