RealFaviconGenerator

Promptfree, for everyone, and the only version there is

Copy the prompt for Claude CodeCopy the prompt for CodexCopy the prompt for Cursor

Copy

Build me the favicon pipeline that replaces RealFaviconGenerator: every icon a site actually needs, from one source, generated in my build.

STACK
- Node 20+ with sharp, run as a script rather than a service — this belongs in the build, not at request time
- An SVG source where possible, and a high-resolution PNG where not
- No dependency beyond sharp and a small PNG-to-ICO writer

THE SOURCE
- One SVG, or one PNG at 1024 by 1024. Everything is derived from it
- If the mark has fine detail, produce a second simplified source for the small sizes. A logo that reads at 512 pixels is a smudge at 16, and that is the case the whole exercise exists for
- Look at the 16-pixel output at actual size, on a real tab, before shipping. Not zoomed in — actual size

WHAT TO GENERATE, AND WHAT IS NO LONGER NEEDED
- `favicon.ico` containing 16, 32 and 48 — still needed, because some browsers and many feed readers and link previewers ask for it by that exact path at the site root
- `favicon.svg` with a `prefers-color-scheme` media query inside it, so the mark adapts to a dark or light tab strip. Modern browsers prefer this and it is one file
- `apple-touch-icon.png` at 180 by 180, with a solid background, because iOS does not honour transparency and will composite it onto black
- `icon-192.png` and `icon-512.png` for the web app manifest, plus a maskable variant with the safe area respected — Android crops to whatever shape the launcher uses, and a mark that fills the square gets its edges cut off
- A manifest with the name, short name, theme colour, background colour and the icon list
- The Windows tile and the older Apple sizes are largely obsolete. Do not generate a folder of thirty files out of superstition; generate the seven that are used and write down why each one is there

THE MARKUP
- The link tags for the SVG, the ICO and the Apple icon, plus the manifest and the theme colour meta tag
- The theme colour needs a light and a dark variant with media queries, or a browser in dark mode paints your header the wrong colour
- Emitted as a snippet the build can inline, so the markup and the files cannot drift apart

DOING IT PROPERLY WITH SHARP
- Rasterise the SVG at each size individually rather than downscaling one large render — a 16-pixel icon rendered directly is sharper than one resampled from 512
- Use a high-quality resampling kernel for the PNG path, and check the alpha edges: a mark with anti-aliased edges on transparency looks dirty on a coloured tab strip
- Pad and centre to the safe area for the maskable variant, deliberately, with the padding stated
- Optimise every PNG output and keep the total under a few kilobytes
- Deterministic output: the same source produces byte-identical files, so a rebuild does not churn the repository

CHECKING IT
- A preview page rendering each icon at its real size against light and dark backgrounds, and in a mock tab strip and a mock launcher circle
- A check that runs in CI: every referenced file exists, the manifest parses, the sizes match what is declared, and nothing exceeds a size budget
- A note in the README that browsers cache these very aggressively — changing an icon often shows nothing for days, so the filenames carry a content hash except for the two that must live at fixed paths

THE HONEST SCOPE
- This is a script, not a product. It is perhaps two hundred lines and it runs in the build
- The thing being replaced is a maintained list of which platforms want what, and that list changes every couple of years. So write down, in the README, where each requirement came from and when you last checked it — that comment is the actual deliverable, and it is what stops the pipeline quietly going stale
- Re-check annually, or when a browser release note mentions icons

WHAT MATTERS MOST
The 16-pixel output and the maskable safe area. Generate them, look at them at real size on a real device, and adjust the source until both read. Everything else here is file plumbing; those two are the reason icons look amateurish when they do.

Give me the script, the preview page, the CI check, the markup snippet, and a README listing every generated file with the reason it exists and the date the requirement was last verified.