A favicon set is more than one tiny square. Browser tabs, saved home-screen shortcuts, and web app launchers use icons in different contexts. You do not need dozens of nearly identical files to get started, but you should give each context a suitable source.
A useful starting set
| File | Dimensions | Purpose |
|---|---|---|
| favicon.ico | 16, 32, 48 px frames | Browser fallback and desktop contexts |
| favicon-96x96.png | 96 × 96 px | High-resolution raster favicon |
| apple-touch-icon.png | 180 × 180 px | Apple home-screen shortcut |
| android-chrome-192x192.png | 192 × 192 px | Web app manifest icon |
| android-chrome-512x512.png | 512 × 512 px | Large web app manifest icon |
Start with enough source detail
A square source of at least 512 × 512 pixels is a sensible starting point for this set. SVG artwork is useful when the shape needs to scale. Enlarging a 32 px logo to 512 px creates a larger image, but it does not restore lost detail. Use a simplified version of your logo if the full design contains small text.
Look at the smallest version first
Check your artwork at 16 px before admiring the large preview. Thin outlines, detailed illustrations, and long names often become unclear. One strong shape with enough contrast is usually easier to recognize. Preview both light and dark browser surfaces, because a transparent pale logo may disappear on one of them.
Search and app icons have different rules
Google asks for a square, crawlable favicon and recommends a resolution above 48 px. Meeting the published requirements does not guarantee display. A maskable app icon has a different concern: important content should sit inside its central safe zone, with an opaque background extending to the edges.
The complete pack includes separate padded maskable files. These are conservative starting points; test your design on the platforms you support.
References: Google favicon guidance and MDN app icon guidance.