Index / Media
Favicon Set Generator
One square image in, the whole annoying set out: six PNGs, a
multi-size favicon.ico, a web app manifest and the
<link> block to paste into your head. Packed into a
zip your browser writes itself.
The image does not leave your browser.
Every icon, the ICO and the zip are built in this tab. The page has no
network code, and the site's content security policy sets
connect-src 'none', so it could not upload anything even if
it tried.
Source image
Drop a square image here, or choose a file.
Settings
Goes in the manifest. Shown when someone installs
the site to a home screen.
Twelve characters or so. Used under the icon,
where the full name will not fit.
Painted behind transparency where transparency
is not allowed.
The browser toolbar tint on Android.
Padding keeps everything and adds bars. Cropping
fills the square and cuts the long edges off.
The apple-touch-icon and the maskable icon always
get the background colour, because neither iOS nor Android honours
transparency there.
Waiting for an image
--
Files
--
Largest icon
--
Icons
Paste into <head>
head-snippet.html--
Manifest
site.webmanifest--
The choices this makes, and why
Sizes: 16, 32, 48, 180, 192, 512. 16 and 32 are the tab and the
bookmark bar, 48 is the Windows shortcut, 180 is
The ICO holds PNGs, not bitmaps. An icon directory whose entries are whole PNG files is the Vista-and-later format; every browser and shell still in use reads it, and it is a quarter the size of the uncompressed BMP form that Windows XP needed.
The zip is stored, not deflated. Every file in it is already compressed, so deflating again would save nothing and cost a compressor this page would otherwise not contain. Any unzip tool reads it.
Downscaling halves repeatedly. One 512 to 16 draw samples a handful of source pixels per output pixel and comes out speckled. Halving averages the whole area at each step, which is what makes a 16 pixel icon legible.
The maskable icon is inset to 80%. Android crops a maskable icon to whatever shape the launcher uses, and only the middle 80% is guaranteed to survive, so the artwork is scaled to fit inside that circle on the background colour.
The paths in the manifest and the link block assume the files sit at your site root. Sizes use 1 KB = 1,024 bytes.
apple-touch-icon, and 192 and 512 are what a web app
manifest is required to offer.
The ICO holds PNGs, not bitmaps. An icon directory whose entries are whole PNG files is the Vista-and-later format; every browser and shell still in use reads it, and it is a quarter the size of the uncompressed BMP form that Windows XP needed.
The zip is stored, not deflated. Every file in it is already compressed, so deflating again would save nothing and cost a compressor this page would otherwise not contain. Any unzip tool reads it.
Downscaling halves repeatedly. One 512 to 16 draw samples a handful of source pixels per output pixel and comes out speckled. Halving averages the whole area at each step, which is what makes a 16 pixel icon legible.
The maskable icon is inset to 80%. Android crops a maskable icon to whatever shape the launcher uses, and only the middle 80% is guaranteed to survive, so the artwork is scaled to fit inside that circle on the background colour.
The paths in the manifest and the link block assume the files sit at your site root. Sizes use 1 KB = 1,024 bytes.