Blogger and Linode VPS - Part 4: Custom favicon

|
Blogger will use its favicon by default for all of its hosted pages. To change it to something you created is actually very easy.

The first step is to create a square image. Ideally 16x16 as that is the default favicon dimensions. However any square image is technically fine for the next step.

The second step is to use a favicon generator. I used the Dynamic Drive FavIcon Generator. To create a favicon using that tool simply upload your image and then wait a few seconds for the download link.

You will now need to upload the favicon somewhere. I uploaded it to my Linode account where all blog images are hosted. However you may need to find a file host that allows direct linking if you do not have your own web hosting account. For the purposes of this article we will assume you have uploaded the file to http://www.mydomain.com/favicon.ico

The final step is add the favicon to your template. In the Layout tab in Blogger, click Edit HTML. In the Edit Template section scroll down, or find, </head>. Just above it paste the following code:

<link href='http://www.mydomain.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
The whole process is pretty simple. The only counter-intuitive thing is not using DynamicDrive's favicon inclusion sample code. It appears to be either wrong or wrong enough to not be able to override Blogger's default favicon. The code snippet above is based on what Blogger uses to add its own favicon so using that as a template means the favicon change shows up immediately.

Below is a comparison shot of the before and after icons as seen in Firefox. I have the Faviconize extension installed so no page titles are shown.

0 comments:

Post a Comment