Which favicon files a website needs, and the sizes for each
A website needs a small set of icon files, and most of the decisions are about size. Put a favicon.ico with 16, 32 and 48 pixel images at the root of the site for browser tabs and Windows. Add a 180 pixel Apple touch icon for iPhone and iPad home screens, and 192 and 512 pixel PNG icons listed in a web app manifest. The favicon generator makes all of them from one logo and writes the HTML lines to paste into your pages.
Favicon generatorWebsite needs a faviconOpenThe files and their sizes
| File | Size | What it is for |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | Browser tabs and Windows |
| favicon-32x32.png | 32 px | The 32 px icon linked in the HTML |
| favicon-16x16.png | 16 px | Included in the ZIP, not linked in the HTML |
| apple-touch-icon.png | 180 px | iPhone and iPad home screens |
| android-chrome-192x192.png | 192 px | Listed in the manifest |
| android-chrome-512x512.png | 512 px | Listed in the manifest |
| site.webmanifest | Text file | Names the 192 and 512 px icons |
The ZIP that the generator downloads holds all seven files. The favicon.ico file is built from three PNG images, at 16, 32 and 48 pixels, stored inside one file. Each icon is the same logo drawn smaller. The generator works from a 512 pixel version of your image and makes each size from it.
The HTML lines
The generator writes four lines for the head of your pages:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">The first line points to favicon.ico and declares it as 48 by 48. The second gives the 32 pixel PNG. The third names the Apple touch icon, and the fourth points to the manifest, where the 192 and 512 pixel icons are listed. The 16 pixel PNG is in the ZIP but not in these lines. Browsers also look for /favicon.ico on their own, so the file is still found if the first line is missing. Keep the paths as written, unless your files live somewhere else.
Why small sizes need simple shapes
At 16 by 16 pixels an icon has 256 pixels in total. A 48 pixel icon has 2,304, and the 512 pixel source has 262,144. Most of the detail in a logo is gone by the time it reaches 16 pixels, so a thin line or a small word turns into a blur. Use a simple mark, or one or two letters with strong contrast.
The letter option accepts one or two characters and draws them large in the middle of the icon, shrinking them if they are too wide. Its shapes are Square, Rounded and Circle. The preview shows the 16, 32, 48, 180 and 512 pixel results side by side, and light and dark tabs, so you can judge the small sizes before you download. The previews update as you change the shape, padding or background, so you can try each setting first.
Padding, background and the Apple icon
Padding has three settings: No padding, Small and Large. Small leaves 10 per cent of the icon empty on each side, and Large leaves 20 per cent. In image mode, No padding crops the picture to its centre square, so the ends of a wide logo are lost. The padded settings fit the whole picture inside the square instead.
The background choices are Transparent, White and Custom, and Transparent is the default. The Apple touch icon is always opaque. In image mode, its transparent areas take the chosen background, or white when the background is Transparent. In letter mode they take the letter background colour. Transparent areas in an Apple touch icon can show as black on iPhone and iPad, so the generator fills them. A test with a transparent image confirmed this. The 180 pixel icon had opaque white corners, while the 16 and 512 pixel icons kept transparent corners.
A favicon is square, so a wide logo needs a square frame first. The square photo maker fits the whole picture inside a 1:1 frame, with a blurred, white, black or custom border, so nothing is cut off. Resize the image sets exact pixels. With Keep proportions on and both sides filled in, the picture fits inside the box without distortion.
Changes that take time to show
Browsers keep favicons in a cache. A changed file at the same address can keep showing the old icon for some time, so a normal reload is often not enough. Open the icon's address directly to confirm that the new file is on the server, then reload the page with the cache bypassed. If the old icon still shows, give the new file a different name and update the link to point to it.
Edge cases
- Your image stays on your device. The generator makes the icons in your browser, and nothing is uploaded.
- Two-character letters. Two characters are accepted and are drawn smaller so both fit, which makes them harder to read at 16 pixels than a single letter.
- File names. Keep the names the HTML uses, because the links point to them.
- Unreadable files. If an image cannot be turned into icons, the generator shows the message "Could not make the icons from this input. Try another image." and clears the outputs. Try a different file, or save the image again in a common format.
