NAVANEM

full pack · runs in your browser

Favicon Generator

Drop a square image and download a complete favicon pack: favicon.ico, PNGs, a web manifest and the HTML snippet.

Drop your logo here, or click to browse

PNG, JPG, SVG, WebP, AVIF, square images give the best result. Minimum 512×512 recommended.

Settings

Generate the pack

11 files, favicon.ico, PNGs (16 → 512), Apple touch, mstile, manifest, browserconfig, pinned SVG, README.

HTML snippet

<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0a0a0a" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#0a0a0a" />

Paste inside <head> on every HTML page.

site.webmanifest preview

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

Where to drop the files

  • Next.js / Nuxt / SvelteKit: put the files under public/.
  • Vite / Astro: put the files under public/ (Vite) or the root public/-equivalent.
  • Hugo: put them in static/.
  • Plain HTML / nginx / Apache: drop everything at the document root so the paths match the /-prefixed snippet above.

About this tool

Generate a complete favicon set from a single image — the multiple sizes and formats modern browsers, phones and platforms expect, plus the HTML link tags to reference them. It saves you from manually exporting a dozen icon variants.

The image is processed in your browser, so your artwork is never uploaded. Download the generated icons and drop them into your site root.

Frequently asked questions

What sizes do I actually need?+

At minimum a 32×32 and 16×16 favicon, a 180×180 Apple touch icon, and a 512×512 for PWAs/manifests. The generator produces the common set so you are covered across devices.

PNG, ICO or SVG?+

Modern browsers accept PNG and SVG favicons; .ico remains useful for legacy support. A small SVG plus PNG fallbacks is a good, future-proof combination.

Is my source image uploaded?+

No. Conversion happens locally in the browser, so your logo or artwork stays on your machine.