Favicon Generator
Private: the icons are drawn on your device, never uploaded
Drop an image in to start. Every size is generated here in your browser.
Drop one logo in and get the whole set back: a real favicon.ico holding the 16, 32 and 48 pixel images, the two PNG sizes browsers ask for, the Apple touch icon, both Android sizes and a site.webmanifest, all in one ZIP. The small sizes are shown at their true pixel size, because the only question that matters is whether your mark still reads at sixteen pixels.
About this favicon generator
A favicon used to be one 16 pixel image. Now a site is pinned to a Windows taskbar, saved to an iPhone home screen, installed as an Android app and shown in a browser tab on a retina screen, and each of those wants a different file at a different size with a different name. The list has been stable for years, which is exactly why generating it by hand is a waste of an afternoon.
This page draws your image onto a canvas at each size and encodes a PNG, then packs the lot into a ZIP with a real favicon.ico and a site.webmanifest. The ICO is a container, not an image format: it holds a small directory followed by the picture data, and every browser since Internet Explorer 11 accepts PNG data inside it, so that is what goes in. The 16, 32 and 48 pixel images all live in the one file, and whichever one the operating system needs is the one it reads out.
Two choices are yours. A transparent logo looks right in a browser tab but can vanish against a dark taskbar, so you can fill the transparent area with a solid colour. And a logo drawn edge to edge looks cramped next to icons that were designed with breathing room, so you can inset it by a percentage. Both are off by default, because the honest default is to leave your image alone.
If your image is not square it is centred on a square canvas with empty space on the short sides, and the page says so. Squashing a wordmark into a square is the one thing a favicon tool must not do quietly. If you would rather choose what gets left out than have it centred, crop it square first and bring the result back here.
How to make a favicon from a logo
- Drop your logo on the box, click it to browse, or paste an image onto the page. A square PNG at 512 pixels or more gives the cleanest result.
- Look at the 16 and 32 pixel previews first. They sit next to each other on purpose. If your mark is unreadable there, simplify it before you go any further.
- Type your site name. It goes into site.webmanifest, which is the name Android shows under the home screen icon.
- Tick Fill the transparent area if your logo disappears on a dark background, and pick the colour.
- Add a little padding if your logo runs right to the edge. Five to ten percent is usually enough.
- Press Download ZIP, unzip it into the root folder of your site, and paste the HTML snippet into the
<head>of every page.
Common questions about favicons
What size should a favicon be?
Do I still need a favicon.ico file?
/favicon.ico from the root of a site without being told to, and a site without one serves a 404 to every one of those requests. The ICO here holds the 16, 32 and 48 pixel images together, so a single file covers the browser tab and the Windows pin.
Why is my logo unreadable at 16 pixels?
Where do the files go on my site?
/favicon.ico, /apple-touch-icon.png and so on, then paste the snippet into the <head>. The root matters: Apple and several crawlers look for the touch icon at a fixed path whether or not you linked it. If your site lives in a subfolder, edit the paths in the snippet and in site.webmanifest to match.
My favicon has not changed in the browser. Why?
yoursite.com/favicon.ico, and reload that, or add a version to the link such as favicon-32x32.png?v=2. Checking in a private window tells you quickly whether the new file is live and your own browser is simply holding on to the old one.
Does my logo get uploaded to generate the icons?
Next