Create a Favicon for Your Website

A logo turned into a multi-resolution favicon.ico containing 48, 32, and 16 pixel versions Logo 48 32 16 favicon

A favicon is the small icon browsers show in tabs, bookmarks, and history. It is usually the most-seen icon your product ships, and it is a classic IconWorkshop job: turn one approved logo into a crisp multi-resolution favicon.ico.

Build the icon

  1. Start from a square version of your logo with the largest practical dimensions and a transparent background.
  2. Open it in IconWorkshop and create a Windows icon from the image.
  3. Keep at least the 16x16, 32x32, and 48x48 formats in the icon. The 16-pixel version is the one most browser tabs actually display, so check it carefully and retouch it if the logo loses definition.
  4. Save the icon as favicon.ico.

Wire it into the site

  1. Upload favicon.ico to the root directory of your website.
  2. Add the link tag to the <head> section of your pages:
<link rel="icon" href="/favicon.ico" type="image/x-icon">

Many browsers also look for /favicon.ico automatically, so placing the file at the site root covers user agents that ignore the tag.

Going further

Modern sites often pair the ICO with an SVG favicon and larger PNG touch icons. If your logo master is SVG, keep it in Axialis IconVectors and use IconWorkshop to render the ICO and PNG derivatives from the same artwork, so every favicon variant stays in sync.

Related tutorials

Build Cross-Platform Icons with IconWorkshop 6.97

Download the fully functional 30-day trial for Windows, or go straight to the perpetual license checkout.

Download 64-bit Download 32-bit Buy License

Windows 7, 8/8.1, 10, and 11. One license per developer, lifetime support, one year of updates included.