What Is A “favicon” (.ico) File?

ICO Image Files

ICO file extensions are used for Icon File Formats. Originally intended for icons in Microsoft Windows. This file format is identical to the CUR cursor file format for Windows, differing only in the header byte tag that declares it a cursor or an icon. This article gives an overview of the ICO file format and a summary of ICO image production.

ICO files currently have a MIME-Type of image/vnd.microsoft.icon, which used to be, image/x-icon when using x- for unregistered tokens was standard practice. Additional MIME-Type used include image/ico, image/icon, text/ico, and application/ico. Some web servers do not have a default MIME-Type setting for .ico file extensions, and may header their default MIME-Type, which could be text/html or text/plain.

Icon Image Creation

ICO images are easy to design with simple graphical editors like Adobe Photoshop. Simply modify any image of any format into a square image at 16 pixels square, then save it to a PNG file with16 colors to be safe. Save the file as a .ico, such as favicn.ico (for easy recognition). Upload the ICO file to your web server, preferably at the root level, but it can be saved into sub-directory as well. Add a line of code inside the header of your homepage, as follows, using the correct filename and pathway to the ICO file on the web server, relative to the home page.

<link rel=”shortcut icon” href=”/favicon.ico”> or <link rel=”shortcut icon” href=”favicon.ico”>

If you save the ICO file to a sub-directory, such as inside the “images” directory, simply change the icon tag to match the pathway structure as follows:

<link rel=”shortcut icon” href=”/images/favicon.ico”> or  <link rel=”shortcut icon” href=”images/favicon.ico”>

test your favicon.ico display, and remove the /from the front of the pathway. Some servers may disregard the starting slash, where others may get unhappy and not find your file.

Icon Image Specifications

ICO image files were originally 32×32 pixels square with 16 colors. Current versions of Microsoft Windows support icons at multiple sizes and color depths. Prior to Windows XP, icon images could be any size from 1×1 pixel up to 255×255 pixels (including non-square sizes), and 4-, 8-, 16-, or 24-bit color depth. However, only 16×16 and 32×32 images at 4- and 8-bit color depths were shown in the graphical shell, so other icon formats were uncommon. Icon image data was always made up of two bitmaps: the AND bitmap and the XOR bitmap. The AND bitmap is 1 bit per pixel and is applied first to decide which areas of the image are affected by the background. The XOR bitmap is then applied using XOR. This allows for transparent areas in the image but also allows for inverting the background and other tricks.

Windows XP adds support for 32-bit color depth icon images, with transparency taken from the alpha channel of the image, allowing semi-transparent areas like shadows and anti-aliased edges. As the AND bitmap is no longer used, these icon images contain only XOR bitmap data. Windows XP also adds the ability to display icons at up to 72×72 pixel resolution in the graphical shell; however, Microsoft only recommended icon sizes up to 48×48 pixels, so larger icon sizes are uncommon.

Windows Vista adds support for 256×256 pixel icon images, and supports (but does not require) the compressed PNG format for that size. The PNG format encodes the image transparency data directly; it contains neither the XOR nor the AND bitmap data of the other icon image formats. It is recommended that all 256×256 icons should be stored in the ICO file in PNG format to reduce the overall size of the file. The Windows Vista graphical shell supports “zooming” the display in and out; as a result, more icon formats (including the larger, 256×256 format) are recommended.

Icon Image Selection

ICO images are intended to represent the business or project and are most typically the company logo. Whatever your selection for use in your ICO image, it needs to be simple and clean enough to view and interpret easily at a 16 pixel by 16 pixel size. Bicubic interpolation is most common amongst graphical editors for resizing an image, and this instills blurriness in the reduced image edges. You may need to do some graphic design touch-up for a clean image. If you have a vector format (such as EPS) of your source image, render it down to the final size and then do your photo or image touch-up work. A little testing and experimentation will lead you quickly to great results quickly and easily. Not all web users will notice your favicon image in the browser’s address field, but more people will notice it missing. It’s worth taking a little time from your day to create a favicon.ico file and give your web site all the detail attention it deserves to become a complete marketing campaign.

Leave a Reply