MohamedAbdallah-14/favicon
skills/favicon/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add MohamedAbdallah-14/prompt-to-asset faviconInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 22, 2026, 2:06 AM125.8s1 file scanned
SKILL.md
- name:
- favicon
- description:
- 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.
- trigger_phrases:
- [favicon, browser icon, tab icon, apple touch icon, favicon.ico]
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:
- Reuse existing mark. If a brand
logo-mark.svgexists in the brand bundle, use it directly. Optimize with SVGO. Generate color variants by re-coloring SVG paths. - 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-jsrasterization. - Generate raster + vectorize. Prompt at 1024² (see
skills/logo/SKILL.md), BiRefNet matte, K-means 4-color (favicons benefit from low color count),potrace --colororvtracer --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.
.icofile size <15KB.apple-touch-icon.pngis opaque — reject if alpha channel present.pwa/512-maskable.pngsubject 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
Related Skills
MohamedAbdallah-14/ui-mockup-prompt
testing
VerifiedTrustedCommunity
Translate a UI brief (a page, a screen, a single component, a feature) into a paste-ready prompt for Nano Banana Pro / gpt-image-2 / Ideogram / Flux 2 / Midjourney that produces a designer-grade mockup as visual inspiration — not pixel-spec UI, not AI slop. Use whenever the user asks for "imagine the X page", "mock up the Y screen", "give me a prompt for nano banana / gpt image 2 to design", "describe this UI for an image model", "draft a prompt for the designer to take inspiration from", or any time the agent needs to produce a UI image-gen prompt for a real product surface (pricing page, dashboard, settings, onboarding, mobile screen, marketing hero, single component). Be pushy — trigger even when the user says "design" without "prompt", or "show me what X could look like" — the agent should reach for this skill before hand-rolling a brief.
4SKILL.mdUpdated May 7, 2026
MohamedAbdallah-14/ui-mockup-prompt
testing
VerifiedTrustedCommunity
Translate a UI brief (a page, a screen, a single component, a feature) into a paste-ready prompt for Nano Banana Pro / gpt-image-2 / Ideogram / Flux 2 / Midjourney that produces a designer-grade mockup as visual inspiration — not pixel-spec UI, not AI slop. Use whenever the user asks for "imagine the X page", "mock up the Y screen", "give me a prompt for nano banana / gpt image 2 to design", "describe this UI for an image model", "draft a prompt for the designer to take inspiration from", or any time the agent needs to produce a UI image-gen prompt for a real product surface (pricing page, dashboard, settings, onboarding, mobile screen, marketing hero, single component). Be pushy — trigger even when the user says "design" without "prompt", or "show me what X could look like" — the agent should reach for this skill before hand-rolling a brief.
4SKILL.mdUpdated May 7, 2026
MohamedAbdallah-14/t2i-prompt-dialect
development
VerifiedTrustedCommunity
Rewrite an asset brief into the exact prompt dialect of the target image model (OpenAI gpt-image-1, Google Imagen/Gemini, SDXL, Flux.1/Flux.2, Midjourney, Ideogram, Recraft). Handles negative-prompt translation, token budgets, transparency quirks, brand-palette injection, and text-in-image ceilings so that `asset_generate_*` submissions succeed on the first try.
2SKILL.mdUpdated Apr 21, 2026
MohamedAbdallah-14/logo
development
VerifiedTrustedCommunity
Generate a production-grade logo (primary brand mark). Returns RGBA PNG master + SVG vector + monochrome variant. Route by text-length and per-model ceiling. Strong-text models render multi-word and even paragraph-length wordmarks reliably; weak-text models composite SVG type post-render.
2SKILL.mdUpdated Apr 21, 2026