How to insert favicon to your blog?

by house88kend Thu Feb 25, 2010 11:50 am

Ok! Here is a good tips on how to add your favicon into your blog,

Blogger is a very popular free Blogging platform, but each free blogs comes with the same exact default favicon that Blogger is using. You can help set your blog apart by getting your very own unique favicon plus there are a lot of benefits with having your own favicon. This post is in response to menopauseprincess. She asked about Blogger blogs having their own favicon.

Creating or finding your favicon
If want to create your own favicon, you can follow my guide on creating your own favicon. You can also find a free favicon from the 20 free favicon resources I have collected. I’ve used both unique and free favicons, I just try to use a favicon that represents what my website is about or something that is rememberable.

Uploading your favicon
You will need to find an alternative host for your favicon because Blogger does not host custom favicons. A lot of free file hosting services will not host .ico file types, so these are not good options. If you don’t have your own web hosting account, there is a service called myFavatar that will host your favicon for free. Flickr will allow you to host .ico files also, so if you have an account there already that may be a good choice.

Linking to your favicon
You will need to do some updates to your templates in order to get your favicon to show up. This part might get tricky, so if you need any additional help please don’t be afraid to ask. To edit your Blogger templates, after you login go to “Layout” –> “Edit HTML”. Now you will need to add the following line of HTML between the start <head> and end </head> tag:

<link rel="shortcut icon" type="image/ico" href="http://example.myfavatar.com/favicon.ico" />

Make sure you update the location of your favicon to the exact web location where you uploaded your favicon. If you do use myFavatar to host your favicon, they will actually provide you with the exact code to paste into your templates.

Testing your new Favicon
Typically when you save your templates and reload you should be able to see the new favicon. But occasionally there may be settings in your browser that may prevent your favicon from showing up, so you may need to reload or clear your cache in order to see it right away.

Any more? I hope this helps!

Very Happy