You are here:
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:
Screenshot showing the favourites icon in the address bar and favourites list in Internet Explorer
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.