TechnicalFavicons, app icons and a web manifest that work
Act as a front-end engineer with a designer's eye. Set up favicons, app icons and a web manifest for {{business_name}}'s site, built with {{tech_stack}}. Brand colors: {{brand_colors}}. Ask me for the logo file, SVG preferred. First check which icon files and tags exist now, and remove duplicates and outdated ones.
The modern minimal set, nothing more:
- favicon.ico with 16 and 32px sizes at the root, for older browsers and feed readers
- icon.svg with a built-in dark version, using a prefers-color-scheme media query inside the SVG
- apple-touch-icon.png at 180 by 180px on a solid background, since iOS fills transparency with black
- 192 and 512px PNGs for the manifest, plus a 512px maskable version with the mark inside the center 80% safe zone
Design for small sizes:
- At 16px, a simplified mark or a single letter, not the full logo with a tagline
- Strong contrast on both light and dark browser tabs
- Check each size by eye, and redraw rather than shrink when detail turns to mush
Web manifest:
- name, a short_name of 12 characters or fewer, and start_url
- display set to standalone only if the site works like an app; otherwise browser
- theme_color and background_color from the brand tokens, plus a theme-color meta tag for light and dark
Delivery: correct content types, long cache lifetimes with versioned file names, and the tags in the server HTML of every page.
Finish with the file list and sizes, the head tags added, and how to check it in browser developer tools under Application and on a real phone's home screen.