Monday, March 22, 2010

How to add favicon (favorite icon) into your Blogger blog. A step by step tutorial.

Sponsored Links



NOTE: THIS IS AN OLD POST WITH OUTDATED METHOD, FOR NEW AND SIMPLE STEPS CLICK HERE

A favicon, the short form of favorite Icon, is a small icon which is displayed on the browser tabs just left side of your website or blog title. Favicon has been very important element for websites or blogs, as it can act as symbol of your websites, as such, by seeing ‘f’ in white color with blue background, we will immediately come to know it is facebook.
Here let us talk about adding favicon to your blogger or Wordpress blog.
First of all, you have to design your favorite icon, following the trend, it is better to make the first letter of your blog name as foreground and your favorite color as background.
Now, you have to change the picture into .ico format. You can do it from this website (a webpage will open in new window)
Click on ‘brows’ there, and select your picture that you already created. And now select ‘generate favicon icon’.
Now you will get an output of .ico files, download the file to your desk top.
Upload the .ico file to your Flickr or Sydrive or any other online storage location (remember; photobucket and picasa does not support .ico files)
Now, copy the bare file location of the .ico file, from the online storage.
Note: Copy the location and paste it into another browser, and check if it is displaying correctly!
If you still didn’t understand how to copy the file location; right click on the image in browser, and select ‘copy link location’ (in firefox) and now paste it in a notepad file. Now you got the file location URL.
Also make sure that you have uploaded the .ico file in the ‘public folder’ in Skydrive or flickr, otherwise it will not display in public!
Now modify below code with your .ico URL

< link href="http://faviconurl" rel="shortcut icon"/>
< link href="http://faviconurl" rel="icon"/>
Replace http://faviconurl to the URL that you have already copied in the notepad.
Now, go to blogger settings page, and go to ‘Layout’, then ‘Edit HTML’, expand to ‘widget template’.
Paste the code just above   < /head/>  tag
(I strongly recommend you to take a back up of your blog template before making any modifications like this.)
Save the template, and now see the blog has got new favicon. (Wait at least 10 minutes, and check first in internet explorer!)


NOTE: THIS IS AN OLD POST WITH OUTDATED METHOD, FOR NEW AND SIMPLE STEPS CLICK HERE

blog comments powered by Disqus
Related Posts Plugin for WordPress, Blogger...