A favicon is the small image displayed in a browser tab, bookmarks and some operating-system shortcuts. Although tiny, it improves brand recognition and helps people find a page among many open tabs.

A dependable favicon should not rely on a single file. A good set combines a multi-resolution ICO fallback, crisp PNG files and a larger touch icon for mobile shortcuts.

Start with a simple, readable image

Use a square composition with strong contrast and limited detail. Thin lines, subtle shadows and long text disappear at 16 × 16 pixels. The main symbol should fill most of the canvas while keeping enough breathing room.

When possible, use a simplified brand mark or a one-to-two-letter monogram instead of a full horizontal logo.

  • Work from a source of at least 512 × 512 pixels.
  • Prefer transparency when the mark works on light and dark themes.
  • Review the result at 16, 32 and 48 pixels.

Generate the essential formats and sizes

The favicon.ico file should contain multiple internal resolutions. This project exports 16, 32, 48, 64, 128 and 256 pixels. Modern browsers also benefit from separate 16- and 32-pixel PNG files and a 180-pixel Apple Touch Icon.

SVG can work as a favicon in modern browsers, but keeping ICO as a fallback is still a practical choice. Avoid animation in the primary favicon.

Add the references to the HTML head

Place the links inside <head> and use root-relative paths so they work on nested routes.

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

Handle browser cache correctly

After publishing a change, perform a hard refresh, open a private window and test another device. During development, a temporary query such as /favicon.ico?v=2 can help confirm that the new file is reachable.

In production, keep stable names and consistent cache headers. Frequent favicon changes are rarely useful and can take time to appear in search products.

Validate the final implementation

Open every asset directly and confirm that it returns the expected content type. Then check browser tabs, bookmarks and a home-screen shortcut. Make sure the symbol is still recognizable in dark mode.

  • No favicon request returns 404.
  • The ICO contains multiple resolutions.
  • The tags are present in server-rendered HTML.
  • The mark remains clear at 16 × 16 pixels.

Frequently asked questions