Favicon Generator
Drop in an image, or draw one from a letter, and get every favicon a site needs: seven PNGs from 16 to 512 pixels, a real favicon.ico holding the 16, 32 and 48 pixel frames, and the link tags to paste into your head. The ICO container and the download-all ZIP are assembled byte by byte inside this tab, which is why nothing has to be uploaded and there is no size limit on what you start from.
Start from an image
· drop one here · or paste a screenshot
Drop in a PNG, JPEG, WebP, GIF or SVG. It is drawn and resized in this tab, so the file never leaves the browser and there is no size limit.
No image chosen yet
Every size
Each file is rendered here in the page. Download the ones you need, or take the whole set as a ZIP.
The markup
Put the files in your site root, then paste these lines into the <head> of every page.
Common questions
- Which favicon sizes does a website actually need?
- Three carry most of the weight: a favicon.ico at the site root, which is what a browser fetches by default when no link tag points elsewhere; a 180 pixel apple-touch-icon for the iOS home screen; and a 512 pixel PNG for the web app manifest. The 16, 32, 48 and 64 pixel PNGs cover browser tabs and desktop shortcuts at ordinary and high pixel densities, and 192 is the size Android reads from the manifest. This tool renders all seven every time, so the choice is which ones you copy across rather than which ones you go back and make.
- What is the difference between an ICO file and a PNG favicon?
- A PNG is one image at one size. An ICO is a container: a small directory followed by several images, so a single favicon.ico can hold the 16, 32 and 48 pixel versions and let the browser take whichever it wants. An ICO entry is allowed to hold a PNG verbatim rather than a bitmap, and that is what this tool writes: the browser encodes the three PNGs, and the page assembles the directory, the byte lengths and the offsets around them.
- What is apple-touch-icon.png for?
- iOS and iPadOS ignore the favicon when someone adds a site to the home screen and look for an apple-touch-icon instead, at 180 by 180 pixels. Transparency is not preserved there, so if you are exporting a transparent PNG give this one a solid background colour in the Background control before you download it.
- Where do the favicon files go on my site?
- In the site root, so they sit at /favicon.ico, /apple-touch-icon.png and so on, and then the link tags from the markup block go in the head of every page. favicon.ico is the one file a browser will find without being told, because it asks for /favicon.ico by habit. The manifest block below the markup gives you a site.webmanifest that points at the 192 and 512 pixel icons; it takes your site name and escapes it, so a name with an apostrophe or a quote in it stays valid JSON.
- Is my image uploaded anywhere?
- No. The file is read into an object URL, drawn onto a canvas in this browser tab and resized there, and the ICO and ZIP are built from those bytes in the same tab. Nothing is sent anywhere, there is no account, and because no server is paying for the resize there is no file size limit either.
- Can I make a favicon without having an image?
- Yes. Switch the Source control to Letter and type one or two characters: pick the Background colour, the letter colour, a square, rounded or circular plate and one of three typefaces. Up to three characters are drawn, and an emoji or an accented letter counts as one. The preview shows the result on a light tab and a dark tab at actual size, and the tool tells you when the letter and the plate are too close in tone to read at 16 pixels.
- What is in the ZIP, and why is it not compressed?
- Nine files: the seven PNGs, favicon.ico and site.webmanifest. Every entry is stored rather than deflated, because PNG data is already compressed and running it through DEFLATE a second time usually makes the archive slightly larger while making the code in the page considerably longer. Unzip it with anything: it is an ordinary ZIP, with a CRC-32 per entry and a central directory at the end.
The ICO is assembled byte by byte in the page and contains 16, 32 and 48 pixel PNG frames; the other sizes are plain PNGs. Resizing uses the browser's own scaler, so a detailed image will look better if you start from a square at 512 pixels or larger.