favicon.ico, favorites icon, shortcut icon
favicon.ico file is not provided, a browser will simply display a default webpage icon.
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.
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 72 DPI. If using Photoshop, check that the
Color Modeis set to
- 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 formatto
BMP 8from the
- Photoshop: Select:
Image > Modeand ensure that
8 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:
- 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).
<link rel="shortcut icon"
href value (
http://www.yoursite.co.nz/path-to/favicon.ico), to match the location of your
Troubleshooting favorites icons
Favorites icons and redirected domain names
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>
target attribute instructs the browser to replace the host’s redirection frameset with the destination webpage.
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
AddType image/x-icon .ico
This directive enables the server to respond correctly to requests for files with the extension
Latest posts by Jamie (see all)
- The Best Dropbox Alternatives for 2020 Guide - April 3, 2020
- 13 Best Blog Name Generators - March 30, 2020
- The Best Standing Desks 2020 – Detailed Buyers Guides and Reviews - March 25, 2020