Favicon Generator
Drop in a logo and get the whole set: a multi-size ICO, Apple and Android icons done the way each platform actually needs them, a manifest, and six lines of HTML. Rendered and zipped in your browser.
Drop your logo here
A square SVG or a PNG of 512px or more gives the best result. Paste with Ctrl + V works too.
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <meta name="apple-mobile-web-app-title" content="My Site" /> <link rel="manifest" href="/site.webmanifest" />
Rounding needs a background to round. Pick a color first.
Android crops adaptive icons to the launcher's shape. Only the middle survives, so 20% is the safe default.
Shown under the icon on a home screen. Twelve characters or fewer.
Every icon is drawn in your browser and zipped there too. Your logo is never uploaded.
Drop your logo
An SVG or a large square PNG. Drag and drop, paste, or browse.
Set the frame
Background, padding, rounding and the Android safe zone, previewed live.
Take the package
One zip with every file, the manifest and the markup to paste.
Questions
- Is my logo uploaded?
- No. Every icon is drawn on a canvas in your browser, and even the zip is assembled there. Nothing is sent to a server and nothing is stored.
- What is in the package?
- A favicon.ico bundling 16, 32 and 48 pixel versions, a 96 pixel PNG for modern browsers, a 180 pixel Apple touch icon, 192 and 512 pixel PNGs for Android and app stores, a 512 pixel maskable icon, a site.webmanifest, the HTML snippet and a short readme. If you upload an SVG, the original comes along as favicon.svg too.
- Why does the Apple icon have a background when I chose transparent?
- Because iOS composites Apple touch icons onto black. A transparent logo would show up as a dark smear on a light home screen, so a transparent choice becomes white for that one file only. Every other icon keeps its transparency.
- What is a maskable icon?
- Android launchers crop icons into their own shape, which might be a circle, a squircle or a rounded square. A maskable icon fills the whole square and keeps the important artwork inside a safe zone in the middle, so nothing meaningful gets cut off whichever shape is applied. Twenty percent padding is the safe default.
- Why is the HTML snippet so short?
- Because most of what generators emit has been unnecessary for years. Modern browsers read the PNG and SVG links, iOS reads apple-touch-icon, and favicon.ico is found at the site root even without a tag. Six lines covers everything still in use.
- What size should my logo be?
- A square SVG is ideal, since it stays sharp at every size. Failing that, a PNG of at least 512 by 512 pixels. Whatever you bring, check the actual-size preview: if the mark is unreadable at 16 pixels, simplify it to one shape or one letter.