Favicons in Web Applications, Web Sites, Blogger

1. Create a 16x16 png image using paint.net. If you want you can have transparent background.
2. Convert to ico (you can use Visual Studio or DynamicDrive
3. <link href='http://www.example.com/myFavicon.ico' rel='shortcut icon' type='image/icon'/>

Convert png to ico using Visual Studio (use DynamicDrive, is easier)

1. File⇒ Open⇒ File⇒ Select favicon.png
2. favicon.png is selected⇒ Edit⇒ Copy
3. favicon.png is selected⇒ File⇒ New⇒ File⇒Installed Templates=General⇒Icon File⇒Open
4. Right click⇒ Delete image type on all image types (left column)
5. Image⇒ New Image Type⇒ 16x16x24
6. Edit⇒ Paste
7. File⇒ SaveAs

Now we have two favicons.

1. favicon.png
2. favicon.ico

Install favicon to a web site (or application)

<!-- cross browser 16x16, 24bit color (optional +32x32, 8bit color) -->
<link rel="shortcut icon" href="http://www.example.com/myicon.ico" />
<!-- Apple -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<!-- Without Apple's shadow, round corners, reflective shine -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone4.png" />

To change favicon just give the new one a different name.
UPDATE: DO NOT copy favicon.ico to http://www.example.com/favicon.ico
If you do, you will not be able to change favicon, because browsers have no way to know that the new favicion is different from the one they have chached.

 

Install favicon to Blogger

Jun 2011 UPDATE:
Blogger now supports favicons:
Blogger⇒ Dashboard⇒ Design⇒ Favicon⇒ Edit⇒ Choose File⇒ Select your ico from your computer⇒ SAVE

Old Version:

All browsers support .ico favicons. IE has issues with .png favicons. Blogger does not accept .ico files. So:

• If you have another site to upload favicon.ico
  (I used http://sites.google.com/site/myname. Go http://www.google.com/sites to claim your site).:
  1. Upload favicon.ico
  2. CODE to insert:
     <link href='http://sites.google.com/site/myname/favicon.ico' rel='shortcut icon' type='image/icon'/>
• Otherwise (ONLY if you don't have a site and cannot get one in http://www.google.com/sites)
  1. Upload favicon.png as image to blogger. Copy the link.
  2. CODE to insert:
     <link href='http://BloggerLink/favicon.png' rel='shortcut icon' type='image/png'/>

Now you have the CODE to insert to Blogger template:

• Blogger⇒ Dashboard⇒ Design⇒ Edit HTML⇒ Ctrl-F (find): </head>
• Just before </head> insert the CODE you found on the previous step;

View your blog. Your favicon should be displayed instead of Google's.