A favicon (short for "favorite icon") is the small graphic that browsers show next to your page title in the browser tab, in the bookmarks bar, in the history list and increasingly in search engine results. The name dates back to Internet Explorer 5 in 1999, where the icon was used purely as a bookmark identifier. Twenty-five years later the same file format and HTML markup still works, but the role of the favicon has expanded so far beyond that original purpose that "just upload a 16x16 .ico" is no longer the right answer.
What a favicon is actually used for today
Modern browsers and operating systems pull from the favicon set for a wide range of contexts, each with different size and format expectations:
- Browser tabs and bookmarks. Typically rendered at 16x16 or 32x32 CSS pixels, but on high-DPI displays the browser pulls a larger version and scales it down. A tiny pixelated icon next to a sharp page title looks dated.
- Search results. Google has been showing favicons next to mobile search results since 2019 and on desktop since 2023. The icon needs to be at least 48x48, multiples of 48 are recommended, and the file must be crawlable.
- iOS and Android home screen. When a user "adds to home screen", iOS pulls the
apple-touch-icon(180x180), Android pulls icons from the web app manifest (typically 192x192 and 512x512). Without explicit declarations, both platforms generate a blurry screenshot fallback. - Progressive Web Apps. PWAs installed as standalone apps rely on the web app manifest for icons in the app launcher, task switcher and splash screen. Wrong sizes here means an installable site that looks broken.
- macOS Safari pinned tabs. Uses a separate monochrome SVG (
mask-icon) for pinned tab appearance. A niche case, but trivial to support. - Windows tile pinning. Edge and the Windows Start menu can pin sites as tiles, which requires a separate set of
msapplication-TileImagedeclarations.
The pragmatic consequence: you need a small set of files (typically four to six), not a single .ico, and you need a handful of HTML link tags to declare them.
Which file formats matter
Three formats are relevant in 2026, and the days of needing all of them simultaneously are over.
- PNG. The right default. Universally supported, lossless, transparent backgrounds work everywhere. One PNG per target size.
- SVG. Supported by every modern browser for favicons. One SVG can scale to every size, and on high-DPI displays it stays sharp without separate retina assets. Caveat: SVG favicons must be self-contained (no external references, no external stylesheets, no embedded fonts) and Safari only supports them when paired with a PNG fallback.
- ICO. The legacy container format that can hold multiple sizes in one file. Still useful for one specific case: the request to
/favicon.icoat the site root, which every browser, RSS reader and crawler implicitly makes even if you do not link to it. Returning a 404 for that URL is harmless but generates noise in server logs. A small multi-size .ico (16x16, 32x32, 48x48 in one file) silences it.
WebP and AVIF, despite being excellent for content images, are not used for favicons because browser support for them in the favicon role is inconsistent. Stick to PNG and SVG.
The actual list of files you need in 2026
A solid, future-proof favicon set covers all the contexts above with this minimum:
favicon.ico— multi-size (16, 32, 48), placed at the site rootfavicon.svg— scalable, used by modern browsers when availablefavicon-96x96.png— explicit raster fallback at a comfortable mid-sizeapple-touch-icon.png— 180x180, no transparency (iOS adds rounded corners itself)web-app-manifest-192x192.png— Android home screen, PWA launcherweb-app-manifest-512x512.png— PWA splash screen, large tile contexts
That's six files. The corresponding HTML in <head>:
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />And a minimal site.webmanifest:
{
"name": "Your Site Name",
"short_name": "Site",
"icons": [
{ "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}That covers browser tabs, bookmarks, Google search results, iOS home screen, Android home screen, and PWA installation. Anything beyond that is edge case territory.
Design constraints for a favicon that actually reads
The hardest part of favicon design is not the export, it is making something legible at 16x16. A few rules of thumb that consistently produce good results:
- Simplify ruthlessly. A full logo rarely works as a 16x16 favicon. Use a single dominant element: a letter, a symbol, an abstract mark. Anything with thin strokes or fine detail blurs into mush.
- Strong contrast. The favicon sits on a light or dark browser chrome that you cannot predict. Pure white on transparent disappears on light themes; pure black on transparent disappears on dark themes. Use a solid background or design for both modes (an SVG with
prefers-color-schememedia queries works). - Square aspect ratio with safe margin. Design on a square canvas but keep about 10% padding inside the edges. Some platforms (iOS, Android adaptive icons) crop or mask the icon, and a design that bleeds to the edges gets clipped.
- Test at actual size. Looking at a 16x16 icon at 200% zoom is misleading. Render it at 100% next to other browser tabs to see how it actually competes for attention.
WordPress: how the Site Icon works
WordPress has had built-in favicon support since version 4.3. In the admin under Appearance, Customize, Site Identity there is a "Site Icon" field that accepts a single square image, minimum 512x512. WordPress then automatically generates and serves the various favicon sizes from that source.
The automatic generation covers favicon.ico, apple-touch-icon at 180x180, and the standard PNG sizes in the HTML head. It does not generate a web app manifest by default, so PWA installation will fall back to the apple-touch-icon. For most sites that is enough.
The shortcomings of the built-in Site Icon: it cannot serve different files per resolution (no SVG support beyond raster conversion), and it does not produce a manifest with the larger 512x512 size that PWA installs and Android splash screens prefer. For a site where you genuinely care about PWA appearance, supplementing the Site Icon with manual <link> tags via a child theme's functions.php is the cleaner path. Plugins like RealFaviconGenerator (also a great web-based generator if you want to skip the manual export) handle this end to end.
How to verify your favicon setup is working
- Browser tab check. Open the site in an incognito window (to avoid cached favicons) and confirm the icon appears next to the title. Test at least Chrome, Firefox and Safari.
- Site root request. Visit
/favicon.icodirectly. Should return a 200 with the icon, not a 404. Many sites miss this even when their HTML has a proper<link rel="icon">. - iOS home screen. On an iPhone, tap the share button in Safari and "Add to Home Screen". The preview should show your sharp 180x180 icon, not a blurry screenshot of the page.
- Google search. Search for your site on a mobile device. The icon should appear next to the result. If it does not, Google's
https://www.google.com/s2/favicons?domain=yoursite.comURL shows what the crawler currently has cached. - Lighthouse. Chrome DevTools' Lighthouse PWA audit catches missing manifest entries, wrong sizes, and other declaration problems.
Common problems and what causes them
- "My favicon doesn't show up." Almost always a caching issue. Browsers cache favicons very aggressively. Clear the favicon cache (Chrome: visit
chrome://favicon-cache, Firefox: clear cache and offline data) or test in incognito. - "It shows on desktop but not mobile." Usually a missing
apple-touch-iconor a wrong manifest path. Mobile browsers prioritize their own platform-specific icons over the generic<link rel="icon">. - "Google search shows a generic globe icon." Either the favicon is too small (under 48x48), or the file is not crawlable (blocked by robots.txt, behind authentication, returns the wrong content-type), or Google has simply not recrawled yet. Recrawl latency for favicons is often weeks.
- "The home screen icon has a white box around it." Apple-touch-icon images should not have transparency; iOS does not flatten transparent backgrounds to your theme color, it leaves them white. Save with a solid background that matches your brand.
- "The icon looks fuzzy on retina displays." Only the small
favicon.icois being served. Modern browsers will use the SVG or 96x96 PNG version if you declare it; check that the HTML actually includes those link tags.
What InspectWP checks
The favicon section of an InspectWP report verifies that a favicon is declared in the HTML head, that the /favicon.ico URL returns a valid response, and that an apple-touch-icon is set for iOS home screen support. Missing any of these is a low-severity finding, but the cumulative effect on first impressions (search results, bookmarks, mobile home screen) is real. A site that looks polished everywhere except its favicon comes across as unfinished. The good news: this is a one-time setup that, done well, never needs touching again.