How To Make a Favicon

Have you ever wondered how websites/blogs get those cute little images to the left of their web addresses? Those little images are called Favicons. I wanted one but I did not want to pay somebody to make me one so I researched on how to make my own and now I am sharing my findings with y'all! My blog is on Blogger so I have no idea if this will work with other blogs hosted on other sites or not.

First ya will need to find a graphic you want to use. I like going to The Graphics Fairy for all my graphics such as this. On the right hand side of her page you will scroll down and see this box. Click on it and it will take you to all the categories of images she has which are all FREE.

Now keep in mind there are tons of fabulous graphics to choose from but keep it simple. Images such as this will not do well. You will be making the image into a tiny little square and you want your readers to be able to tell what it is.

I decided on this image.

This next step will vary on process depending on what type of computer you have. We have a Mac so all I do is click on the image right off of the page and drag it to my desk top.

Here it is on my desk top.There is no need to click on the actual image to gets its true size because it will be wayyyy bigger than you actually need it. For standard computers I think all you have to do is cut and copy it straight from the page it is on. Not sure though cause I have not used a standard computer in over 7 years.

Next up you have a choice of two FREE online photo editing programs. I will show you how to make your Favicon with both so be prepared for LOTS of pictures.

The first program I am going to show you is Pixlr. I stumbled across this program last weekend when redoing my blog. It is a great program and again it is FREE! Once you are on the home page click on Pixlr Editor.

It will then take you to this screen and you want to open the image you chose and had saved to your desktop or wherever it is you save stuff like that on your computer.

Select the file you want.

It will appear like this. Sorry it is not rotated but you can get the idea. There are too many pics and I am to lazy to go back and fix this one!;)

Next up click on Image and then image size.

This is what will pop up.

You want to uncheck the Constrain box and then enter in 100 width and 100 pixels. This will make your image square which it HAS to be.

Here is what your image will look like if you did it right. If you are having issues with it not letting you make the size 100X100 it is because you did not unclick the Constraints box. Trust me I know this from experience!;)

Next up ya want to save your image to wherever it is you save stuff like this on your computer.

You have the option of renaming it if you want. Leave in the JPEG format and the quality does not need to be adjusted either. Just click ok.

Next up go to your blog. I am using my custom furniture blog to show you how to do this since I had not changed mine out on there yet. See the orange Favicon?

To get rid of it click on Design.

Then off to the left you will see the Favicon section so click Edit. I managed to not take a pic of the next step but it is pretty much self explanatory. You will see a choice to download your image so click on it and download your image. That simple.

Once you have done that this is how it will appear. Notice your new Favicon! Be sure to hit the save changes button before you leave the design page otherwise it won't save it more than likely. 

Now if once you go back to your blogs main page and you do not see your Favicon up in the window no worries! Mine did not show up till three days after I downloaded. I read that sometimes it takes up to a week and sometimes it shows up instantly. Just be patient if it is not there right away.

Next up I will show you how to make a Favicon using Picnik. Picnik is another FREE editing program but after April it will no longer exist but we still have over 2 months to play with it so I figured it was worth sharing since it is the program I have been using for my blog.

Just download your image like you did before.

Then click on Resize.

Uncheck the Keep Proportions box. Then adjust your numbers to 100X100.

This is how it will appear.

Next up just click on the Save option and save it to wherever you want on your computer and follow the previous steps for getting it on to your blog. Note when the resized picture pops up after being added to the Favicon on Blogger it will appear larger and fuzzy. NO WORRIES! It is suppose to look that way. I was all ticked the first time I saw it but again all was good.

So there ya have it! You too can have a fun favicon in front of your web address!
Though a lengthy tutorial this is a fairly simple project but if you would just rather have somebody do it for you and you have your image chosen I will be offering up my services for just $5 a Favicon. Really though I BELIEVE you can do this too!!


REMEMBER: It may not show up right away. It could take up to a week.

Hope this tutorial was helpful!

Linking up to the following link parties:

Metamorphosis Mondays

You have read this articleFavicon with the title How To Make a Favicon. You can bookmark this page URL https://about-obama.blogspot.com/2012/01/how-to-make-favicon.html. Thanks!

Write by: AN - Saturday, January 21, 2012