SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsfavicon

favicon

General & other

View repository

Updated 10-16 06:48

About this skill

Favicon generation

What modern browsers actually want (see research 11)

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/svg+xml" href="/icon-dark.svg" media="(prefers-color-scheme: dark)">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
File Size Alpha Notes
favicon.ico 16, 32, 48 packed yes legacy compatibility; <15KB
icon.svg vector yes primary modern icon
icon-dark.svg vector yes prefers-color-scheme: dark
apple-touch-icon.png 180×180 no — opaque iOS home-screen; transparent = black background on iOS
pwa/192.png, pwa/512.png 192, 512 yes manifest any purpose
pwa/512-maskable.png 512, 80% safe zone padding opaque manifest maskable purpose

Generation strategy

SVG-first. Three paths, in order of preference:

  1. Reuse existing mark. If a brand logo-mark.svg exists in the brand bundle, use it directly. Optimize with SVGO. Generate color variants by re-coloring SVG paths.
  2. LLM-author SVG. For simple geometric marks (letter, glyph, shape), ask Claude/GPT to emit raw SVG with fixed viewBox, ≤40 paths, palette as hex list. Validate with @resvg/resvg-js rasterization.
  3. Generate raster + vectorize. Prompt at 1024² (see skills/logo/SKILL.md), BiRefNet matte, K-means 4-color (favicons benefit from low color count), potrace --color or vtracer --mode polygon, SVGO.

Prompt scaffold for raster fallback

A simple, memorable [letter | glyph | shape] representing [SUBJECT].
Bold silhouette. Two or three colors maximum: [#primary, #bg].
Subject fills 70% of frame, centered.
Solid pure white background.
No text, no details that vanish at 16x16.
1:1 square, 1024x1024.

Dark-mode variant

Option A (recommended): generate two separate SVGs — light on white, dark on black. Never algorithmically invert (loses WCAG contrast).

Option B (compromise): re-color SVG paths via data-driven palette swap from brand.light and brand.dark.

Validation (critical for favicons)

  • Render SVG at 16×16 with @resvg/resvg-js.
  • WCAG AA contrast ratio ≥ 4.5:1 between foreground and both white and dark browser chrome.
  • No detail <2px stroke at 16×16 size.
  • .ico file size <15KB.
  • apple-touch-icon.png is opaque — reject if alpha channel present.
  • pwa/512-maskable.png subject fits inside 80% center circle.

Output

favicon/
├── favicon.ico             # 16/32/48 packed
├── icon.svg                # primary modern icon
├── icon-dark.svg           # prefers-color-scheme dark
├── apple-touch-icon.png    # 180² opaque
├── pwa/192.png
├── pwa/512.png
├── pwa/512-maskable.png
├── head-snippet.html       # <link> tags ready to paste
└── meta.json