Shortcut Icon / Favicon

Shortcut Icon or favicon is the icon that show at the address bar or tab bar in your browser. The example? Just like this blog, I used a shortcut icon. So how we add a shortcut to our website? It’s easy, just follow this instruction :

1. Make or edit a picture with size 16x16 pixel.
   
2. Save the file into JPG/GIF/PNG format.
   
3. Upload the file to the server.
   
4. Edit your HTML file, add this tag between “head” tag
   

   <link rel="Shortcut Icon" type="image/[format_gambar]" href="[url_gambar]" />

   Contoh :

   <link rel="Shortcut Icon" type="image/png" href="http://geocities.com/ivanoctav/img/icon.png" />

   
   
   at this example I use a “icon.png” file. Your could use any other name of file, but remember to change the type (type="image/..) as the same as your file type.
   
   
5. Test your website with Opera/Netscape/Mozila
   
6. Done!
   

How about IE? We could do the same thing for IE, but IE only support *.ico format, so find image editor that support ICO to make your shortcut icon. If you named this icon as “favicon.ico” and than you upload the file to root server, you don’t have to add any tag between your head tag. Check this out for examples:

http://www.mozilla.org/favicon.ico
http://www.google.com.hk/favicon.ico

and It’s also work for Netscape/Opera/Mozilla.
But if you named the icon with something else (not favicon), you could use the same way just like instruction no.4.

And try to bookmark or save your website as “favorite” .. the shortcut icon will show also there. It’s cool huh?