Favicon Lesson


When you look up at the browser window, or sites that have been bookmarked, you will often see a small image that is associated with the site. These are called favicons - "favorite icon" - and are not required for a website, but they do add a bit of personalization.

Here is the favicon image for my site - it was created in a graphics program where I drew a flower in a pot.

Favicons are small (usually 16 x 16 pixels)

The .ico extension (meaning icon) used to be required but now a .png can be used just as well.

By default, a browser looks for a file called favicon.ico in the main directory of a website (where your html files live) - but since we are keeping images in a special folder we should probably go ahead and put the image in there - then let the browser know the name and where to find it. In the <head> section you would add the following line of code.

<link rel="shortcut icon" href="images/favicon.png">

Create a favicon for your site

Go into PIxlr (or any graphics editing software that you use)

Create a new image that is 100 x 100 pixels

You may need to zoom in to see pixel by pixel - keep in mind that this image will need to be resized down and will be lose some detail - stick to something very simple at first

Resize your image to 16 x 16

Save as favicon.png

Add the code to your webpage, and move the image into the folder

Upload the image and the html page - if it is not showing up you may need to clear your browser's cache so it can load the new image

Try it out - does your favicon show up?