Favicon and Touch Icon Design
Favicon is not one file but a set of artifacts for different platforms and use scenarios. Correct set covers browser tabs, bookmarks, PWA icons, home screen shortcut on iOS/Android, Windows tile, OG preview.
Complete icon set
| File | Size | Purpose |
|---|---|---|
favicon.ico |
16×16, 32×32 (multi-size) | Browsers, backward compatibility |
favicon-16x16.png |
16×16 | Chrome, address bar |
favicon-32x32.png |
32×32 | Safari, Retina |
apple-touch-icon.png |
180×180 | iOS "add to screen" |
android-chrome-192x192.png |
192×192 | Android Chrome |
android-chrome-512x512.png |
512×512 | PWA splash screen |
mstile-150x150.png |
150×150 | Windows tile |
safari-pinned-tab.svg |
SVG | Safari Pinned Tab |
Generation and configuration
All files conveniently generated from single 512×512 SVG source via realfavicongenerator.net or CLI tool favicons (npm):
const favicons = require('favicons');
const response = await favicons('./src/logo.svg', {
appName: 'My App',
background: '#ffffff',
theme_color: '#2563eb',
icons: { android: true, appleIcon: true, favicons: true }
});
manifest.json for PWA should reference 192 and 512 icons:
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
Attribute "purpose": "maskable" needed for Android Adaptive Icons: icon designed with "safe zone" 80% of size (40px margin on all sides for 512×512).
Requirements for source
Logo must be readable at 16×16: simplified monogram instead of full logo. Background — either fully transparent (PNG) or filled with brand color. Safari Pinned Tab accepts only monochrome SVG with fill="black".
Timeline
Preparing complete favicon and touch icon set: 0.5–1 working day.