A finished logo eventually meets a developer who asks for the favicon and the app icons. The list used to run to twenty files. It is much shorter now, but the sizes that remain are precise, two of them need artwork prepared differently, and one file format Illustrator cannot write at all. This article gives the sizes that matter in 2026, how to prepare a mark so it survives 16 pixels, how to export every size with Export for Screens, how to build the .ico, and the tags to hand over with the files.
The sizes that matter in 2026
Browsers and operating systems have converged on a small set.
favicon.ico still matters. It is one file containing three bitmaps, 16, 32 and 48 px, and it is the fallback every browser understands. Browsers request /favicon.ico from the site root even when no tag points to it.
An SVG favicon is the modern tab icon. It scales to any size, weighs a few hundred bytes, and can carry a media query so it flips colour in dark mode. Chromium browsers and Firefox have used it for years; Safari joined with version 26 in 2025, so older Safari versions still fall back to the ICO.
A 32 px PNG covers browsers that take neither of the above and costs nothing to ship.
apple-touch-icon.png at 180 x 180 is what iOS and iPadOS put on the home screen and in Safari bookmarks. One size is enough; the older 57 to 152 px set is legacy.
192 and 512 px PNGs are declared in the web app manifest. Android and Chrome use 192 for the home screen and 512 for the install prompt and splash screen.
A maskable 512 px PNG is the same icon prepared full bleed, for launchers that crop icons to a circle, a squircle or a rounded square.
Windows tiles, the browserconfig.xml file and the msapplication meta tags are legacy: current Edge uses the standard favicon. Safari's monochrome mask-icon for pinned tabs is optional and rarely requested now.
| File | Size (px) | Format | Used by |
|---|---|---|---|
| favicon.ico | 16, 32, 48 in one file | ICO | Tabs, bookmarks, older browsers, Windows shortcuts |
| icon.svg | Any, square viewBox | SVG | Tabs in current browsers, dark mode aware |
| favicon-32.png | 32 x 32 | PNG | Tab fallback where SVG is not read |
| apple-touch-icon.png | 180 x 180 | PNG, opaque | iOS and iPadOS home screen, Safari bookmarks |
| icon-192.png | 192 x 192 | PNG | Android home screen, PWA install |
| icon-512.png | 512 x 512 | PNG | PWA splash screen and install prompt |
| icon-maskable-512.png | 512 x 512 | PNG, full bleed | Android adaptive icons, cropped to a shape |
Prepare the artwork
Start from a square, pixel based document
Create a new document with the Web profile, or set it yourself: RGB colour, pixels as units, 72 ppi for raster effects. Add a 512 x 512 px artboard named icon and, if the mark has fine detail, a second 16 x 16 px artboard for a hand-tuned small version. Select the Artboard tool (Shift+O) and check in the Properties panel that X, Y, W and H are whole numbers. A half-pixel artboard produces a soft edge on every export.
Simplify the mark
A favicon is the logomark, never the full logo. Drop the wordmark, thicken thin strokes, open up small counters, remove any detail that vanishes at 16 px. A 16 px icon has 256 pixels to work with. Check it with View > Pixel Preview (Cmd+Opt+Y, Ctrl+Alt+Y on Windows) at 800 percent, which shows the rasterised result rather than the vector.
Respect the safe area for maskable icons
For the maskable 512, fill the entire artboard with the background colour, because the launcher decides the outer shape and any transparent corner would show as a hole. Keep the mark inside a centred circle whose radius is 40 percent of the icon width: for 512 px, a circle about 410 px across. The outer ten percent on each side may be cropped. Draw that circle with the Ellipse tool (L), centre it on the artboard with Window > Align set to Align to Artboard, then convert it to a guide with View > Guides > Make Guides (Cmd+5, Ctrl+5 on Windows). Keep the maskable icon as its own artboard rather than reusing the transparent one, because the padding is different.
For the apple-touch-icon, use an opaque background and square corners. iOS applies the rounded mask itself and does not honour transparency, so a pre-rounded or transparent icon comes out with dark corners.
Snap to the pixel grid
Turn on View > Snap to Pixel before drawing, so straight edges land on whole pixels. For existing art, select it and choose Object > Make Pixel Perfect, or tick Align to Pixel Grid in the Transform panel. Curves cannot be pixel perfect, but the outer edges of a mark can, and that is where blur shows.
Export with Export for Screens
File > Export > Export for Screens (Cmd+Opt+E, Ctrl+Alt+E on Windows) exports artboards to several sizes and formats in one run.
- In the Artboards tab, select the icon artboard, or a range.
- Set Export to your delivery folder and untick Create Sub-folders, or the files land in one folder per scale.
- In Formats, set the first row to PNG with Scale set to Width, 32 px, and the suffix -32. Click Add Scale for each further size: Width 180 with suffix -180, Width 192 with -192, and 1x with -512 for the master. Add a final row with Format set to SVG at 1x.
- Click the gear icon. Under PNG, set Anti-aliasing to Art Optimized (Supersampling). Under SVG, tick Minify.
- Click Export Artboard.
Rename icon-180.png to apple-touch-icon.png and icon-32.png to favicon-32.png, or name a duplicate artboard apple-touch-icon and export it at Width 180 so the file name is right from the start. Do the same with the artboard named icon-maskable, exported at 1x and at Width 192.
The Scale dropdown accepts Width, Height or Resolution as well as multipliers, and the suffix is appended to the artboard name, so a single 512 artboard produces every PNG size in one pass. If the mark still looks muddy at 16 or 32, export those two from the hand-tuned artboard instead.
The Asset Export panel
Window > Asset Export does the same job for objects rather than artboards. Drag the mark into the panel (Option-drag, or Alt-drag on Windows, to collect several objects as one asset), add the same scale and suffix rows, and click Export. It suits a mark that lives inside a larger document, but the export uses the asset's own bounds, so a mark that is not square produces a file that is not square. Artboards give you the square canvas and the padding, which is why they are the better route for icons.
Make the .ico
Illustrator cannot write ICO files, and neither can Export for Screens. Export 16, 32 and 48 px PNGs from the icon artboard, then combine them:
- With ImageMagick installed, one command does it:
magick icon-16.png icon-32.png icon-48.png favicon.ico. - GIMP exports .ico directly through File > Export As and lets you pick which layer becomes which size.
- Online favicon generators accept the PNGs and return the .ico.
- Many build pipelines generate the .ico from a source PNG or SVG, in which case the developer only needs your 512 and your SVG.
Deliver the three PNGs alongside the .ico either way, so it can be rebuilt without your source file.
The tags to hand to the developer
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
And the manifest:
{
"name": "Brand name",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}
To make the SVG favicon follow the system theme, add a style block inside the SVG file:
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
Questions
Do I still need a 16 x 16 favicon?
Yes, inside the .ico. Browser tabs and bookmark lists on standard density screens still draw at 16 px, and a downscaled 32 looks softer than a bitmap drawn for 16. Put 16, 32 and 48 in the .ico, ship the SVG for browsers that read it, and the 16 stays in use where it matters.
What size should the apple-touch-icon be?
180 x 180 px, opaque, with square corners. iOS rounds the corners itself and ignores transparency, so a mark on a transparent background comes out on a dark tile. One file covers current iPhones and iPads; the older 57, 72, 114, 120 and 152 px sizes are legacy and can be skipped.
Can Illustrator export .ico files?
No. Neither Save As, Export As nor Export for Screens offers ICO. Export the 16, 32 and 48 px PNGs from Illustrator and combine them with ImageMagick, GIMP, an online converter or the developer's build tool. Deliver the PNGs with the .ico so it can be rebuilt later without going back to the source file.
Should the favicon be the full logo or just the mark?
The mark. A wordmark at 16 px is a smear, and an app icon is judged next to dozens of other marks with no name under them. Use the logomark, or a single letter if the brand has no mark, and give it a solid background for the touch and maskable icons so it reads as a tile rather than a floating shape.
One click for the logo files, not the icons
Anchr Ship, the export tab of the Anchr Tools panel, is built for the logo package rather than the icon set. It binds three artboards, logomark, logotype and full logo, generates black and white flat variants as new artboards, and exports every artboard as SVG, PNG at 2x with transparency and PDF into one folder in a single pass, up to 27 files named from the artboard names. It does not produce favicon or app icon sizes. For the sizes in the table above, use Export for Screens as described; Ship covers the SVG, PNG and PDF logo files that go into the same delivery. Both plans include all five tools, with a 7 day trial; see pricing.