BytePane

Favicon Generator

Generate browser-ready favicon PNG previews, Apple touch icon guidance, site.webmanifest JSON, and favicon HTML tags from one source image. Runs locally in your browser.

Reviewed May 25, 2026. Privacy model: tool input is processed in your browser and is not uploaded to BytePane servers.

Generated icons

Choose an image and generate the icon set to preview browser and app icon sizes.

Favicon HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16.png" sizes="16x16" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#111827">

site.webmanifest

{
  "name": "My App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#111827",
  "background_color": "#111827",
  "display": "standalone"
}

Recommended production checklist

  • 1. Publish `/favicon.ico` as the legacy fallback.
  • 2. Publish `/favicon-16.png` and `/favicon-32.png` for PNG fallbacks.
  • 3. Publish `/apple-touch-icon.png` at 180x180 for iOS home screen.
  • 4. Publish `/icon-192.png` and `/icon-512.png` for Android/PWA manifest icons.
  • 5. Keep important logo details inside the center safe zone for maskable icons.
  • 6. Version or cache-bust favicon files after replacing them in production.

Frequently Asked Questions

Does this upload my logo?

No. The source image is read with the browser FileReader API and resized with canvas locally.

Can this create a real ICO file?

This tool generates PNG icon files and the HTML/manifest code. Use the 16, 32, and 48 pixel PNGs in an ICO packer if your deployment requires a multi-size favicon.ico.

Which favicon files should I publish in 2026?

Use favicon.ico, 16x16 and 32x32 PNG fallbacks, apple-touch-icon.png at 180x180, icon-192.png, icon-512.png, and a site.webmanifest.

Related Tools