How to Make a Favicon for Your Website (Sizes, Formats and Mistakes)

A favicon is the tiny icon in a browser tab. It is also what appears in bookmarks, history and, on phones, as the home-screen icon. A clear favicon helps people recognise your site among many open tabs.

Design principles

• Keep it simple. At 16 × 16 pixels, detail disappears. Use one bold shape or a single letter.
• Use strong contrast. Light icons vanish on light browser themes, and dark icons vanish on dark themes. Test both.
• Stay on brand. Reuse your logo colours.
• Design large, then reduce. Start with a square at 512 × 512 pixels with generous padding.

Which files you need

• favicon.ico (16, 32 and 48 pixel versions inside one file): still the most compatible fallback and expected at the site root.
• favicon.svg: a vector icon supported by modern browsers. It scales perfectly and can even adapt to dark mode with a CSS media query.
• apple-touch-icon.png (180 × 180): used when someone adds your site to an iPhone or iPad home screen.
• 192 × 192 and 512 × 512 PNGs: referenced in the web app manifest for Android and installable web apps.

The HTML

Place these lines inside the <head> of every page:

• A link with rel="icon" pointing to /favicon.ico
• A link with rel="icon" and type="image/svg+xml" pointing to /favicon.svg
• A link with rel="apple-touch-icon" pointing to /apple-touch-icon.png
• A link with rel="manifest" pointing to /manifest.json

Because browsers cache favicons aggressively, add a version query such as ?v=2 when you change one.

Step by step

1. Draw or export a square master image.
2. Make sure it is cropped tightly and centred.
3. Generate the sizes listed above with a favicon tool.
4. Upload the files to your site root.
5. Add the link tags and clear your cache to test.

Common mistakes

• Using a photograph or a full logo with small text.
• Forgetting a transparent background where one is wanted.
• Leaving the default hosting-platform icon in place.
• Blocking the favicon in robots.txt. Search engines show favicons next to results and need to fetch them.

Search results

Google can show your favicon beside your site name in mobile search results. It should be square, at least 48 pixels, a multiple of 48 if possible, and consistent across the site.

A good favicon is a small detail, but it is one of the first things visitors see.