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.
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 Mode
is set toRGB
and8 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 format
toBMP 8
from theOptimize
palette/inspector - Photoshop: Select:
Image > Mode
and ensure thatRGB Color
and8 Bits/Channel
are 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
.
Jamie
Latest posts by Jamie (see all)
- .IO vs .COM – Which Domain Extension Should You Choose? – 2021 Guide - January 13, 2021
- .co vs .com – Which Domain Extension is Better? – 2021 Guide - January 13, 2021
- .org Vs .com – Battle Of The Two Top Domain Name Extensions - January 13, 2021