Favicon Lab: Favicon and app icon generator
NewTurn one image into a full favicon and app-icon set, with the manifest and HTML snippet ready to paste.
Drop your image here
PNG, JPG, WebP, or SVG with a fixed size. A square source at 512 px or larger gives the best result.
Web app manifest
Used behind the Apple touch icon, the maskable icon, and the Windows tile, which cannot be transparent.
Every icon a modern site asks for
Browsers, iOS, Android, and Windows each want a different size and shape. One upload produces all of them plus the markup that ties them together.
Real favicon.ico
A multi-resolution ICO containing 16, 32, and 48 px images, assembled in your browser — not a renamed PNG.
Apple touch icon
A 180 px icon on an opaque background, because iOS renders transparency as black.
Android and maskable
192 and 512 px icons plus a maskable variant so Android can crop to any device shape without clipping your mark.
Web app manifest
A site.webmanifest with your app name, theme color, background color, and icon entries already filled in.
Paste-ready HTML
The link and meta tags for the whole set, in the order browsers expect them.
Real-size check
See the 16 px version at 16 px before you ship it, where fine detail in a logo usually disappears.
Questions about favicons
Do I still need favicon.ico?
Yes, keep it. Browsers request /favicon.ico from the site root even when no link tag points at it, and some feed readers and crawlers only look for that file. Modern browsers will prefer the PNG entries.
Is Favicon Lab free, and does it work offline?
Yes. Favicon Lab is free, with no account, no sign-up, and no usage limit. It runs entirely in your browser, so once you have opened the page while online, it keeps working without a connection.
What source image works best?
A square image at 512 px or more, with a transparent background and a simple mark. Detail that reads at 512 px usually turns to mud at 16 px, so consider a simplified version of your logo.
Why is the Apple touch icon not transparent?
iOS composites transparent areas onto black, which looks broken. This Lab fills those icons with your chosen background color instead, so they match your brand on the home screen.
What is a maskable icon?
Android crops app icons to a device-specific shape — circle, squircle, or rounded square. A maskable icon has padding around the mark so nothing important is cut off in any of those shapes.
Where do the files go?
In your site's public root, next to index.html, so /favicon.ico and /site.webmanifest resolve. Then paste the HTML snippet into the head of your pages.
My favicon did not change. Why?
Favicons are cached hard, by browsers and by tabs already open. Hard refresh, or open the icon URL directly to confirm the new file is being served.
Where to go next
The Labs people most often reach for straight after this one.