HOWTO create and use shortcut (favicon) icons on your pages

From LinuxReviews
Jump to navigationJump to search

Shortcut icons are the icons displayed in your browser when you visit a web page. These icons are also displayed next to the link when users bookmark your page.

Some browsers try to get a the standard favicon file favicon.ico by default, even if you have not given any icon to your pages. This is why you may find "GET /favicon.ico HTTP/1.1" 404 entries in your web server logs.

How to create shortcut (favicon) icon images using netpbm

1. Create a 16x16 image using Gimp or image editors.

2. Save your icon file in the PNM format. Most image tools support this format. Save your file as .jpg or .png if .pnm is unavailable. 3. Make sure you have netpbm installed. (Gentoo: emerge netpbm)

4. Convert your pnm image to a favicon

ppmtowinicon -output favicon.ico yourdrawing.pnm if your image is .pnm

jpegtopnm yourfile.jpg | ppmtowinicon -output favicon.ico if your image is .jpg

pngtopnm yourfile.png | ppmtowinicon -output favicon.ico if your image is .png

5. Place the image in the / root of your web server

1.1. Other alternatives

The tool icoconvert is excellent for converting png images to ico files.

Add a link to the icon in the head part of your pages to make sure all browsers find it

Add a <link rel="shortcut icon" .. section in the <head> part of your page to make sure web browsers fetch it:

  <link rel="shortcut icon" href="/favicon.ico">
  <title>my website

It is possible to use a full path to another location (<link rel="shortcut icon" href="">) - and it is possible ot use different icons for each page. Generally, using alternative locations for shortcut icons only make sense if you want different icons on various parts of your site. Keep in mind that some browsers will get /favicon.ico regardless of what you ask them to get in the <head>..</head> section.

Why The Netscape Icon Is Showing Up Everywhere

The Netscape Enterprise server, Mambo and other software come with a default favicon.ico - which naturally shows up where you least expect it.

Useful links

Useful links: