A favicon is the small icon in browser tabs, bookmarks, history lists and, increasingly, next to your site in Google's mobile search results. Getting it right takes a handful of files and a few lines of HTML. Here is exactly what to make and why.
The short answer
- favicon.ico containing 16 × 16, 32 × 32 and 48 × 48 pixel images, in your site's root folder.
- apple-touch-icon.png at 180 × 180 pixels, for iPhone and iPad home screens.
- Two PNGs for Android at 192 × 192 and 512 × 512, listed in a site.webmanifest file.
- Optionally, an SVG favicon for crisp rendering at any size in browsers that support it.
The Image to ICO converter makes all of these from one logo in its favicon package, together with the manifest and the HTML.
What Google requires for search results
Google shows a favicon beside your site's name in search results. In 2023 it updated its guidelines: the favicon must be square, at least 8 × 8 pixels, and it strongly recommends 48 × 48 or larger. The older rule that sizes must be a multiple of 48 pixels, still repeated on many sites, no longer applies. Google also asks for a stable URL that it is allowed to crawl, so do not block the icon in robots.txt or move it around. Changes can take weeks to appear in results, because Google refetches favicons on its own schedule.
Where each file is used
- 16 × 16: browser tabs and bookmark lists on standard screens.
- 32 × 32: tabs on high-resolution screens, the Windows taskbar and shortcuts.
- 48 × 48: Windows site icons and Google's recommended minimum.
- 180 × 180: the icon iOS uses when someone adds your site to the home screen. iOS rounds the corners itself, so supply a square image, and avoid transparency: transparent areas may show as black.
- 192 and 512: Android home screens and the splash screen when your site is installed as an app.
The HTML
Place these tags inside the head of every page:
<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"> <link rel="manifest" href="/site.webmanifest">
Browsers look for /favicon.ico in the root even without a tag, which is why that one file matters most.
SVG favicons
An SVG favicon stays sharp at every size and can even switch colours for dark mode using a prefers-color-scheme media query inside the file. Chrome, Edge and Firefox support it. Support elsewhere is less consistent, so add it alongside the .ico rather than instead of it.
Designing for 16 pixels
At 16 × 16, a favicon is about the size of a single letter. Detailed logos, thin lines and text become a smudge. Most brands use a simplified mark: a single initial, a symbol, or the logo's most recognisable shape on a solid background. Check it on both light and dark browser themes, since many people use dark mode and a dark logo on a transparent background disappears there.
Common mistakes
- Only one small PNG. It looks blurry on high-resolution screens and is missing for home screens.
- A non-square image. It gets squashed or rejected, including by Google.
- Forgetting the cache. Browsers keep favicons for a long time. When you change it, test in a private window, and consider renaming the file or adding a version such as ?v=2 to the link.
- Serving the icon from a URL that changes with every deployment, which confuses search engines.