skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

favicon-gen

Generate complete favicon packages with SVG, ICO, PNG icons, and web manifest from logos or initials.

1|Updated Aug 18, 2026
Search Tags:#branding#icon generation#pwa#svg#favicon#imagemagick#web manifest
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill favicon-gen-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: favicon-gen
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/favicon-gen
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill favicon-gen-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires imagemagick, and includes references (resource) and assets (resource) components.

What problem does it solve? Websites need favicons in six different formats to display correctly across browsers, iOS, Android, and PWA contexts, and missing or misconfigured files cause black squares on iOS, blurry tabs, or broken Add to Home Screen flows. ## Core Features & Use Cases - Full Format Generation: Produces favicon.svg, favicon.ico (16x16 + 32x32), apple-touch-icon.png (180x180 with solid background), icon-192.png, icon-512.png, and site.webmanifest using ImageMagick. - Three Creation Approaches: Extract an icon element from an existing logo, build a monogram from initials with shape templates (circle, rounded square, shield, hexagon), or design a branded shape. - HTML Integration: Outputs the exact link and meta tags needed in the document head, including theme-color and manifest references. - Use Case: A client site still shows the default WordPress favicon; provide their logo, and the skill extracts the icon, simplifies it for 16x16 legibility, generates all six files, and gives you the head tags to paste. ## Quick Start Generate a complete favicon package from my logo file and give me the HTML tags to add to my site.

Frequently Asked Questions about favicon-gen

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a logo into a favicon?▼

Extract the icon element from the logo's SVG source, center it in a 32x32 viewBox, and simplify it for small sizes. Then use ImageMagick to generate the ICO, apple-touch-icon, and PNG sizes from that SVG.

What favicon files does a modern website need?▼

A complete setup needs six files: favicon.svg, favicon.ico with both 16x16 and 32x32, apple-touch-icon.png at 180x180, icon-192.png, icon-512.png, and a site.webmanifest. No single format covers all browsers and platforms.

Why does my favicon show as a black square on iOS?▼

iOS renders transparent PNGs with a black fill, so a transparent apple-touch-icon appears as a black square. Regenerate it with a solid background color using the -background and -alpha remove flags in ImageMagick.

How do I make a favicon from text or initials without a logo?▼

Create a monogram favicon by placing one to three bold letters inside a shape like a circle, rounded square, shield, or hexagon. Use font-weight bold and at least 4.5:1 contrast so the letters stay legible at 16x16.

What if ImageMagick is not installed on my machine?▼

Install it via brew install imagemagick on macOS or apt install imagemagick on Linux. As an alternative, upload the source SVG to favicon.io to convert it into the required raster formats online.

Related Skills

Explore More Design & Creative Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
MattSenterMattSenter

senternet-site-favicon

Generate favicon and app icon assets for marketing sites.

Community
Intermediate
valtterimelkkovaltterimelkko
1

web-asset-generator

Generates favicons, PWA icons, and Open Graph images from source logos or text slogans.

Community
Intermediate
mahg-esmahg-es
3

visual-identity

Design and maintain a visual identity system with logo, color, typography, iconography, and imagery guidelines.

Official
Intermediate