Favicons & Page Icons

A favicon is the small icon shown in browser tabs, bookmarks and history. Phones and operating systems also use larger icons when someone adds your site to their home screen. A few <link> tags in the head cover every case.

The minimum

HTML favicon.html

<title>My site</title>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

favicon.ico — the classic format, supported everywhere. Browsers also look for /favicon.ico automatically if no icon is declared.
SVG icon — sharp at every size, tiny file, supported by modern browsers. It can even switch colours in dark mode using CSS inside the SVG.
apple-touch-icon — a 180×180 PNG used when an iPhone or iPad user adds the site to their home screen.

Designing a good favicon

Keep it simple: a single letter, symbol or simplified logo. Detail disappears at 16×16 pixels.
Use strong contrast, and check it on both light and dark browser themes.
For the apple-touch-icon, use a solid background — iOS doesn't keep transparency there and adds its own rounded corners.

An SVG favicon that adapts to dark mode

HTML icon.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #10131c; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M8 6h16v4H13v4h9v4h-9v8H8z"/>
</svg>

Save this as icon.svg and link it with type="image/svg+xml". Because the SVG contains a media query, the icon is dark on light tabs and white on dark ones.

Web app manifest

To make a site installable as an app (a Progressive Web App), Android and desktop browsers read a JSON manifest listing icons in several sizes:

HTML manifest-link.html

<title>My site</title>
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#d6336c">

JSON site.webmanifest

{
  "name": "CodeAtlas",
  "short_name": "CodeAtlas",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#d6336c",
  "background_color": "#ffffff",
  "display": "standalone"
}

theme-color tints the browser's interface on some mobile browsers to match your brand.

Summary of icon files

File	Size	Used by
`favicon.ico`	32×32 (can contain 16×16 too)	All browsers, legacy fallback
`icon.svg`	Any	Modern browser tabs
`apple-touch-icon.png`	180×180	iOS home screen
`icon-192.png`, `icon-512.png`	192, 512	Android home screen and installed apps, via the manifest

Troubleshooting

Browsers cache favicons aggressively. After changing yours, try a private window or a hard refresh.
Use root-relative paths (/icon.svg) so the icon works on every page of the site, not just the home page.
Many free generators create the full set of files from one image — handy, but you only really need the four listed above.

PreviousFigures & Image Maps NextAudio & Video