Creating a favourites icon for your website (favicon.ico)
Curious about how to customise the icon shown with your website address or are you here because your server reports that favicon.ico is the most popular missing file on your site?
On this page, I'll tell you how I made the favourites icons on the various pages of my site. In this screengrab of my homepage in Internet Explorer, the icons are ringed in red:
What is favicon.ico?
It's a Microsoft invention. Internet Explorer will look for it when someone visits your site. If it's there, it'll be shown as the icon in the address bar with your URL. If it's not there, the browser shows IE's default picture of a piece of paper with an 'e' on it. It will also show with your webpage title in the favourites list. Visitors can drag the icon out of the address bar onto their desktop to have a link to your site there too and the logo is used there at double size.
Favicon.ico is now recognised by Netscape as well.
How do I make one?
- Create an image file. It should be 16x16 pixels, although IE will also scale a 32x32 icon on the fly. I used the free Irfanview to resize an image and convert it to ICO format.
- Upload it to the root of your server as favicon.ico. That should be it, but it doesn't always work like that.
- So, include this code in your webpage between the <HEAD> and </HEAD> tags:
<LINK REL="SHORTCUT ICON" HREF="http://www.sean.co.uk/favicon.ico">But linking to your own icon, obviously. When you link to your icon like this, you can give it a different name to favicon.ico and can have lots of different favourites icons for different pages on your site by linking to different icons from each page. I've created different icons for several sections of my site, as the screenshot above shows. You need to include the appropriate LINK REL code on each webpage of your site, so incorporating it in a template can make your life much easier.
How do I make a favicon for the iPod Touch or iPhone?
The Safari browser in the iPod Touch and iPhone enables users to bookmark sites that appear as icon shortcuts in the interface, like those shown in the photo on the right. In Apple's jargon, they're called 'web clip bookmarks'.
To set one up for your site, you need to create an image file that is 57x57 pixels, and save it as a PNG file. Then upload it to the root of your website (where your default webpage, such as index.htm is stored) with the filename apple-touch-icon.png. The iPod Touch or iPhone will put a glassy overlay on it to make it look like an Apple icon.
If it's not working, or if you want to have different icons for different pages, you can add a link to the icon, similar to how you link to the normal favicon:
<LINK rel="apple-touch-icon" href="customIcon.png">
...where customicon.png is the filename of your custom icon, including its path if necessary.