How to Create a Complete Favicon Package

By the PNGful team · Published July 13, 2026 · 8 min read

A favicon is no longer one 16-pixel file. The same little logo now appears in browser tabs, bookmark lists, iOS home screens, Android launchers, search results, and installed web apps — and each surface wants a different file. The good news is that the full list is short, stable, and easy to generate once you know what belongs in it.

The files you actually need

A complete, modern package is six to eight files:

File	Size(s)	Used by
`favicon.ico`	16, 32, 48 px (multi-size ICO)	Legacy browsers, tools that request `/favicon.ico` directly
`favicon-16x16.png`, `favicon-32x32.png`, `favicon-48x48.png`	16, 32, 48 px	Browser tabs and bookmarks on standard and high-density screens
`apple-touch-icon.png`	180×180	iOS/iPadOS home screen and Safari surfaces
`android-chrome-192x192.png`	192×192	Android home screen, PWA install prompts
`android-chrome-512x512.png`	512×512	PWA splash screens and app listings
`maskable-512x512.png`	512×512, `purpose: maskable`	Android adaptive icons (circle, squircle, etc.)

An optional SVG favicon (rel="icon" type="image/svg+xml") is worth adding if your logo is vector: it stays sharp at any size and can adapt to dark mode with embedded CSS. Keep the PNG and ICO files alongside it as fallbacks.

The fastest route is to start from one large square source image — 512×512 or bigger, PNG or SVG — and let the favicon generator produce the whole package, manifest included. If your logo only exists as vector art, the SVG to PNG converter gets you a clean raster source at any resolution.

Design for tiny sizes

Icons that look great at 512 px routinely fall apart at 16. Three rules help:

Simplify aggressively.One shape, one or two colors. Wordmarks are unreadable at 16 px — use a single letter or symbol instead.
Mind the contrast. Tabs sit on both light and dark browser themes. A solid background circle or rounded square keeps the icon legible on both; pure transparency is riskier.
Leave a safe zone on the maskable icon. Android crops maskable icons into arbitrary shapes; keep all important content within roughly the central 80% and fill the full canvas with a background color so cropped edges look intentional.

If your source image is not square, crop it squarebefore generating — automated center-crops are rarely where you want them. And resist the urge to simply scale down your full logo: look at the 16 px result at actual size, on a real tab, before deciding it is good enough. Many teams end up with two marks — the full logo for the site header and a simplified glyph for icons — and that is a feature, not a compromise.

The HTML head tags

With the files in your site root, wire them up in the <head>:

<!-- Classic and PNG favicons -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Optional: scalable SVG favicon -->
<link rel="icon" type="image/svg+xml" href="/icon.svg">

<!-- iOS home screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- PWA manifest (declares the 192/512/maskable icons) -->
<link rel="manifest" href="/site.webmanifest">

<!-- Toolbar/UI tint on some mobile browsers -->
<meta name="theme-color" content="#0f172a">

Even without a <link> tag, browsers fall back to requesting /favicon.icofrom the site root — one more reason to keep that file around even though it feels like a relic. The order of the tags matters less than people fear; what matters is that each href resolves to a real file. A broken favicon path fails silently, so a typo can go unnoticed for months.

Serve the files from the site root rather than a hashed assets folder if you can: external services (search engines, chat apps unfurling your links, feed readers) frequently look for /favicon.ico and /apple-touch-icon.png at their conventional paths without ever reading your HTML.

The web app manifest

The manifest is a small JSON file that tells Android and other PWA-capable platforms what your site is called and which icons to use when it is installed:

{
  "name": "Your Site Name",
  "short_name": "YourSite",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0f172a",
  "background_color": "#ffffff",
  "display": "standalone"
}

Two details trip people up: the purpose: "maskable" entry must be a separate icon object (do not mark your only 512 icon as maskable, or non-masking contexts will show it with padding baked in), and background_coloris what users see as the splash screen while an installed app loads — match it to your site background.

Favicons in Next.js

If your site runs on Next.js with the App Router, you can skip most of the manual wiring. Drop specially named files into the app/ directory — favicon.ico, icon.png (or icon.svg), and apple-icon.png — and Next.js generates the correct <link> tags automatically, sizes read from the files themselves. A manifest.ts file in app/serves the web manifest the same way, with the icon list defined in TypeScript instead of raw JSON. You still need to create the actual images; the framework only handles the markup. Other frameworks have similar conventions, but the underlying files and sizes are identical everywhere — generate the package once and it works on any stack.

Test before you ship

A five-minute smoke test catches nearly every favicon bug:

Load the site and check the tab icon in a light theme and a dark theme.
Request /favicon.ico and /site.webmanifestdirectly — both should return the file, not a 404 or an HTML error page.
On Android, use “Add to Home screen” and confirm the icon fills its shape without awkward white borders (that is the maskable icon doing its job).
On iOS, add to Home Screen and check the 180×180 icon renders crisply.
Hard-refresh after any icon change — favicons are cached aggressively, and a stale tab icon fools everyone at least once.

Do this once, keep the generated package in version control, and favicons become a solved problem — the same source image can regenerate every size the next time your logo changes. When it does, the rest of your site images deserve the same care; our website image optimizer covers those.