The favicon is the smallest piece of branding a website owns — the 16-pixel mark in the browser tab, the bookmark list and the phone's home screen — and it is the one most sites forget until every tab looks identical. This generator builds the complete set in one pass: upload a picture or design a letter mark, and download a zip with every size a modern site needs, plus the exact HTML to wire it up. Everything is drawn on your device; your image never leaves it.
What is in the set, and why
favicon.ico (16, 32 and 48 px in one file) is the original format and still the one browsers look for first at your site's root. The three sizes live inside a single .ico container — the browser picks the closest size for the tab, the bookmark bar or a desktop shortcut. PNG icons at 16 and 32 px serve the modern <link rel="icon"> declarations and crisp high-density displays. The 180 × 180 Apple touch icon is what an iPhone or iPad shows when someone saves your site to their home screen — without it, Apple screenshots your page and shrinks it, which flatters nobody. The zip also carries the snippet as a text file so it survives the trip to your editor.
Image mode: cover-cropping, honestly
Icons are square; photos usually are not. In image mode your picture is cover-cropped: scaled until it fills the square, with the overflow trimmed from the centre — nothing is stretched or squashed, but the edges of a wide photo do not survive, and at 16 pixels, fine detail does not survive either. Logos and marks designed as squares sail through; photographs become impressions. If your source is a detailed logo, the letter mode below — or a simplified version of the logo — will honestly read better in a tab, which is where the icon will spend its life.
Letter mode: the dependable monogram
One or two letters on a coloured rounded square is the favicon style of half the serious web, because it stays legible at 16 px where pictures dissolve. Pick your initial (or two), a background and a letter colour with strong contrast between them, and the generator draws the mark at full size before shrinking it — the same drawing the image mode ends with. The snippet in the box above the download works for either mode: unzip the files into your site's root folder, paste the four lines into your page's <head>, and every browser and phone finds its size.
A technical note on the .ico
The icons inside the .ico are stored as PNG data (PNG-in-ICO) rather than the older BMP-style format. Every current browser, and Windows Vista and later, reads this form; it keeps the file small and preserves transparency exactly. Only genuinely antique software insists on the BMP encoding — if you are generating an icon for a museum-piece application rather than a website, that is the one case this set does not target.
Worked example
Use the sample photo, leave the mode on image, and press Generate: the zip holds favicon.ico plus favicon-16x16.png, favicon-32x32.png, favicon-48x48.png and apple-touch-icon.png — the photo centre-cropped to a square at each size. Then switch to letter mode with the letter “A”, background #2563eb and a white letter, and generate again: the same file set, now holding a blue rounded square with a white A — compare the 16 px versions side by side to see why monograms win in tabs.
How to use this tool
- Choose the mode: upload an image (or use the sample photo), or switch to a letter.
- For a letter icon, type one or two characters and pick background and letter colours with strong contrast.
- Press Generate favicons and download the zip.
- Unzip the files into your website's root folder (where your homepage lives).
- Copy the HTML snippet from the box — it is also inside the zip — into your page's , and reload your site to see the tab icon.
Testing your favicon like a visitor
Browsers cache favicons stubbornly — a hard refresh, a private window, or adding the site to your phone's home screen shows the truth faster than reloading the tab and squinting. Check all three homes the icon lives in: the desktop tab at 16 px (is it recognisable at a glance, next to a dozen other tabs?), the bookmark bar, and the phone home screen at 180 px, where the Apple icon's corners are rounded by the system and a mark that runs to the very edge gets clipped. Design with a margin: marks that occupy the middle 80% of the square survive every crop and rounding a platform applies.