Turn one logo into every icon a browser, phone or install prompt asks for.
One 32-pixel icon is not enough any more: browsers, phones and install prompts each ask for a different size and format.
The tab icon, the bookmark bar, the shortcut on an Android home screen and the icon iOS keeps when someone adds your site to their phone are four different files. This tool builds all of them from one upload, each at the exact size its platform expects.
Every icon is drawn down from one large square image, so the 16-pixel version stays crisp instead of turning into a smudge. Nothing is upscaled, so no icon is invented out of too few pixels.
The pack also brings the link tags for the head of your document and a web manifest, so you paste one snippet instead of hunting down six filenames and their attributes.
Three steps, one download, no design software.
Drop a square PNG or an SVG on the box, click it to browse, or paste straight from the clipboard with Ctrl+V (Cmd+V on a Mac). Files up to 25 MB are fine, and an SVG stays a vector inside the pack.
Add padding if the artwork reaches the very edge of the square, choose a background when a transparent icon would disappear on a dark tab bar, set the theme colour that mobile browsers paint around the icon, and type your site name so the manifest reads nicely.
One click saves a ZIP with every file listed below. Unzip it into the root of your site — the folder that holds index.html — and paste the snippet from snippet.html into the head of your pages. The paths in that snippet match the file names, so nothing needs editing.
The archive is flat: every file sits at the top level, exactly where the snippet expects it.
The classic icon file, holding 16, 32 and 48 pixel images in one container. Older browsers, feed readers and shortcuts still look for favicon.ico at the root of a site before asking for anything else.
The two sizes browser tabs, bookmarks and pinned tabs use. Given a choice, modern browsers prefer these over the .ico, because a PNG keeps transparency and colour far better at small sizes.
A flat 180 pixel icon for iOS and iPadOS home screens; the rounded corners are added by the system. It is always opaque — transparent areas are filled with your background colour, or white when none was chosen, because those devices paint transparency black.
The two sizes listed in the web manifest, used for home-screen shortcuts and the installable app prompt. The 512 pixel file is also the one app stores ask for when they want a large icon.
Included only when you upload an SVG: the same artwork as a vector, so a browser on a high-density screen can draw it without resampling. A raster upload does not get this file — tracing a vector out of pixels would only make the icon softer.
The manifest carries the site name, the theme and background colours and the icon list that phones read when your site is installed. snippet.html carries the link tags and the theme-color meta tag, ready to paste. Keep both file names as they are, or edit the markup to match.
Small icons forgive very little, so the file you start from decides almost everything.
A vector, or a PNG of at least 512 × 512 pixels, has enough detail for every size in the pack, and a square source is used as drawn instead of being fitted into the canvas with empty bands on two sides. A smaller image still works, but the bigger icons will look soft.
An icon that touches all four edges looks crowded next to other tabs. A few percent of padding, up to 30, adds breathing room on a transparent canvas, and the same amount is applied to every size, so the pack stays consistent.
Sixteen pixels hold a silhouette, not thin lines, lettering or fine gradients. A bold mark in one or two colours survives the smallest size; if your logo puts a word under the symbol, upload a version without it and the tab icon will read much better.
A favicon.ico holding 16, 32 and 48 pixel images, the favicon-16x16.png and favicon-32x32.png pair, a 180 pixel apple-touch-icon.png, the 192 and 512 pixel Android icons, site.webmanifest, and snippet.html with the link tags. Upload an SVG and favicon.svg is added as well, because that is the one format that can stay a vector.
Into the root folder of your site, the same place as index.html, without any subfolder. The link tags in snippet.html point at /favicon.ico, /favicon-32x32.png and the rest, so moving a file into an images folder means editing the snippet too. Once the files are in place, paste the snippet into the head section of every page, or into the shared template if your site has one.
Yes, and it is the best starting point: the icon keeps sharp edges at every size, and the pack includes favicon.svg so browsers on high-density screens can use the vector directly. The script elements and outside references of the upload are removed before anything is rendered, so only the drawing itself ends up in the icon.
At least 512 pixels on both sides, and ideally 1024. The largest icon in the pack is 512 pixels, so a source of that size or bigger can be downscaled without loss. A square image works best; a wide or tall one is fitted into a square with transparent space around it, which makes the visible icon smaller. Anything under 192 pixels is accepted but the large icons will look soft.
Files are processed on our server and not stored.
