How to Create and Add a Favicon to your Website

October 14th, 2010 - Posted by Steve Marks to Web Development.

How to add a favicon to a website

Favicons (meaning favourites icons) are small images that appear in the address bar, a browser tab or a bookmark when someone visits your site. They add branding and uniqueness to any website and are so simple to setup taking just minutes to generate. I want to show you just how easy they are to add by providing a quick step-by-step guide below:

1. Generate your icon
Using your preferred image editing software create a standard image of how you would like to the favicon to appear and export it as a jpg, gif, png or bmp. I recommend you try to stick between 16×16 and 32×32 for the size, although in step 2 we’ll deal with resizing and proportions.

2. Convert your image to a .ico file
There are lots of online tools out there that will take your image from step 1 and convert to a .ico file. A personal favourite of mine however due to the amount of options and ease of use is On the left hand side of the website click ‘Import Image’ and browse to the file you previously created. Here you can also specify the dimensions of the icon to be generated.

Once you’re happy with the options click ‘Upload’ and let the magic happen.

3. Show the world
Now that your favicon has been created you will have the opportunity to see a preview of it and download it ready to upload. To show your new creation on your website simply drop it into the root folder. A lot of browsers will look for a favicon in this location and display it automatically should one exist. For older browsers however and to meet the W3C recommendations we can also place the following code between our <head></head> tags like so:

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

Simply update the path to your favicon.ico file and you’re all done.

Favicon not appearing?

Quite often when I add a new favicon to a website it doesn’t appear right away. I have to clear my cache a couple of times and generally just wait. Try and view it on another PC if you are unsure or in a hurry to confirm it has been uploaded successfully.

This entry was posted on Thursday, October 14th, 2010 at 9:23 pm by +Steve Marks and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first