What is a favicon, and what size should it be?

What a favicon is

A favicon is the icon a browser shows next to your page title in a tab. The same icon appears in bookmarks, history, and next to your site name in Google's search results on mobile and desktop. On phones, a separate touch icon is used when someone adds your site to the home screen.

Which files you need

• A favicon for browsers: an SVG if you can, which stays sharp at every size and can adapt to dark mode, plus a PNG or ICO fallback.
• A square PNG of 48 by 48 pixels or larger, which matches Google's recommendation for search results.
• An Apple touch icon, 180 by 180 pixels PNG, for iPhone and iPad home screens.
• Optionally, a web app manifest with 192 and 512 pixel icons if you want an installable app.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-48.png" sizes="48x48" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Getting it into Google results

Google shows a favicon next to your result when it can crawl the icon and the homepage declares it. Its guidelines ask for a square icon, recommend a size above 48 by 48 pixels, and ask for a stable URL, a file Googlebot is allowed to fetch, and an image that represents your brand rather than anything inappropriate. Changes can take days or weeks to appear, because Google recrawls the homepage and icon on its own schedule.

Common mistakes

• No declaration at all, relying on /favicon.ico at the root. Many browsers still try that file, but Google and some tools prefer an explicit link tag.
• A non-square or tiny image that looks blurry or gets rejected.
• The framework's default icon left in place. Vite, Next.js and AI app builders all ship one, and it is surprisingly common on live sites.
• An icon blocked by robots.txt or served with the wrong content type.
• Detail that disappears at 16 pixels. Simplify the logo mark for small sizes.

How to check it

Open your homepage source and look for rel="icon" in the head, then request each icon URL and confirm it returns 200 with an image content type:

curl -sI https://example.com/favicon.svg

Check the tab in both light and dark browser themes, and add the site to a phone home screen to see the touch icon.

What a scan can and cannot tell you

WebAuditOS checks whether the homepage's served HTML declares a favicon and whether an Apple touch icon is configured. It also checks for Organization or WebSite structured data on the homepage, which helps Google connect your site name and branding.

It does not fetch the icon files to confirm they load, measure their dimensions, or check how Google displays them. A declaration pointing at a missing file will pass the presence check.

Seeing your favicon in your own browser tab proves little. Browsers cache icons for a long time, so test in a private window after any change.

Short answers

What size should a favicon be? Provide an SVG or a square PNG above 48 by 48 pixels, plus 180 by 180 for Apple devices.

Do I still need favicon.ico? It does no harm as a fallback. Declare your real icons with link tags too.

Why does Google not show my favicon? It may not have recrawled yet, the icon may be too small or not square, or Googlebot cannot fetch it.

Does a favicon affect SEO? Not ranking, but a clear icon makes your result easier to recognise and click.