Concept & Knowledge Hub
Favicon Generation: App Icons & Manifests
A Favicon (Favorite Icon) is the small branding image displayed in browser tabs, bookmarks, and mobile home screens. Modern Progressive Web Apps (PWAs) require a highly specific set of scaled icons to support different device pixel ratios.
Generating these nested icon packages manually via Photoshop is incredibly tedious. This tool leverages the HTML5 Canvas API to scale and export a perfectly formatted `.zip` package entirely client side.
Core Architecture & Mathematical Formula
Master Image (512x512) ➔ Canvas Scaling ➔ [16x16, 32x32, 192x192, 512x512]
The algorithm takes a high resolution master file and mathematically interpolates it down to the exact dimensions required by Google Android (192px) and Apple iOS (512px).
Best Practices & Essential Guidelines
- Keep It Simple: A 16x16 pixel square is microscopic. Never use text or complex photographic logos for a favicon. Use a highly simplified, high contrast vector monogram or solid icon.
- Use Transparent PNGs: Always upload a master file with a transparent background. This allows the device OS (like iOS or Android) to apply their own native rounding masks (like squircles) gracefully.
- Don't Forget the Manifest: For Android devices to recognize your app icons, you must include a `site.webmanifest` JSON file in your root directory that points to the exact paths of the 192x192 and 512x512 PNGs.
Frequently Asked Questions (FAQ)
Do I still need an .ico file?
While historically required by Internet Explorer, modern browsers (Chrome, Safari, Firefox) fully support standard PNG favicons via the `<link rel='icon' type='image/png'>` tag. .ico is mostly obsolete.
Why does my favicon look blurry on Retina displays?
If you only serve a 16x16 icon, a high density Retina screen will stretch it to 32x32. You must always include at least a 32x32 size to ensure crisp rendering on modern monitors.
What is the Apple Touch Icon?
When an iOS user taps 'Add to Home Screen', Safari looks specifically for a `<link rel='apple-touch-icon'>` tag pointing to a high resolution (usually 180x180) icon to use as the app shortcut.