The University of Massachusetts Amherst
Categories
Uncategorized

Add a favicon to your website.

A favicon is a small image (16×16 pixels) with a .ico filename extension that lives in the home directory of the website. It will display next to the address bar, and on the tab, in your browser. You also have to add some code to the page, within the <head> tag area. There are services on the web to create favicons, some free, and there’s a way to create one in Photoshop. In order to create it in Photoshop, you need to download and install a plugin for Photoshop that will allow images to be saved in the .ico format. It is also possible to use .gif, .jpg, or .png images as favicons, but they reportedly won’t work in Internet Explorer. (I haven’t tested this.)

This page explains how to do it in Photoshop:
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html

This is where you can get the plugin that enables Photoshop to save as .ico files:
http://www.telegraphics.com.au/sw/

Click this link to see the one I created according to these instructions:
http://people.umass.edu/kskelly/

The following link takes you to a page where you can create the favicon online, and then download it. It actually downloads a “package” which is a .zip file containing the .ico file, and an animated GIF (filename extension .gif) that scrolls the same image annoyingly. Note that on the page where you download the file, there is also a little frame on the right with the code you need to insert in the page head. You can copy it from there and paste it into your page code.
http://www.html-kit.com/favicon/

There are others. Google ‘favicon.’

By Kevin

Manager of OIT Software Support