Showing posts with label favicons. Show all posts
Showing posts with label favicons. Show all posts

Tuesday, 27 November 2007

Make a favicon - the little icons in the browser address bar

Favicons are the little icons that appear to the left of the url in your browser address bar. They also appear next to the site name in your 'Favorites'. See below, i've subtly circled the favicons in red.


screenshot of Internet Explorer's address bar with the favicon (little icon) circled

How to create a favicon
Your favicon needs to be 16 x 16 pixels so open up Photoshop (or a graphics programme, even 'Paint' will do) and make yourself a nice little icon that's 16 x 16 then save it as a gif or a bmp. Because this size is so tiny you may find that just reducing your logo to 16 x 16 will make it look a bit sh*t so have a play and keep it nice and simple.

How to get it into the right format
Favicons need to be .ico files. Now there is an open source plugin from telegraphics that you can get for Photoshop that will allow you to save the file as an .ico.

However i've just created a favicon using an online converter that's really easy to use:

  • Upload your gif (or whatever) file (you can even enter your twitter username and just use your profile pic)
  • Click 'Generate FavIcon.ico'
  • Bob's your uncle, you're given a nice little zip file containing the precious .ico file.

How to add it onto your website
Upload the favicon.ico file to your website folders. It needs to be put into the same folder as your home page, make sure it's not in an images folder but just sitting there on its own.

Then add the following HTML tag to your web page after the <head> tag and before the </head> tag:

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

You'll have to put this in the html for every page you want the favicon to appear on, or if you are using CSS (which you should!) then it just needs to be in there. [update: see the comments, you can't add a favicon to CSS]

If you still can't see it make sure you are using Firefox to browse the web as Internet Explorer creates problems just to entertain itself.

Collecting favicons
While surfing the web for the information in this post i also discovered a private society of individuals (well one guy) who collects favicons. An interesting hobby i'm sure you'll agree but i can't imagine that they have the resale value of stamps, china dolls or antique pepper pots.