Favicon Generator

Generate a complete favicon bundle from text or an uploaded image — every size, manifest, and the HTML snippet.

16
32
Source
Initials
Corner radius
Background
Foreground
Site name (for manifest)
HTML snippet
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a0a0a">

01 — Overview

How the Favicon Generator works

Type initials with a background color, or upload an image. Get back a zip with all the favicon sizes modern browsers and OSes ask for (16, 32, 48, 180 for iOS, 192/512 for Android, plus manifest.webmanifest) and the HTML <link> snippet to paste into your <head>.

02 — Use cases

When to use the Favicon Generator

  1. 01

    Ship a sensible favicon for a side project in 30 seconds

  2. 02

    Replace a default Next.js favicon with branded initials

  3. 03

    Generate the full bundle of icons a modern PWA needs

  4. 04

    Get the matching <link> snippet without remembering all six tag names

03 — Examples

Favicon Generator examples

Text: GN, dark background, green letters

ex 01

favicon.ico + 6 PNGs + manifest.webmanifest + HTML snippet

Initials favicon with a coherent set of sizes.

Upload a 512×512 PNG logo

ex 02

favicon.ico + 16/32/48/180/192/512 PNGs + manifest.webmanifest + <link> snippet

Every size a current browser or OS asks for, from one source image.

Text: AP, light background, dark letters

ex 03

Initials favicon rendered at all sizes, with the 16×16 checked for legibility

The two-letter route, for projects without a logo yet.

Emoji source: ⚡

ex 04

Rasterized emoji favicon at each required size

Quick and distinctive for a side project — renders identically everywhere, unlike an inline SVG emoji.

04 — FAQ

Favicon — frequently asked questions

Why do I need so many sizes?

Different browsers, OSes, and PWA install flows look for different sizes. Shipping the full set avoids low-res rendering on retina/install screens.

Is .ico still needed?

Yes — legacy IE/Edge and some crawlers still request /favicon.ico. The bundle includes one alongside the modern PNGs.

Where does the manifest.webmanifest go?

At the root of your site, next to the favicons. The generated HTML snippet links it. It enables 'install to home screen' on supported devices.

What should the source image be?

A square PNG or SVG at 512×512 or larger. Anything smaller gets upscaled for the Android and PWA sizes and looks soft. Favicons are rendered at 16×16 more often than any other size, so test that one first — fine detail and thin strokes vanish completely.

Why hasn't my favicon updated?

Browsers cache favicons far more aggressively than other assets, and a normal hard reload often doesn't clear them. The reliable fix is to change the filename — favicon-v2.ico — or add a query string to the link tag, so the browser treats it as a new resource.

Do I still need apple-touch-icon?

Yes, if you care how the site looks when someone adds it to an iOS home screen. iOS uses a 180×180 PNG and ignores the manifest icons for that particular case. It's included in the generated bundle along with the matching link tag.

05 — Reference

Specs and further reading

The primary sources this tool follows. Where behaviour is defined by a specification, we link the specification rather than a summary of it.

  • Link types: icon

    WHATWG — The normative definition of rel=icon, including sizes and type attributes.

  • Web Application Manifest

    W3C — How the icons array is consumed for installed and home-screen contexts.

  • <link>

    MDN Web Docs — Practical reference for the markup this tool emits.

07 — More

Tools that pair with Favicon

Placeholder Image Generator

Generate sized placeholder images — pick width, height, background, foreground, and label. Copy as SVG/PNG or a static URL.

Media/placeholder

Avatar Generator

Generate deterministic avatars from a seed string. Initials, geometric, or identicon styles. SVG output, downloadable.

Identity/avatar

QR Code Generator

Turn text, URLs, WiFi credentials, or vCard info into a QR code. Download as SVG or PNG, customize color and error correction.

Media/qr-code

Last updated .