Glossary
Favicon
A favicon is the small icon that represents a site in a browser tab, a bookmark list, a mobile home screen and, on mobile search results, beside the result itself. Browsers look for one at `/favicon.ico` by default and prefer an explicitly declared icon when the page provides one. It is a small thing that appears in a large number of places, and its absence is noticed mostly by its replacement with a generic placeholder.
How browsers find one
A `<link rel="icon">` in the head names an icon explicitly, with optional `sizes` and `type` attributes so the browser can pick.
Without one, browsers request `/favicon.ico` at the root of the host. This is a convention rather than a specification requirement, and every major browser implements it.
`rel="apple-touch-icon"` names the icon used when a page is added to a home screen on iOS, at a larger size.
A web app manifest can declare a set of icons, which is what installable applications and Android home screens use.
Several `link` elements with different `sizes` values may be declared together, and the browser chooses whichever fits the place it needs the icon.
Formats and sizes
The `.ico` container can hold several sizes in one file, which is why it survives despite being an old format.
PNG is supported everywhere and is simpler to produce; SVG is supported by current browsers and scales without multiple files.
The sizes that matter in practice are 16 and 32 pixels for tabs, 180 for the iOS home screen, and 192 and 512 for manifest icons.
An icon designed at a large size and scaled down is usually illegible at 16 pixels. A simplified variant for the small sizes is the difference between a recognisable mark and a smudge.
Where it appears beyond the tab
Google displays a site's favicon beside results on mobile, and documents its own requirements: a square icon, a stable URL, and a size that is a multiple of 48 pixels.
Bookmark lists, browsing history, and the tab strip when many tabs are open and titles are invisible.
Home screens, where the larger icon is the application's identity.
Link previews in some chat applications, when no Open Graph image is available.
Browser bookmark bars, where a page with no title text visible is represented by its icon alone — which is the case where a recognisable mark earns its place.
Why changes seem not to apply
Browsers cache favicons aggressively and separately from the page cache, sometimes for weeks.
A hard reload of the page does not necessarily refetch the icon. Opening the icon URL directly and reloading that is more reliable.
Changing the filename, or adding a version parameter to the declared URL, forces a refetch — at the cost of a URL that changes.
Google's guidance asks for a stable URL, so version parameters are better avoided on the icon a search engine reads.
Frequently asked questions
- Do I still need favicon.ico at the root?
- It is a useful fallback, since browsers request it when no icon is declared. An explicit link element is the primary mechanism.
- Why has my new favicon not appeared?
- Browsers cache icons aggressively and separately from pages. Opening the icon URL directly and reloading it is more effective than reloading the page.
- What size should a favicon be?
- 16 and 32 pixels for browser tabs, 180 for iOS home screens, 192 and 512 for manifest icons. Google asks for a square multiple of 48 for search.
Sources
Related
VeriFixScan crawls a site and applies its checks to every page it reaches, keeping the evidence behind each finding. Scanning one website is free.
Scan a website