What is a Favicon?

favicon.ico, favorites icon, shortcut 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.

If a favicon.ico file is not provided, a browser will simply display a default webpage icon.

Examples of Favicons

Think about some websites you know:

  • Facebook’s favicon is a small “f”.
  • Twitter’s favicon is a little bird.
  • Google’s favicon is a “G”.

These little images help you recognize the website quickly, even if you have lots of tabs open.

How Useful is a Favicon?

Favicons are super useful because they help users navigate their tabs easily. If you have a lot of tabs open, you can find the open tab for your website quickly by looking for your favicon.

Favicons also help users bookmark your website. When a user bookmarks your website, your favicon will show up clearly in their bookmarks list.

So, favicons are small but mighty! They’re an important part of making a user-friendly website.

Adding a favorites icon to a webpage

Creating the icon image (file)

  1. Start a pixel-based image editing program (e.g. Photoshop, Fireworks).
  2. 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 to RGB and 8 bit.
  3. Open an image that you want to as a favicon, for example a photo or logo.
  4. Scale the image to fit within the 16×16 pixel canvas.
  5. Pixel-edit the image as necessary (as a check, show someone else the resized image, and ask them what they see).
  6. Once the image is presentable, change the colour space to 8 bit:
    • Fireworks: Set the Export file format to BMP 8 from the Optimizepalette/inspector
    • Photoshop: Select: Image > Mode and ensure that RGB Color and 8 Bits/Channelare selected (checked)
    • Graphic Converter: Select: Picture > Colors > Change to 256 Colors (8 Bit).
  7. Save/export the image as a bitmap (.bmp) file.
  8. Rename the file: favicon.ico.
  9. 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 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.

The following two tabs change content below.

Jamie Spencer

My name is Jamie Spencer and I have spent the past 10 years building money making blogs. After growing tired of the 9-5, commuting and never seeing my family I decided that I wanted to make some changes and launched my first blog. Since then I have launched lots of successful niche blogs and after selling my survivalist blog I decided to teach other people how to do the same.