How to Generate a Complete Favicon Set From One Logo

Drop one image into the favicon generator and it comes back with seven files: a multi-size .ico, five standalone PNGs from 16 to 512 pixels, and a site.webmanifest - plus the exact HTML block to paste into your page's <head>. Two actions get you there: choose the image, click Run.

Step 1 - choose your source image

JPG, PNG, WebP, GIF, or BMP, up to 25 MB. A square image with a transparent background works best, but neither is required - a non-square photo or logo gets cover-fit and center-cropped to a square for every size, never stretched or distorted, so an off-ratio logo still comes out looking correct rather than squashed.

What happens to a non-square logo

Every size is a cover-fit, center-cropped square, whatever the source's actual proportions are - a wide horizontal logo or a tall vertical one gets scaled up until it fills the square and centered, with the overflow trimmed evenly from the edges, never squashed to force it into a square shape. That's a real, deliberate choice worth knowing before you start: a logo that relies heavily on wide empty space around a small central mark can end up more tightly cropped than expected, since the crop is centered on the whole image, not on whatever the visually important part happens to be. A roughly square source with its subject already centered gives the most predictable result across all six sizes.

Step 2 - pick a background color

One field: a background color for the icon slots that can't stay transparent. This matters specifically for the Apple touch icon (the 180-pixel size iOS uses for a home-screen shortcut) - iOS renders transparent pixels as solid black rather than leaving them see-through, so that one slot always gets composited onto a solid color, white by default, whatever you set here if you want to match your brand instead. Every other size in the set keeps the source's own transparency if it has any.

Step 3 - run it and check the count

Click Run and the browser builds all six target sizes from your source, packs the three smallest (16, 32, and 48 pixels) into one real multi-image .ico file, and zips everything together with the manifest. The success message names exactly how many files are in the zip - it's read directly off the archive after it's built, not a number typed in ahead of time, so it can't drift out of sync with what's actually inside.

Step 4 - download and paste

The zip contains favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, and site.webmanifest - seven files, all named to match what browsers expect to find when they look for a favicon at your site's root. Unzip them into your site's root folder (or wherever your <head> links point), then copy the HTML snippet shown on the page - five ready-written <link> tags, in the right order, with the right sizes and rel attributes already filled in - and paste it into your page's <head>.

What's actually inside the .ico file

The three smallest sizes - 16, 32, and 48 pixels - go into one favicon.ico as a genuine multi-frame container, not three separate icons pretending to be one file. Every browser since Internet Explorer 11 and Windows Vista can read this modern PNG-in-ICO variant, so there's no need for the older, more limited bitmap encoding some very old tooling still defaults to. Building it doesn't need a library - a real .ico is a documented binary format, just a short header followed by each frame's own PNG bytes back to back, which is exactly what gets assembled here.

If something goes wrong

An unsupported file type gets a plain message naming the formats that do work, rather than a generic failure. A file over 25 MB gets stopped with the actual limit stated, not silently truncated or ignored. If the zip itself fails to build - a rare browser-level issue rather than anything about your image - the message says to try again rather than showing a raw technical error. None of these cases lose your place: the source image stays selected, so a retry after fixing the actual problem doesn't mean starting from scratch.

Updating the set later

There's no state to reset or clear between runs - choosing a new source image after your first attempt simply replaces it, and clicking Run again produces a fresh zip from the new file with whatever matte color is currently set. If you update your logo down the line, regenerating the whole set from the new file and re-uploading all seven is simpler and less error-prone than trying to patch just the sizes that changed, since every size is derived from the same source and there's no reason for them to drift out of sync with each other.

If your source has no visible pixels

A badly exported, fully transparent PNG still produces a full set - the browser tab and Android icons stay transparent as they should, but the Apple touch icon slot still needs something visible for iOS, so it composites onto the matte color regardless. A note in the success message flags this specific case, so you know to check the source file rather than assuming the tool failed.

Everything above happens on your device. The image is decoded, resized, packed into the .ico container, and zipped without a single network request - worth knowing if the logo you're uploading is for something not public yet.