Favicons, or favorites icons, provide users a visual way to differentiate between a browser’s tabs, bookmarks, favorites, and history items. Depending on browsing habits, a user may have more exposure to a website’s favicon than its logo. To craft a favicon that improves user experience and entices users to return to a site, authors should ensure that the favicon is unique, crisp and well optimized.

Browser Support

Modern browsers support a variety of file formats to be used as favicons. The most commonly used file types are PNG, GIF, and ICO, though JPG, APNG, and SVG may also be supported depending upon the browser. Each file type has it’s own distinct advantages and disadvantages.

The ICO format is ideal for modern favicons because it allows authors to embed multiple images in a single file, allowing different icon sizes to be used in different contexts, and supports full alpha transparency. Additionally, authors are not required to implement any code on a page to use an ICO formatted favicon.

While JPG favicons are supported in most browsers, this format should not be used because it does not support transparency, and its lossy compression is less than ideal for small icons.

Developers may choose to use the GIF format to encode favicons because the format supports animation, indexed transparency, and generally offers the smallest file size (at 16px). However, because index transparency is binary (either the pixel is fully transparent or fully opaque), the format often produces undesirable visual artifacts, unless the favicon can map directly to a pixel grid and does not require the use of semi-transparent pixels. Likewise, animation is rarely necessary or desirable in a favicon.

The PNG format overcomes the limitations of GIF by offering full alpha transparency and a superior compression algorithm that can produce much better visual results.

Until SVG favicons are widely supported, authors should use the ICO format and embed (at least) 16px and 32px sizes.

History of the ICO format

The ICO format, developed by Microsoft, acts as a wrapper for bitmapped images. In other words, ICO files are not intrinsically compressed. In 2007, with the release of Windows Vista, the ICO format was updated to support embedding of compressed PNG contents (though I’ve only ever had success embedding compressed content at 256px). As such, authors should ensure that ICO files are compressed and served with a compressed Content-Encoding.

Some limitations are built into the ICO format:

• ICO files must be square.
• ICO files must not exceed 256px.

Something for Nothing

As with any asset being served, a web site’s favicon must be requested by a browser before a response (the file) is returned; this almost always requires markup to be added to the page. A favicon may be requested by adding a link to the head of the page:

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

It is possible, however, to serve a favicon to a browser without any markup at all. Browsers will automatically make a request to favicon.ico at the root domain (e.g. joeyhoer.com/favicon.ico); if an ICO encoded file is served at that location, it will be used by default. This behavior may be overridden by defining a link in the document head.

Creating Favicons

To convert images to ICO format, authors may use ImageMagick.

Because SVG favicons are not yet supported, it is recommended that individual icons are drawn specifically for each output size. This offers designers fine control over how the icon is displayed. The following command will generate an ICO file from two (or more) input PNG files.

convert 'source-16.png' 'source-32.png' 'favicon.ico'

Nevertheless, separate files may not always be available. Fortunately, ImageMagic supports many different image manipulation operations that can be used to perfect resizing. At a basic level, the following command may be used to automatically generate a favicon:

# Trim and resize image
convert 'source.png' -trim -resize 256x256 \
  -gravity center -background transparent -extent 256x256 \
  -define icon:auto-resize=16,32 -compress zip 'favicon.ico'

Alternatively, the command below offers additional control over how each size is generated. As is, the command is essentially equal to the auto-resize command above.

convert 'source.png' -trim -resize 256x256 \
  -gravity center -background transparent -extent 256x256 \
  \( -clone 0 -resize 16x16 \) \
  \( -clone 0 -resize 32x32 \) \
  -delete 0 -compress zip 'favicon.ico'

Extracting images from Favicons

# This will print the size, file type, calculated image type, calculated boolean for full opacity
identify -format "%wx%h %m %[type] %[opaque]\n"

Optimization

Quantization

Quantization, or reducing the overall colors in an image, allows favicons to be optimized. The following function will determine the total number of unique colors in an image, and quantize to that number:

quantize(){
  mogrify -colors `identify -format '%k' "$1"` +remap "$1"
}
quantize 'favicon.ico'

Icon Tools

Listed below are a number of tools that can be useful when producing icons for the web.

icoutils

a set of command-line programs for extracting and converting images in Microsoft Windows® icon and cursor files. The icotool program converts icon and cursor files into a set of PNG images.

iconutil

a utility to convert between .iconset and .icns files.

libicns

a library for manipulation of the Mac OS icns resource format

png2ico

converts a PNG to an ICO

ICOFormat

a Photoshop plugin that allows ICOs to be exported directly from Photoshop

ICOBundle

a Photoshop plugin that allows ICOs to be exported directly from Photoshop

Clearing favicon cache

When developing and testing favicons, it is useful to understand how to clear the favicon cache.

Clear Safari favicon cache

# Remove all favicons from Safari
sqlite3 ~/Library/Safari/WebpageIcons.db \
  "delete from IconData; delete from PageURL; delete from IconInfo;";

# Delete the favicon of a single domain from Safari
# delete from IconInfo where
sqlite3 ~/Library/Safari/WebpageIcons.db \
  "update IconInfo set stamp = 0 where url like '%url.com%';";

Clear Chrome favicon cache

# Remove all favicons from Chrome
sqlite3 ~/Library/Application\ Support/Google/Chrome/Default/Favicons \
  "delete from favicons;"

# Delete the favicon of a single domain from Chrome
sqlite3 ~/Library/Application\ Support/Google/Chrome/Default/Favicons \
  "delete * from favicons where url like '%url.com%';"