I’m sure there’s many of you out there who wanted one, even if you don’t know exactly what it’s called!

What is the FAVICON?

FAVICON is that little image that commonly appears right in front of the Address / URL bar of any web browser, just before the HTTP part. As you can see the FAVICON for goldfries.com is that little black square with some orange artsy curves.

Have a look at your browser’s bookmark, the list of sites are very likely to have their icons shown there as well. As you can see it’s a very useful way to locate your favourite sites in your bookmark, it’s like it carries the image of the site. Good to have one, isn’t it?

How to make one

A FAVICON file is an image that is 16×16 pixels in dimension, saved under ICO format with the .ico extension. Most people just name theirs “favicon.ico”.

If you have the Adobe Photoshop application with you, then installing the Save to ICO plugin from Telegraphics will allow you to directly save the image into ICO file format.

If you don’t, then there’s this really cool web-based ICO conversion service at HTML-Kit.

After acquiring your ICO file, the next step is to upload it to a host where you could call it from your website.

The HTML for calling the FAVICON is very simple.

1

<link rel="Shortcut Icon" href="your.ico" />

Simple, right? It should work as long as it’s on the root folder of your website. In case it doesn’t work, you could use the full URL

1

<link rel="Shortcut Icon" href="http://www.yoursite.com/your.ico" />

If you’re unclear of the location of the file, just keep on trying and do remember to clear the cache.

Have fun creating your own FAVICON!

This entry was posted on Wednesday, June 24th, 2009 at 11:59 pm and is filed under Websites & Blogging. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Like this article? You can share it to the world with »