ImgShift🌐 δΈ­ζ–‡

How to make a favicon

The tiny icon in the browser tab looks trivial, but there are a few decisions that are easy to get wrong.

What a favicon actually is

It is the small icon that appears in the browser tab and address bar. In practice it turns up in at least four places:

  • The browser tab, next to the page title
  • The bookmarks bar
  • When someone adds your site to their phone's home screen
  • Occasionally beside your site name in search results

It is the cheapest branding a site gets. When someone has fifteen tabs open, that 16Γ—16 square is often how they find you.

Which sizes you need

Different contexts want different sizes, which is why a proper ICO carries several at once:

16Γ—16Browser tabs
32Γ—32Taskbar, bookmarks
48Γ—48Windows desktop shortcuts
180Γ—180iPhone home screen (apple-touch-icon)
256Γ—256High-DPI screens, Windows large-icon views

You do not have to produce each one by hand. Converting one square PNG to ICO packs every size into a single file.

Why ICO rather than a plain PNG

Modern browsers will happily use a PNG, but ICO still has two practical advantages:

  • Several sizes in one file. The tab can use a crisp 16Γ—16 while a desktop shortcut uses 256Γ—256, and neither has to compromise.
  • Older environments. Legacy systems, old IE, and various crawlers only look for ICO.

Getting the artwork right

  • Start square. A non-square image gets cropped or squashed, and the distortion is obvious at small sizes.
  • Source at 256Γ—256 minimum, ideally 512Γ—512. Upscaling a small image produces mush.
  • Keep it extremely simple. At 16Γ—16, anything beyond two or three elements collapses into a blob. A single letter, symbol or shape works best.
  • Avoid small text. Two characters are already unreadable in a tab.
  • Think about dark mode. A pure-black icon disappears against a dark browser theme β€” a light outline or a brand-coloured background fixes that.

Installing it

Put the ICO in your site root as favicon.ico and reference it in <head>:

  • <link rel="icon" href="/favicon.ico" sizes="any">
  • <link rel="apple-touch-icon" href="/apple-touch-icon.png"> (a 180Γ—180 PNG)

Browsers and operating systems pick the size they need out of the ICO automatically. Force-refresh (⌘+Shift+R) afterwards β€” favicon caches are stubborn and sometimes take a while to update.

Make one now

Take a square PNG or JPG and run it through the PNG to ICO converter. It works locally, so the file never leaves your machine.

JPG β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’GIF β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’BMP β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’SVG β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’AVIF β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’ICO β†’ WebPTypically 25–35% smaller, no visible changeOpen β†’