The Motive Web Design Glossary
favicon.ico, favorites icon, shortcut icon
If a favicon.ico file is not provided, a browser will simply display a default webpage icon.
A favicon.ico file is a 16×16 pixel image, displayed to the left of the webpage address (URL) in the browser address field. It may also be displayed alongside the meta title in a user’s favorites/bookmarks list (if the webpage has been bookmarked), or in the history list.
The favorites icon is displayed to the left of the webpage address (Firefox screengrab)
Favourites icons were first introduced by IE5.xx (WIN) and may not be displayed by all browsers.
Adding a favorites icon to a webpage
Creating the icon image (file)
- Start a pixel-based image editing program (e.g. Photoshop, Fireworks).
- Create a new file with a canvas size (width and height) of 16×16 pixels and resolution of 72DPI. If using Photoshop, check that the
Color Modeis set toRGBand8 bit. - Open an image that you want to as a favicon, for example a photo or logo.
- Scale the image to fit within the 16×16 pixel canvas.
- Pixel-edit the image as necessary (as a check, show someone else the resized image, and ask them what they see).
- Once the image is presentable, change the colour space to 8 bit:
- Fireworks: Set the
Export file formattoBMP 8from theOptimizepalette/inspector - Photoshop: Select:
Image > Modeand ensure thatRGB Colorand8 Bits/Channelare selected (checked) - Graphic Converter: Select:
Picture > Colors > Change to 256 Colors (8 Bit).
- Fireworks: Set the
- Save/export the image as a bitmap (.bmp) file.
- Rename the file:
favicon.ico. - Upload to the root directory of your website.
‘favicon not found’
If there is no favicon.ico file at the root level of a website, when a webpage is bookmarked a 404 (file not found) error may be generated (depending on the browser used). This error will not be visible to the user, but will be shown in the website server log (traffic report).
Linking the favico.ico file to a webpage
If you have dedicated server space and a top-level domain name, a browser will automatically look for the favico.ico file in the root directory and the following will not apply.
If your website is hosted by an ISP as part of a connection package (e.g. you have an Xtra or Paradise.net ‘personal homepage’) then it is unlikely that you will have dedicated server space.
For webpages hosted under a shared domain, add the code in bold to the <head> of each webpage. (If your website uses frames, then add the code to the <head> of the parent frameset).
<html>
<head>
...
<link rel="shortcut icon"
href="http://www.yoursite.co.nz/path-to/favicon.ico"
type="image/ico" />
...
</head>
<body>
...
</body>
</html>
Change the href value (http://www.yoursite.co.nz/path-to/favicon.ico), to match the location of your favico.ico file.
Troubleshooting favorites icons
Favorites icons and redirected domain names
If you have a top-level domain name that redirects to a webpage on a shared server, the favorites icon may not be shown. This will depend on how the host redirects the domain name; either using a frameset, or a JavaScript refresh.
1. Frameset ‘redirection’
Editing a redirection frameset
Some hosts enable the redirection frameset code to be edited; look for an Advanced Mode option (or similiar) when setting the redirect.
The host creates a single frame frameset at the top-level domain containing the homepage webpage. If this method is used, the top-level domain name will be shown in the browser address field, even when linking away from the homepage.
As the top-level domain webpage is the host’s frameset, the browser will look for the icon on the host server (which you are unlikely to have direct access to)—so your icon will not be displayed.
If links from the homepage target the entire window then the favorites icon will be shown for subsequent webpages. To do this, add a target attribute to all links on the homepage;
<a href="aboutme.html" target="_top">About me</a>
The target attribute
For the web standards inclined, the target attribute is deprecated in the XHTML specification. If validation (against the XHTML-strict DTD) is important, using a JavaScript function to clear the frameset appears the only option.
The target attribute instructs the browser to replace the host’s redirection frameset with the destination webpage.
2. JavaScript refresh
The host creates a single (blank) webpage at the top-level domain with a JavaScript that refreshes to show the webpage on the shared server.
If this method is used, there may be a brief flash as the webpage refreshes. The homepage address will be shown in the browser address field (not the top-level domain name).
Assuming the favicon.ico file has been uploaded and link code added to the <head> of each webpage, the favicon should be displayed.
Favorites icons under Apache
If the website is hosted on a server running Apache, you may need to add the following directive to the .htaccess file.
AddType image/x-icon .ico
This directive enables the server to respond correctly to requests for files with the extension .ico.
References and further reading
- Adobe Photoshop and Elements Ico Format Extension (Telegraphics)
Shareware enabling files in the Windows.icoformat to be opened and saved from Photoshop and Elements. - Java-based icon creator (Icon Forge)
- Icon creation software (Microangleo 5.0)
- Favicon validator (HTML Kit)
Enter a webpage addess to check that yourfaviconhas been linked correctly, shows the icon image(s), etc.
Glossary A-Z