Fixing Custom Favicons for Blogger Blogs

Many Blogger users have reported that their custom favicon has suddenly been replaced with the default orange Blogger favicon.



The reason for this is that the 'all-head-content' includable (the content generated for page headers when your blog is viewed in a browser) has been updated to include the following line:

<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>

Thankfully, there is an easy "fix" for this issue!





Simply locate the line(s) of code you have added to your Blogger template to reference your custom Favicon, and move these just before the closing </head> tag in your template.



The reason this trick works is because the code to reference your custom favicon appears after the lines added by Blogger to reference the Blogger favicon. In all HTML documents, code which appears later in the mark-up takes precedence over any tags which appear earlier (unless of course, statements are attached to make the earlier tags preferential!).

How to link to a custom favicon in your Blogger blog

If you do not already use a custom favicon for your blog, you may be interested to learn how to create one, so here are some useful links to other articles and resources on site:

• Favicons made easy (newer version, using png or gif files)


• Create a favicon for your blog (older version, using .ico files)


• Generate your own favicon from a JPG image
  
  

Favicons and Internet Explorer

When using Internet Explorer 6, you will only see favicons appear in the address bar if you have bookmarked the site you are viewing.



The tern "favicon" is  short for "favorite icon", and as such Internet Explorer will only display the favicon of a site if the site is recognized as one of your favorites (ie: if you have bookmarked the site in your browser!).



Some people also report that the favicon will only display when viewing the particular page they have bookmarked, and not the entire site. In this case, you would need to restart your browser for the favicon to appear in the address bar of all pages.



Your internet security settings (both in Internet Explorer and any anti-virus/anti-spyware programs you use) may also affect whether or not favicons will be displayed in IE6.

Were you able to fix your broken favicon?

I hope this post has provided a useful overview of how to fix the link to your custom favicon in your Blogger blog. Please feel free to leave your comments and suggestions below.