Favicon sizes: ICO, Apple and PWA icons

Favicon sizes: ICO, Apple and PWA icons cover different browser and device surfaces. A useful package combines a legacy multi-size ICO with explicit PNG and manifest icons instead of expecting one file to serve every context. This guide explains what each size is for, where it appears, and how the files fit together so you can publish a favicon set that stays sharp everywhere.

Browser-tab and bookmark icons: favicon.ico, 16x16, and 32x32

The classic favicon.ico remains a practical compatibility file. ConvertRS puts 16x16, 32x32, and 48x48 PNG frames inside it. The package also includes separate favicon-16x16.png and favicon-32x32.png files for explicit HTML icon links.

Why keep both an ICO and standalone PNGs? The ICO is the file browsers and tools request by convention when no explicit icon link exists, so it acts as a fallback that never 404s. The explicit PNG links give modern browsers a clear, high-quality choice without opening the ICO container. Together they cover browser tabs, bookmark lists, history entries, and most third-party previews that read the root favicon.

At these sizes, recognizability matters more than detail. A strong silhouette and clear contrast usually survive resizing better than small words. If your logo includes text, consider generating the icon from a mark or initial instead of the full lockup.

The 48x48 icon Google uses in mobile search results

The 48x48 frame inside the generated ICO is not only for legacy browsers. Google shows a favicon next to pages in mobile search results, and its guidance asks for at least a 48x48 square icon that is available at a stable URL. If your only icon is a stretched 16x16 PNG, the search result icon can look blurry next to competitors whose icons are properly sized.

This is one of the most commonly overlooked sizes because it never appears in a browser tab. You will only see it in search, which is exactly why it matters for a site trying to earn clicks: a recognizable icon next to your title adds a small but real visual anchor.

Apple Touch Icon: the 180x180 home-screen icon

The 180x180 apple-touch-icon.png is intended for Apple home-screen and related surfaces. When someone uses “Add to Home Screen” on an iPhone or iPad, iOS looks for this file; without it, the device falls back to a screenshot of the page, which usually looks worse than your logo.

It is separate from the browser-tab icon because the display context and resolution are different. iOS applies its own corner rounding, so keep important details away from the edges. The generator fits the same source image onto the Apple canvas; preview the package with enough clear space around the mark so it does not feel cramped.

Desktop Safari and Android ignore this file, so there is no benefit in reusing the 180x180 PNG for other platforms.

Android and PWA icons: 192x192, 512x512, and maskable icons

The generated web app manifest references android-chrome-192x192.png and android-chrome-512x512.png. These are used by supporting browsers and installed web-app experiences: Android home-screen shortcuts, installed PWA windows, and app switchers read the icons declared in site.webmanifest.

A second icon concept matters for Android: maskable icons. When Android places your icon in a circular, rounded, or squircle mask, a standard square icon can get its edges cut off. A maskable icon keeps the important artwork inside a safe zone — roughly the inner 80% — so every launcher shape looks intentional. ConvertRS builds the core PNG sizes and manifest; if your brand mark sits close to the edge, add extra padding before generating so the icon survives circular masks.

How the files fit together: HTML head and site.webmanifest

Publishing the files is only half the job; the browser needs to be told about them. The generated favicon-code.html contains links matching the file names exactly. The typical set looks like this:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Paste that block into the <head> of your pages and upload all files to your site’s root directory. The manifest itself declares the Android sizes:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

ConvertRS creates the files and manifest but does not install them on a website. You still need to copy the files to your host and link the manifest from the document head. On platforms like WordPress, upload via FTP or your host’s file manager and add the head links with an SEO or header-scripts plugin.

SVG favicons: when to add one

Some modern browsers support an SVG favicon declared with <link rel="icon" href="/favicon.svg" type="image/svg+xml">. The appeal is obvious: infinite resolution in one small file, and dark-mode variants via media queries inside the SVG.

Support, however, is inconsistent. Safari’s handling of SVG icons has historically been incomplete, and older crawlers and tools may ignore SVG entirely. Treat SVG as an enhancement on top of the ICO-plus-PNG baseline, never as a replacement. If your audience uses modern Chrome or Firefox almost exclusively, an SVG can simplify things; for a public site, ship the full set.

Common favicon mistakes

• Publishing only a 16x16 favicon.ico. Small icons get stretched on Android, iOS, and in search results. A single tiny icon is the most common cause of a blurry favicon.
• Forgetting the Apple Touch Icon. iOS home-screen shortcuts then use a page screenshot instead of your logo.
• Renaming files after generating. The HTML snippet and manifest reference exact names such as favicon-32x32.png; renaming one without updating the links breaks it.
• Leaving the old files in place. Uploading new icons while stale files remain at old URLs causes half-updated behavior that is hard to diagnose.
• Skipping the manifest on non-PWA sites. It costs nothing and decides which icon Android uses the moment someone saves your site to a home screen.

How to test and refresh your favicon

Browsers cache favicons aggressively, sometimes across restarts. To verify a new set:

1. Hard-refresh the page (Ctrl+Shift+R or Cmd+Shift+R) or test in a private window.
2. Open each icon URL directly, for example /favicon.ico and /android-chrome-512x512.png, and confirm the new artwork loads.
3. If the old icon persists, append a cache-busting query like /favicon.ico?v=2 to the icon links and update them in your HTML.
4. Check the tab icon, an iOS home-screen shortcut, and an Android shortcut to see each size in its real context.
5. Remember that Google’s search-result icon can take days to update after a crawl.

Which files should you publish?

For the package generated by ConvertRS, publish the ICO, the two browser PNGs, the Apple icon, both Android icons, and site.webmanifest. Add the supplied HTML links without renaming individual files unless you also update those links.

If you are starting from a logo, follow how to create a favicon from PNG for the source-image workflow, then generate the full set with the favicon generator. Everything runs locally in your browser, so the package is ready seconds after you drop the file.