SkillsAdd

mohamedabdallah-14/prompt-to-asset · Archived

favicon

Generate a full favicon bundle — favicon.ico (16/32/48 multi-res), icon.svg with prefers-color-scheme dark support, apple-touch-icon.png 180×180 opaque, and PWA 192/512/512-maskable — from a brand mark or a mark prompt.

First seen Jul 7, 2026

Installation

$ npx skills add mohamedabdallah-14/prompt-to-asset --skill favicon
View on skills.sh ↗ GitHub repository ↗

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

ui-mockup-prompt Same source · more installs
mohamedabdallah-14/prompt-to-asset

Translate a UI brief (a page, a screen, a single component, a feature) into a paste-ready promp…

7 installs
asset-validation-debug Same source · more installs
mohamedabdallah-14/prompt-to-asset

Diagnose and repair asset-generation failures.

7 installs
app-icon Same source · more installs
mohamedabdallah-14/prompt-to-asset

Generate an app icon from a single 1024² master and fan out to iOS (AppIcon.appiconset with squ…

7 installs
vectorize Same source
mohamedabdallah-14/prompt-to-asset

Convert a raster image to SVG. Three paths — Recraft hosted vectorization, vtracer (multi-color…

6 installs

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

favicon-gen Similar name
jezweb/claude-skills

Generate custom favicons from logos, text, or brand colours. Produces favicon.svg, favicon.ico,…

2.1K installs
favicon Similar name
brianlovin/agent-config

Generate a complete set of favicons from a source image and update HTML. Use when setting up fa…

1.9K installs
favicon-generator Similar name
kostja94/marketing-skills

When the user wants to implement, optimize, or audit favicon and app icons. Also use when the u…

930 installs
favicon Similar name
shpigford/skills

Generate favicons from a source image

104 installs

Also in this package

Other skills from mohamedabdallah-14/prompt-to-asset · top by installs.

npx skills add mohamedabdallah-14/prompt-to-asset
ui-mockup-prompt 7 asset-validation-debug 7 app-icon 7 vectorize 6 transparent-bg 6 t2i-prompt-dialect 6 svg-authoring 6 og-image 6 logo 6 illustration 6

Browse all from mohamedabdallah-14/prompt-to-asset

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 17
License LICENSE
Default branch main
Open issues 1
Status Archived

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,318 B
  • docs SUMMARY.md 239 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 6 installs

SKILL.md

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