favorites icon PDF Print E-mail

How do I add a favorites icon to my website?

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 72DPI. 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 color space to 8 bit:
    • Fireworks: Set the Export file format to BMP 8 from the Optimize palette/inspector
    • Photoshop: Select: Image > Mode and ensure that RGB Color and 8 Bits/Channel are 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" xhref="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.

 
< Prev
[ Back ]