favicon-gen

Solid

Generate custom favicons from logos, text, or brand colours. Produces all required formats: favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, and web manifest. Use when initialising websites, replacing CMS default favicons, converting logos to favicons, creating branded icons from initials, or troubleshooting favicon not displaying, iOS black square, or missing manifest.

Web & Frontend 809 stars 82 forks Updated 2 weeks ago MIT

Install

View on GitHub

Quality Score: 93/100

Stars 20%
97
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Favicon Generator Generate a complete favicon package from a logo, initials, or brand colours. Produces all required formats and HTML integration code. ## Workflow ### Step 1: Choose Your Approach ``` Have a logo with an icon element? YES -> Extract icon from logo NO -> Have text/initials? YES -> Create monogram favicon NO -> Use branded shape ``` ### Step 2: Create Source SVG **Extracted icon** — copy icon paths from logo, centre in 32x32 viewBox, simplify for small sizes. **Monogram** — use a template from `assets/`: ```xml <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <circle cx="16" cy="16" r="16" fill="#0066cc"/> <text x="16" y="21" font-size="16" font-weight="bold" text-anchor="middle" fill="#ffffff" font-family="sans-serif">AC</text> </svg> ``` **Branded shape** — circle (universal), rounded square (modern), shield (security), hexagon (tech). SVG templates available in `assets/` directory. ### Step 3: Generate All Formats Requires ImageMagick (`convert` command). Install if needed: `brew install imagemagick` (macOS) or `apt install imagemagick` (Linux). ```bash # ICO (16x16 + 32x32) convert favicon.svg -define icon:auto-resize=16,32 favicon.ico # Apple Touch Icon (180x180, SOLID background — transparent = black on iOS) convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png # Android/PWA icons convert favicon.svg -resize 192x192 icon-192.png convert favicon.svg -resize...

Details

Author
jezweb
Repository
jezweb/claude-skills
Created
7 months ago
Last Updated
2 weeks ago
Language
Python
License
MIT

Integrates with

Anthropic · AI Cloudflare · Cloud

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

favicon-generator

When the user wants to implement, optimize, or audit favicon and app icons. Also use when the user mentions "favicon," "app icon," "browser icon," "touch icon," "PWA icon," "favicon sizes," "apple-touch-icon," "favicon.ico," "site icon," or "tab icon." For visual system, use brand-visual-generator.

553 Updated 3 weeks ago
kostja94
AI & Automation Solid

favicon

Generate favicons from a source image

39,227 Updated today
sickn33
Web & Frontend Listed

icon-generator

Generate web UI/UX icon assets (favicon.ico, apple-touch-icon, PWA icons incl. maskable) and optionally Unreal Engine packaging icons (Windows .ico, macOS .iconset/.icns, Linux .png) from a single source SVG/PNG; use when you need correct multi-size icon files, safe-area guidance, manifests/head tags, or automation.

1 Updated today
KhaiEr720
AI & Automation Listed

svg-logo-generator

Generate high-quality, minimalistic, and geometric SVG logos using Python scripts. Use this skill when users need to create logos, icons, or visual identities with geometric primitives (circles, rects, paths) and specific color schemes. Applies generative design principles with standardized workflows for scalable SVG output.

335 Updated today
aiskillstore
AI & Automation Solid

logo-creator

Create logos using AI image generation. Discuss style/ratio, generate variations, iterate with user feedback, crop, remove background, and export as SVG. Use when user wants to create a logo, icon, favicon, brand mark, mascot, emblem, or design a logo.

903 Updated yesterday
ReScienceLab