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
