FaviconPouch

Favicon generator & icon tools

Favicon generator · runs in your browser

Every favicon file, packed in one pouch

Drop a logo, type a letter or pick an emoji. Get favicon.ico, an SVG that can switch for dark mode, the Apple touch icon, manifest icons and the HTML to paste. Nothing is uploaded.

1Source

Drag to move, pinch or press + / − to zoom. Drop or paste a new image anywhere on the square.

Sample logo (SVG)

PNG, JPEG, WebP, GIF, AVIF, SVG or ICO. Drop it on the square, or paste it.

100%

2Style

0%
Background
Shape

Home-screen icons cannot be transparent, so this fills behind them while the background above is transparent.

Name, colours & folder

For SVG, text and emoji sources: swap colours when the browser is in dark mode.

    3Preview

    Light tabs1× · 2×

    Dark tabs1× · 2×

    Real pixelszoomed

    16 × 16
    32 × 32
    48 × 48

    Home screeniOS · Android

    Your favicon pouch

    The modern minimal set: six image files, a manifest and four lines of HTML cover every current browser, iOS and Android. No 30-size legacy bundle needed.

    Includes the HTML snippet as favicon-snippet.html.

    Paste into <head>

    <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">
<meta name="theme-color" content="#ffffff">

    site.webmanifest

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

    Why only these files? Browsers ask for /favicon.ico and the icon links; iOS reads apple-touch-icon.png (180 px is the only size current devices use); Android and installed web apps read the 192 and 512 px icons from the manifest. The old 57, 72, 114 and 144 px Apple sizes, Windows tile tags and browserconfig.xml are no longer needed. Upload the files to your site's root (or the folder you set) and paste the HTML.

    More icon tools

    Questions

    Which favicon files does a site actually need?

    Four things cover current browsers and phones: favicon.ico (16, 32 and 48 px in one file), favicon.svg if your logo is vector, a 180 × 180 apple-touch-icon.png, and a web manifest listing 192 and 512 px PNGs (plus a maskable one for Android). Sets of thirty sizes date from old iOS versions and Windows tiles.

    Is my image uploaded anywhere?

    No. Your image, letters or emoji are drawn and encoded by your browser in this tab, and the ZIP is built there too. The site counts page views with Cloudflare Web Analytics, which uses no cookies and never receives anything you drop or type into the tools.

    Why does favicon.ico contain PNG images?

    Each size inside the .ico is stored as a compressed PNG, which every current browser and Windows since Vista reads, and which is much smaller than the old bitmap format. If an older program needs bitmap entries, the ICO converter can write those.

    What does the dark-mode option do?

    It adds a small prefers-color-scheme: dark style inside favicon.svg that swaps the colours you choose, so a dark logo stays visible on a dark tab bar. Browsers that use SVG favicons and support media queries in them, such as Chrome, Edge and Firefox, switch automatically; the PNG and ICO files keep the light colours.

    Why does the maskable icon look smaller?

    Android crops maskable icons to a circle, squircle or other shape, and only the central circle (80% of the width) is always visible. The generator measures where your artwork's visible pixels are and scales it so none of it is cut off, filling the rest with the background colour.

    My 16 px icon looks blurry. What can I do?

    Detailed logos turn to mush at 16 × 16 pixels. Zoom into the mark, drop thin lines and small text, and use little or no padding. The zoomed pixel preview shows exactly what the browser will draw; a single letter or a simple shape usually reads best.