Favicon generator
Drop a logo and get the icon files a site actually asks for, plus the markup that points at them. The logo never leaves your device.
Drop an image here or click to choose
PNG · JPG · WebP — icons are built on your device
This image is not square, so it is centred inside the icon and the two shorter sides are padded. Nothing is cropped away.
iOS paints a transparent apple-touch-icon onto black. If your mark is dark, pick a background colour here rather than shipping a transparent one.
Markup for these files
Put the files in your site root, then add these tags to the head of every page:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
The 192 and 512 pixel files are what a web app manifest asks for. No link tag reaches them, so add them to the manifest icon list instead:
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
From logo to installed icon set
- Choose or drop a PNG, JPG or WebP. Square and at least 512 pixels gives the best result.
- Check the previews at 16, 32, 48 and 180 pixels, and set a background if you need one.
- Generate, download the four files into your site root, and paste the markup.
What each file is for
The set is small because the list of sizes a browser genuinely uses is short. Everything else in the historical favicon zoo has either been replaced by the manifest or was never read by anything.
- favicon.ico — the browser tab, the bookmark bar and the Windows shortcut. Holding 16, 32 and 48 inside one file lets each surface pick the size it wants instead of resampling a single bitmap badly.
- apple-touch-icon.png — 180 pixels, used when someone adds your site to an iOS home screen. iOS rounds the corners itself, so the file stays a plain square.
- icon-192.png and icon-512.png — the two sizes a web app manifest is normally written around: 192 for the Android home screen, 512 for the install prompt and splash screen.
Why a 16 pixel icon needs care
A tab icon is roughly the size of a full stop. Detail that reads well on a website header turns into a smudge there, which is why the preview above draws every size at its real dimensions rather than shrinking one large image in the layout. If the 16 pixel version is unreadable, the fix is a simpler mark — a single letter, a symbol without hairlines — rather than a different generator.
Each size is drawn by halving the source repeatedly until it is close to the target, then making the final step. Going straight from a large logo to 16 pixels in one draw samples too few source pixels and the result reads as noise at exactly the size that matters most.
Frequently asked questions
Which files does it produce?
Four: favicon.ico containing 16, 32 and 48 pixel versions, apple-touch-icon.png at 180 pixels, and icon-192.png and icon-512.png for a web app manifest. Each one downloads separately, so you can take only the ones your site needs.
Do I still need favicon.ico when PNG icons exist?
Browsers will use the PNG you point them at, but a request for /favicon.ico still arrives from bookmark bars, feed readers, link previews and any tool that guesses the default path rather than reading your markup. Keeping the file at the site root answers those without a redirect.
My logo is not square. What happens to it?
It is scaled to fit and centred, and the two shorter sides are padded. Nothing is cropped, because cropping a wordmark quietly removes part of the brand. If the padding looks wrong, crop the image the way you want first and drop the square version here.
Should the apple-touch-icon be transparent?
Usually not. iOS composites a transparent apple-touch-icon onto black, so a dark logo disappears on the home screen. Choose a background colour here if your mark is dark or thin. The ICO and the manifest PNGs keep transparency either way.
Why can I not upload an SVG?
This tool reads the formats the browser can decode as pictures: PNG, JPG and WebP. Convert the vector first with our SVG to PNG tool, at 512 pixels or larger, then bring that PNG back here.
How is favicon.ico built?
ICO is a container. Each size is encoded as a PNG and written into the container with its own directory entry, which is the form Windows has read since Vista and every current browser accepts. Internet Explorer 8 and older expect the older bitmap form and will not read it.
Is my logo uploaded anywhere?
No. The image is decoded, resized and packed into an ICO by your browser. The page, the ads and the fonts make their own network requests, but no request carries your file to a processing server.