How to put a favicon on your blogger or wordpress blog

Click here for my posts in English!


In my previous post I was speaking about a shift from Opera to Mozilla. No discussion for the reasons of doing that is intended here. The connection between that post and this one is the way a favicon looks in the three Browsers: Mozilla Firefox, Internet Explorer and Opera.

Anyone knows what a favicon is. Fot those who don't I borrowed the most stupid yet most simple explanation from wikipedia: A favicon (short for 'favorites icon'), also known as a website icon, a page icon or an urlicon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many recent web browsers can then make use of them. Browsers that support favicons may display them in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface.

From my previous reduced webmaster experience I knew that one way to put a favicon on a website was by uploading the image through FTP to the server. As long as the principle is just the same for Wordpress, I was really curious to see how it works on Blogger.

So the first thing to be done is to create a favicon. It is more than easy and one of the sites you can do it on is the following. Download the created folder on your computer. You will see two possibilities for the favicons: one plain and another one animated. Although the second option looks more than appealing, the problem with it is that it does not work on Internet Explorer or Opera. It only works with Mozilla.

After downloading the zipped folder with the favicon in it on your computer, the second step is to upload the image on a free image hosting site, I used Photobucket.

The third step in the range is to go to your Blogger admin panel and click on the template tab and then on Edit HTML and add the code of your url image code before </head> in your template (replace the URL with your own link to the image!):

<link rel="Shortcut Icon" href="http://img.yourphotobucketaccount.com/favicon.png"

Save it! And you’re done!

All these steps taken, I checked up the way my favicon looked. But, ooops! I could not see it in IE7. Yet, it showed the favicon for other blogs on wordpress. So, I looked on the source of those blogs and noticed the presence of an .ico file.

<link rel="Shortcut Icon" href='http://rosedesrochers.todays-woman.net/wp-content
/uploads/2007/10/favicon.ico' rel='shortcut icon'/>

So, the solution seemed quite easy at the beginning: upload an .ico file on phtobucket the same way I did with the .png file. But, photobucket does not accept .ico files, so I had to find image hosters that do: here are four of them. I used the second one to upload the .ico file. After that, I copied the .url code into my html template on blogger just before the other script above. As a result, I can see my favicon in all the three browsers, so I hope will you.