Favicon

 

Firstly - What is a favicon?

Quite simply a favicon is the small icon that you should see in your browser next to the website address. Favicons show in most modern browsers when you load the webpage. Some older browsers may not show the icon or may need code adding to the page to tell the browser to display the icon file.

Why do I want a favicon?

Quite simply because it looks cool and if your site does get bookmarked it helps it stand out from the default browser logos.
favicon This is the icon I have created for jonnyspence.com using the site logo.

By default photoshop does not support the .ico file format. You will need to download a plugin, the one I used was from www.telegraphics.com.au/sw/ as they have a 32bit and 64bit plugin. If you use their plugin you may wish to donate to them.

To install the plugin you will need to copy the plugin file to:

C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats

favicon
favicon
Using photoshop, create an image that is square (height and width are the same) and add your icon image, I have used my flame logo. This logo is going to be very small so text may become unreadable unless its only a few letters. you may also want to remove the background to create a transparent are behind your logo.
Resize the image (Alt+Ctrl+I) to 16x16 pixels ensuring 'Constrain Proportions' is ticked. Favicons have to be 16x16 pixels, though some browsers support other sizes and formats.
 favicon
favicon Your icon is now ready to save. Ensure that when you save the file you change the format to ICO, and save the file as favicon.ico. If you don't have this option in the dropdown then you missed the first step and need a plugin. If you are using other programs such as GIMP this format comes as standard.

 

That's it! Now all you have to do is add the file to the root directory of your webpage (http://jonnyspence.com/favicon.ico). If you are using an older browser or want to make the page work with older browsers then add

<link rel="shortcut icon" href="http://jonnyspence.com/favicon.ico"> into the <head> section of your page (replacing the address with your own icon location).

 

Troubleshooting:

If the icon does not show up it may be that the site has been cached on your computer. Try removing the site from your favorites and clearing your browser history and cache before refreshing the page.