TechnicalCollectible prompt

Favicons, app icons and a web manifest that work

Ship a small, modern icon set that looks sharp in browser tabs, on home screens and in dark mode.

Claude CodeCursorLovable

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

Favicons, 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.
Technicalnvoka.com/library/nvoka-favicons-app-icons-and-web-manifestScan to open
Technical

Favicons, app icons and a web manifest that work

Ship a small, modern icon set that looks sharp in browser tabs, on home screens and in dark mode.

Nvoka logo

Curated by Nvoka

Claude CodeCursorLovablev0
Add to my library

Make it yours

Fill in the blanks and change any word. Only your copy changes, never the card.

Fill in the blanks

0 of 3 filled

Your prompt

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.
See all