Icon preparation
Favicon and app-icon packs: start with one honest master image
An icon pack is a family of outputs, not one file renamed many times. Begin with a clean master image, generate separate copies at the requested sizes, and check each small result for readable shapes and accidental clipping.
On this page
A large master does not solve a weak small icon
A 1024 × 1024 master can contain enough pixels for many derivatives, but a detail that works at 1024 may disappear at 16 × 16. Tiny text, thin outlines, low contrast, and edge-hugging artwork can become indistinct even when the export dimensions are formally correct.
Design and review at the smallest important slot, then work back to the master. This prevents a batch generator from creating a technically complete pack whose most common icon is unreadable.
Worked example: one master, several use cases
A square 1024-pixel master can yield a 512-pixel PWA icon, a 180-pixel touch icon, and a 32-pixel browser icon. Each is a separate rendered file with its own bytes, transparency, and edge treatment. The 32-pixel result deserves a deliberate visual check rather than a quick glance at the master.
If a platform requires an opaque background, a rounded mask, or a different safe zone, do not assume the generic square variant is sufficient. Follow that platform’s current icon documentation and keep its specific output isolated from the master.
| Output family | What to verify locally | Platform-specific question |
|---|---|---|
| Small browser icon | Recognisable silhouette at actual size. | Which file formats and sizes does the browser path use? |
| PWA or device icon | No unexpected transparent edge or blur. | Does the platform apply a mask or background? |
| Store asset | Correct canvas and no unintended crop. | What does the current store artwork policy require? |
Keep source, generated assets, and manifest decisions separate
The master image, generated image files, and an application manifest serve different purposes. A generator can help prepare files, but it cannot know whether your project references the correct paths, whether an existing service worker caches an older icon, or whether a platform accepts a specific style of artwork.
Name the generated folder and retain the original master. When an icon changes, regenerate the family from the new master rather than manually resizing one small derivative over and over.
Result interpretation: a pack is ready for integration, not publication approval
A completed local pack means the selected files were generated at the reported dimensions. It does not prove browser cache behaviour, app-store acceptance, trademark clearance, accessibility, or a platform’s current design review outcome.
Test a small sample in the actual product and use the official platform reference for changing requirements. A generator is most useful when it leaves those boundaries visible.
Desktop tools and commands
Use a local tool