November 06, 2008

Fixing Custom Favicons for Blogger Blogs

Favicons A-Z by Dave TaylorMany 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 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.

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy