Favicon & Touch-Icon Development: Complete Set for Sites and PWAs
Often a site looks great on desktop, but on mobile devices the icon in bookmarks or on the home screen turns out blurry or gets cropped. This happens because each platform requires its own size and format. Developers frequently forget icons for PWA, causing the app to fail Lighthouse checks. Or they use a single favicon.ico for everything, making it blurry on Retina. We solve these problems for you. Our team has over 10 years of vectorization and rasterization experience and has completed 500+ icon sets, ensuring reliable results. Our engineers have deep expertise in PNG optimization, SVG viewBox configuration, and cache-busting hash integration.
What Sizes and Formats Do Modern Browsers Need?
A modern favicon set is not a single file but a complete artifact for different scenarios. Below is the minimum list of files a site should have:
- favicon.ico: 16×16 and 32×32 multi-size ICO container for browser backward compatibility.
- favicon-16x16.png: 16×16 for Chrome address bar.
- favicon-32x32.png: 32×32 for Safari and Retina.
- apple-touch-icon.png: 180×180 for iOS 'Add to Home Screen'.
- android-chrome-192x192.png: 192×192 for Android Chrome.
- android-chrome-512x512.png: 512×512 for PWA splash screen.
- mstile-150x150.png: 150×150 for Windows tile (msapplication-TileImage).
- safari-pinned-tab.svg: monochrome SVG for Safari Pinned Tab.
If you use PWA, you must include a manifest with correct icon references. Learn more about manifests at developer.mozilla.org.
Automated generation of the set is 3 times faster than manually preparing each file.
Why Is Maskable Icon Support Important for Android?
Android adapts icons to different shapes—circle, squircle. Without the "purpose": "maskable" attribute, the system may crop the icon unpredictably. To avoid this, the source must have a safe zone: a 40-pixel margin from the edges for a 512×512 size. In the manifest, it looks like this:
{ "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" } ] } What Is Included in the Work?
We prepare a complete set for your site. The deliverables include 12 files: 1 SVG source, 1 ICO, 9 PNGs, and 1 manifest.json.
- Original SVG file with correct viewBox and safe zone for maskable.
- All required raster files (from 16×16 to 512×512) in PNG and ICO.
- Correct
manifest.jsonwith all icons and their purpose. - Meta tags for
<head>:apple-touch-icon,icon,msapplication-TileImage,safari-pinned-tab. - Testing on real devices: iOS, Android, Windows, and different browsers.
- Integration consultation and post-implementation support.
Deliverables:
- Full icon set (SVG, PNG, ICO) with correct metadata and cache-busting hashes.
- Properly configured manifest.json.
- HTML snippet for
<head>including all meta tags. - Documentation explaining icon paths and purposes.
- 1 month of support for any issues.
How We Prepare the Set: Step-by-Step Process
- Analyze the original logo. Check if it works at small sizes. If not, simplify contours.
- Create an SVG source with appropriate viewBox. Draw or adapt the logo in vector with a margin for maskable.
- Automatically generate the full set using custom scripts for consistency (PNG optimization via pngquant, ICO creation via ImageMagick).
- Configure
manifest.json. Set paths, purpose, maskable, sizes. - Insert meta tags into
<head>. All 8 variants, including msapplication-TileImage and apple-touch-icon. - Test on real devices: iOS, Android, Windows, and browsers.
Typical Mistakes and Solutions
- Missing apple-touch-icon 180×180: Icon not displayed on iOS. Always include 180×180 PNG with apple-touch-icon meta tag.
- Incorrect path in manifest: PWA does not load icons. Ensure paths are relative from the root and files are accessible.
- Missing maskable purpose: Android crops icon incorrectly. Add purpose: "any maskable" for 192 and 512 icons.
- SVG for Safari Pinned Tab not monochrome: Does not color to theme color. Use only black fill, no gradients.
- Logo too complex for 16×16: Loses readability. Create a simplified version for 16×16.
We guarantee that after our work, all icons will display correctly on all devices.
Timelines and Cost
Preparation of a full set takes from 0.5 to 1 business day. Pricing starts at $150 for basic sets and can go up to $300 for complex logo adaptations. You save up to 50% compared to manual per-file generation.
Order Icon Preparation
Contact us to discuss your project. We will prepare icons that work everywhere—on iOS, Android, Windows, and in browsers.