How to Add a Custom Favicon to your WordPress or Blogger Blog?

A favicon is a small square image measuring 16 by 16 pixels. It gives your blog a unique branding. With a favicon, your blog will stand out from the crowd and you can make people easily remember your blog. A favicon is usually displayed to the left of the address bar next to the url. On the bookmarks drop down list, it will appear to the left of a site’s name.

You can choose your favicon to be of .Gif or .Png format but usually favicons are of .ico type. Don’t panic. You have places to make all these files.

First of all, to generate a favicon you need a basic image file. You can either choose simple texts, in which case “Paint” is enough to make one. You can write fancy letters in fancy colours and effects to make your favicon.

If you choose to include images, I mean pictures, you have to either use existing images that are not copyrighted or build your own image from scratch (in which case, Photoshop does well). In any case make a 16 by 16 square image.

Once you have your jpg or gif or png file go to any one of the following websites to create your .ico file

www.favicongenerator.com/

tools.dynamicdrive.com/favicon/

favicon-generator.org/

www.favicon.cc/

In all the above websites you basically have to upload the favicon image file you created and then press “Generate” to get your favicon.ico file. You will have an option to “Download” your favicon.ico. Just download it and save it to your computer.

Now your favicon file is ready and you have to upload it somewhere and tell your blog to use it. Now we have to split into two different roads for WordPress and Blogger.

With a self-hosted WordPress blog, you simply have to upload the favicon.ico file to your root directory, that is your “public_html” folder. Now you have to find your header.php file and edit it. Paste the following line in your header.php file:

<link rel=”shortcut icon” href=”favicon.ico”>

Save your header.php file. Now if you refresh your browser, you should be able to see your favicon. If you don’t see it, try clearing the cache of your browser, restart your browser and load your blog.

With Blogger you always have the default Blogger favicon, the big B. Adding a favicon to Blogger blogs is most wanted because you can actually brand the free hosted Blogger blog with your own style. It gives the blog a more professional and unique look. And, along with the favicon if you purchase a decent domain (so that there is no .blogspot.com at the end), no one can easily find that yours is a Blogger blog.

So here we go:

Upload your favicon .ico file in any one of the following hosts that support .ico files:

1. http://www.110mb.com/

2. http://www.picpanda.com/

Then you have to tell Blogger to use that file. For that go to Design -> Edit HTML and check the “Expand widget templates” box. Now press ctrl+F to find </head>. Immediately before the head closing line paste the following:

<link href=’YOUR-FAVICON-URL‘ rel=’shortcut icon’/>

<link href=’YOUR-FAVICON-URL‘ rel=’icon’/>

Don’t forget to change YOUR-FAVICON-URL to the url where you just hosted your favicon. All set. Refresh your blog and you should see your favicon. If you use IE 6 or earlier version, bookmark your blog and restart your browser. You should be able to see the changes.

It won’t be fair if I don’t mention how to add favicon to WordPress Thesis theme, since Find All Answers runs on the Thesis Theme. And, I am a big fan of Thesis, believe me, it is the coolest framework. And, WordPress+Thesis=Awesomeness.

With Thesis, go to “Thesis” on the sidebar of your WordPress Admin panel. Under that go to “Site options” and expand the “Additional Scripts”. Just paste the following in that box:

<link rel=”shortcut icon” type=”image/ico” href=”favicon.ico”>

Click on the Big Ass Save Button and you are done.

For both the above cases, that is Blogger and WordPress, this is a one time addition. If you want to change your favicon, you don’t have to meddle with the code. You simply redo the favicon creation step and upload your new favicon.ico file. That’s it.

Hope this piece of writing will be of use to you. If you have a favicon installed in your blog please leave your link in the comments. I’ll be glad to have a look.

Tagged as: favicon, wordpress

Article by JaneSheeba

+Jane is the founder of Problogging Success. She is an expert blogger, consultant, freelance writer and blog designer. Don't forget to get your hands on two FREE Ebooks she offers.

Jane has written 264 awesome posts for Problogging Success.