gilde

← All craftbooks

Favicon & App-Icon Set

Media: imagesevalv1.0.0released 2026-06-05workflow: build-loop

Generate the complete favicon and app-icon set a modern site needs — the multi-size favicon, Apple touch icon, Android/maskable icons, and the web app manifest plus the exact HTML link/meta tags — from a single source mark, ensuring the icon stays legible at 16px and the maskable variant survives platform cropping. Lock FIRST the source mark, the exact size matrix, and the safe-area/padding rules (maskable icons need extra padding or platforms clip them) because favicon sets fail when the icon is illegible tiny or gets cropped on Android; then generate every size and emit the manifest + install snippet. Covers favicons, app icons, PWA icons, touch icons, maskable icons, and the web app manifest.

Steps

Entry step: scope. Each step names the specialist role it wants; the full working prompt is expandable.

  1. Scope the icon setplannerentry

    lock source mark, size matrix, and maskable safe-area

    Show working prompt
    1) Identify the source mark/logo (or a simplified glyph version suited to tiny sizes) and the brand background color. 2) Lock the SIZE MATRIX: favicon 16/32/48 (ICO + PNG), apple-touch-icon 180, Android/PWA 192 and 512, plus a 512 MASKABLE variant. 3) Lock the maskable SAFE-AREA rule: the icon content must sit within the central ~80% (≈10% padding each side) so Android's mask doesn't clip it, with a solid background fill. 4) Decide the manifest fields (name, short_name, theme_color, background_color, icons array with purpose: any/maskable). 5) Write an acceptance-criteria checklist: 'all matrix sizes produced', 'icon is legible at 16px (simplified if needed)', 'maskable variant keeps content in the safe area on a filled background', 'manifest.json is valid and lists every icon with correct sizes/purpose', 'the HTML link/meta snippet references the real files'. 6) Record matrix + rules + checklist via write_task_note AND to notes/scope.md.
  2. Generate the iconsimage-generator

    render every size, including a safe-area maskable

    Show working prompt
    1) Read scope.md. 2) Produce each size in the matrix from the source mark, saving into assets/ with conventional names (favicon-16.png, favicon-32.png, apple-touch-icon.png, icon-192.png, icon-512.png, maskable-512.png, and favicon.ico). 3) For the smallest sizes, use the SIMPLIFIED glyph so it stays legible at 16px — fine detail that vanishes tiny must be dropped. 4) For the maskable variant, render the icon within the central safe area on a solid background fill so platform masks (circle/squircle) never clip it. 5) Keep the mark and colors consistent across sizes. 6) Eyeball the 16px and the masked 512 to confirm legibility and no clipping. write_task_note the produced files. Good looks like: a crisp tiny favicon and a maskable icon that survives any crop.
  3. Manifest & install snippetdeveloper

    emit manifest.json and the HTML head snippet

    Show working prompt
    1) Write manifest.json with name, short_name, theme_color, background_color, and an icons array entry for each generated icon (src, sizes, type, and purpose: "any" or "maskable" for the maskable one) — referencing the real files in assets/. 2) Build index.html whose <head> contains the full install snippet: the favicon link tags (ICO + PNG sizes), the apple-touch-icon link, the manifest link, and a theme-color meta — all pointing at the real assets/ paths — and whose body shows a small preview rendering each icon at its native size plus a 16px row. 3) Validate manifest.json parses and every src resolves to a real file. 4) On a loop-back, fix only named gaps (missing icon entry, wrong purpose, broken path). 5) write_task_note the manifest and page paths. The gated deliverable is index.html.
  4. Evaluatereviewer

    Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.

    Show working prompt
    1) Open assets/ and confirm every matrix size exists (16/32/48, 180, 192, 512, maskable-512, favicon.ico) (PASS/FAIL). 2) Open manifest.json — it parses, theme/background colors set, and every icon listed with correct sizes and purpose (any vs maskable) pointing at real files (PASS/FAIL). 3) Open index.html and verify the head snippet links the favicon, apple-touch-icon, and manifest at real paths; view the 16px preview row — is the icon legible tiny (PASS/FAIL)? 4) Inspect the maskable icon — is content within the safe area on a filled background so it won't clip (PASS/FAIL)? 5) Write PASS/FAIL per criterion. Missing sizes, illegible 16px, clipped maskable, or a broken manifest → loop back to manifest (or generate if an icon is wrong).

Then route — this is the whole point of the loop:

- **Every criterion PASSES →** call `advance_task_step({ ref, stepId: "evaluate", next: "finish" })`.
- **Any criterion FAILS →** write the specific gaps to notes, then call `advance_task_step({ ref, stepId: "evaluate", next: "manifest" })` to loop back. The builder fixes exactly those gaps.

Never route to `finish` while any criterion is unmet. The build phase's completion gate already blocked a grossly-incomplete deliverable; your job is the judgment an automated check cannot make (does it actually work, read well, look right). After ~3 unproductive loops, stop and report DONE_WITH_CONCERNS so the user can step in.
  5. Finishdeveloper

    All acceptance criteria met. Stamp a short summary and report DONE.

    Show working prompt
    Every acceptance criterion passed. Write a one-paragraph DONE summary to task notes via `write_task_note`: what was built, the deliverable path(s), and a one-line confirmation that each criterion is met. Then report DONE.

Triggers

Phrases that suggest this craftbook to a crew.

Source

View this craftbook on GitHub · MIT license