Every time a design team exports an icon set, the same question comes back: do we need one file or fifteen? Is the little square in the browser tab the same image as the one that lands on a phone home screen? The short answer is no. A favicon and an app icon are two different assets, with different sizes, different formats, different HTML tags and different places where they show up.
This guide settles the confusion once and for all, including the part most articles skip: what Google actually pulls and displays next to your result in mobile and desktop search.
Favicon vs app icon: the short answer
| Question | Favicon | App icon / touch icon |
| Where it appears | Browser tab, bookmarks, history, Google search results | Phone or tablet home screen, app switcher, installed PWA window, app stores |
| Typical size | 16×16 up to 96×96 (Google prefers multiples of 48px) | 180×180, 192×192, 512×512, 1024×1024 |
| Format | SVG, PNG or ICO | PNG only (no transparency for iOS) |
| HTML needed | <link rel="icon"> |
<link rel="apple-touch-icon"> + web manifest |
| Design approach | Ultra simplified mark, readable at 16px | Full brand badge with background, padding and corner safe zone |
What exactly is a favicon?
A favicon (short for “favorite icon”) is the small square image a browser associates with a website. It was introduced in 1999 for Internet Explorer bookmarks and the original spec was a single 16×16 pixel .ico file sitting at the root of the domain.
Today a favicon is still a tiny image, but it is used in far more places than a bookmark list.
Where a favicon appears
- Browser tabs on desktop, usually rendered at 16×16 or 32×32 depending on screen density
- Bookmarks bar and bookmark manager
- Browser history and autocomplete suggestions in the address bar
- Google search results, next to the site name and URL on mobile and desktop
- Browser start pages and “most visited” tiles
- Chat apps and link previews that fall back to the favicon when no Open Graph image exists
Is favicon.ico still used?
Yes, but it is no longer mandatory. Every major browser still requests /favicon.ico automatically when no <link> tag is declared, and Googlebot does the same as a fallback. Keeping an ICO file at the root costs nothing and prevents 404 noise in your server logs.
That said, the modern approach in 2026 is:
- An SVG favicon as the primary asset (scales perfectly, supports dark mode)
- A 96×96 PNG for browsers and crawlers that do not render SVG icons
- A legacy favicon.ico (containing 16×16 and 32×32 frames) at the domain root
What exactly is an app icon?
“App icon” is where most of the confusion starts, because people use the term for three different assets.
1. The Apple touch icon (web clip icon)
When a user taps Share > Add to Home Screen in Safari on iPhone or iPad, iOS looks for a apple-touch-icon declaration. That image becomes the home screen icon. It must be a 180×180 PNG without transparency. iOS applies its own rounded corners, so your artwork should be a full bleed square.
2. PWA manifest icons
On Android (and for installable Progressive Web Apps on desktop), the icon comes from the icons array inside your site.webmanifest file. The two sizes you cannot skip are 192×192 and 512×512, plus a maskable variant so Android can crop your icon into circles, squircles or rounded squares without cutting off your logo.
3. The native store app icon
If you actually ship a native app, the store icon is a separate deliverable entirely: 1024×1024 PNG for the Apple App Store and 512×512 PNG for Google Play. These never appear on a website and are never referenced in HTML.
When a client says “app icon”, ask which of the three they mean. In 99% of website projects, they mean the touch icon and the manifest icons. Someone has put together a good summary of it.
Exact sizes and formats to export
Favicon export table
| File | Size | Format | Purpose |
| favicon.svg | Vector (32×32 viewBox) | SVG | Primary tab icon, dark mode capable |
| favicon-96×96.png | 96 x 96 | PNG | Fallback + Google search results |
| favicon.ico | 16×16 and 32×32 frames | ICO | Legacy browsers, root auto-request |
App icon and touch icon export table
| File | Size | Format | Used by |
| apple-touch-icon.png | 180 x 180 | PNG, opaque background | iOS and iPadOS home screen |
| web-app-manifest-192×192.png | 192 x 192 | PNG | Android home screen, PWA install prompt |
| web-app-manifest-512×512.png | 512 x 512 | PNG | Splash screens, app switcher, store listings |
| maskable-512×512.png | 512 x 512 | PNG with 20% safe padding | Adaptive Android shapes |
The maskable safe zone, explained simply
Android crops icons into whatever shape the device theme uses. To survive that crop, your logo must sit inside a circle covering roughly the central 80% of the canvas. On a 512×512 file, that means keeping all meaningful artwork within a 409px diameter circle in the middle, and letting the background colour bleed to the edges.
The HTML you actually need
Forget the 20 line blocks generated by old favicon tools. Four lines in the <head> cover every modern browser and device:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Add a PNG line if you want to give crawlers an explicit raster file:
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">A minimal site.webmanifest
{
"name": "PixelBright",
"short_name": "PixelBright",
"icons": [
{
"src": "/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#111111",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/"
}Important: the manifest must be served with the application/manifest+json MIME type, and the icon paths must be absolute from the root unless your manifest sits in the same folder.
Dark mode favicon with a single SVG
An SVG favicon can switch colours depending on the browser theme, which an ICO or PNG cannot do:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #111111; }
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
</style>
<path d="M4 4h24v24H4z"/>
</svg>This solves the classic problem of a black monogram disappearing into a dark browser tab.
What Google actually displays in search results
This is where the favicon and the app icon stop being interchangeable. Google displays a favicon, not your touch icon, next to your result on mobile and desktop. But it applies its own rules before showing it.
- One favicon per site. Google associates a single favicon with a hostname, taken from the home page. You cannot set a different icon per URL.
- The file should be a multiple of 48 pixels square. 48×48, 96×96 or 144×144 are safe choices. The absolute minimum is 8×8, but a 16×16 file will look blurry in results.
- Both the home page and the favicon file must be crawlable. If
robots.txtblocks your image folder, Google shows a generic globe instead. - The URL must be stable. Do not change the favicon file name on every deploy or add a cache busting hash that rotates. Google recrawls the home page to detect changes.
- Supported rel values are
icon,shortcut icon,apple-touch-iconandapple-touch-icon-precomposed. Google can fall back toapple-touch-icon, which is why that line is worth keeping even on a non installable site. - No animation, no inappropriate content. Animated GIF favicons are not supported in search results, and Google reserves the right to replace any icon that violates its policies.
Updates are not instant. After you change a favicon, expect anywhere from a few days to a few weeks before search results refresh, depending on how often your home page is crawled.
Design rules: a favicon is not your logo shrunk down
The single biggest mistake in icon exports is resizing a horizontal logo lockup to 32×32 and calling it a day. At that size, text becomes a grey smudge.
For the favicon
- Use a single glyph, monogram or symbol, never a full wordmark
- Test at actual size on a white tab and a dark tab before approving
- Keep two colours maximum and avoid thin strokes under 2px at 32×32
- Avoid gradients that collapse into a flat blob at 16px
For the app icon
- Fill the entire canvas with a solid or gradient background, no transparency on iOS
- Do not pre-round the corners, the operating system does it for you
- Respect the 20% maskable safe zone on Android
- You can afford slightly more detail here, since the icon renders at 180px and above
Export checklist for a complete icon set
- Design a square master artboard at 1024×1024, plus a simplified variant for small sizes
- Export
favicon.svgfrom the simplified variant - Export
favicon-96x96.pngand generatefavicon.icowith 16 and 32px frames - Export
apple-touch-icon.pngat 180×180 with an opaque background - Export manifest icons at 192×192 and 512×512, plus one maskable 512×512
- Place
favicon.icoat the domain root, even if other files live in/assets/ - Add the four link tags and the manifest reference to every page template
- Verify with a hard refresh, then check the URL directly in a browser to confirm a 200 response
Common mistakes we see on audits
- Transparent apple-touch-icon, which iOS renders on a black background
- Favicon only declared on the home page, leaving inner pages with the default globe
- A 16×16 favicon as the only file, which Google upscales into a pixelated mess
- Manifest served as text/plain, which silently disables PWA install prompts
- Icons blocked by robots.txt inside a generic
/static/disallow rule - CDN cache set to several months on the icon path, making rebrands painfully slow to propagate
- Different icons per subdomain when brand consistency was the goal, or the opposite: a shared icon when subdomains represent distinct products
FAQ
What exactly is a favicon?
A favicon is the small square icon a browser shows next to a page title in a tab, a bookmark, the history list and in Google search results. It identifies the site visually and is declared in HTML with a <link rel="icon"> tag or served automatically from /favicon.ico. Related reading: iconifier.net: Free Online Favicon and Apple Icons Generator.
Is favicon.ico still used?
Yes. Browsers and Googlebot still request /favicon.ico at the domain root when no icon is declared in the HTML. It is no longer the main format, but keeping it as a fallback is good practice and avoids unnecessary 404 errors.
Is a favicon the same as a logo?
No. A logo is designed for readability at large sizes and often includes text. A favicon is a 16 to 96 pixel square that usually contains only the symbol, monogram or most recognisable element of the logo, simplified so it stays legible at tiny sizes.
How do I add a favicon to my website?
Export a square PNG or SVG, upload it to your server, then add <link rel="icon" href="/favicon.svg" type="image/svg+xml"> inside the <head> of every page. On WordPress you can also set it in Appearance > Customize > Site Identity as the Site Icon, which generates the favicon and the touch icon automatically.
Does the WordPress Site Icon replace a full icon set?
Partially. WordPress generates a favicon and an apple-touch-icon from a 512×512 upload, which is enough for most brochure sites. It does not produce an SVG favicon, a maskable Android icon or a custom manifest, so a PWA or a brand sensitive project still needs a manual export.
Can I use the same image for the favicon and the app icon?
Technically yes, visually rarely. The favicon needs aggressive simplification and the app icon needs a full bleed background with safe padding. Start from the same master artwork, but export two different compositions.
Why does Google show a globe instead of my favicon?
The most common causes are a blocked file in robots.txt, a non square or too small image, a favicon declared only on inner pages instead of the home page, or a recent change Google has not recrawled yet. Check the file loads directly in a browser and that the home page returns the correct link tag.
What size should a maskable icon be?
512×512 pixels, with all critical artwork kept inside the central 80% circle. Declare it in the manifest with "purpose": "maskable" and keep a separate "purpose": "any" icon for platforms that do not crop.
Need an icon set that works everywhere?
At PixelBright we deliver complete, tested icon packages: SVG favicon with dark mode support, legacy ICO, touch icon, maskable Android icons, a validated manifest and the exact HTML to paste into your templates. Get in touch if you want your brand to look sharp in every tab, home screen and search result.