How to create and use shortcut (favicon) icons on your pages
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.
- How to create shortcut (favicon) icon images using netpbm
- Add a link to the icon in the head part of your pages to make sure all browsers find it
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.
1. How to create shortcut (favicon) icon images using netpbm
- Create a 16x16 image using Gimp or image editors.
- Save your icon file in the
PNMformat. Most image tools support this format. Save your file as .jpg or .png if .pnm is unavailable. - Make sure you have netpbm installed. (Gentoo:
emerge netpbm) - Convert your pnm image to a favicon
ppmtowinicon -output favicon.ico yourdrawing.pnmif your image is .pnmjpegtopnm yourfile.jpg | ppmtowinicon -output favicon.icoif your image is .jpgpngtopnm yourfile.png | ppmtowinicon -output favicon.icoif your image is .png
- 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.
2. 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:
<head> <link rel="shortcut icon" href="/favicon.ico"> <title>my website </head>
It is possible to use a full path to another location (<link rel="shortcut icon" href="http://www.mysite.net/here/favicon.ico">), but this is not recommended because common browsers look for a /favicon.ico. 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 with link rel="shortcut icon".
Why The Netscape Icon Is Showing Up Everywhere
The Netscape Enterprise server has a default favicon.ico, this is why sites like stortinget.no will show you the Netscape logo.
Useful links:
- How to create favicon-icons on Unix machines (mavetju.org)
- Graphics Formats for the World Wide Web: http://www.wdvl.com/Graphics/Formats/
- Creating the Icon http://www.wdvl.com/Authoring/Design/Images/Favicon/icon.html
- How to Add a Shortcut Icon to a Web Page: http://msdn.microsoft.com/workshop/Author/dhtml/howto/ShortcutIcon.asp
- HTML Tutorial http://www.w3schools.com/html/
- Next: Using .htaccess for site control
- Previous: What you should know about domain names
