DiscordSign up
SKILLS.SH

favicon-gen

Complete favicon package generation from logos, text, or brand colours in all required formats. Produces favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, and web manifest with HTML integration code Supports three creation approaches: extracting icons from existing logos, generating monograms from initials, or using branded shapes (circle, rounded square, shield, hexagon) Requires ImageMagick for format conversion; includes fallback to favicon.io for users without local ImageMagick installation Enforces critical rules for iOS compatibility (solid backgrounds to avoid black squares) and legibility at small sizes (bold fonts, 16x16 testing)

INSTALLATION
npx skills add https://github.com/jezweb/claude-skills --skill favicon-gen
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

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/:

<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).

# 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 512x512 icon-512.png

No ImageMagick? Use https://favicon.io to convert from the SVG instead.

Step 4: Create Web Manifest

Copy and customise assets/manifest.webmanifest:

{

  "name": "Your Business Name",

  "short_name": "Business",

  "icons": [

    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },

    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }

  ],

  "theme_color": "#0066cc",

  "background_color": "#ffffff",

  "display": "standalone"

}

Step 5: Add HTML Tags

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<link rel="icon" type="image/x-icon" href="/favicon.ico">

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

<meta name="theme-color" content="#0066cc">

Place all files in site root (/public/ in Vite/React).

Critical Rules

  • Always generate ALL formats — SVG, ICO, apple-touch-icon, 192, 512, manifest
  • iOS icons MUST have solid backgrounds — transparent = black square
  • Always use bold font weight for monogram text (regular disappears at 16x16)
  • Test at 16x16 — if it's not legible, simplify
  • Never launch with CMS defaults (WordPress "W", etc.)

Format Quick Reference

Format

Size

Transparency

Purpose

favicon.svg

Vector

Yes

Modern browsers

favicon.ico

16+32

Yes

Legacy browsers

apple-touch-icon.png

180x180

No

iOS home screen

icon-192.png

192x192

Yes

Android

icon-512.png

512x512

Yes

PWA

Asset Files

  • assets/favicon-svg-circle.svg — Circle monogram template
  • assets/favicon-svg-square.svg — Rounded square template
  • assets/favicon-svg-shield.svg — Shield template
  • assets/manifest.webmanifest — Web manifest template

Reference Files

  • references/format-guide.md — Complete format specifications
  • references/extraction-methods.md — Logo icon extraction steps
  • references/monogram-patterns.md — Advanced monogram design
  • references/shape-templates.md — Industry-specific shapes with SVG code
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

frontend-design
3/3

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design

Verified authoranthropics
SKILLS.SH
422K139K
2026-05-22
web-design-guidelines
2/3

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

Verified authorvercel-labs
SKILLS.SH
318K26.9K
2026-05-22
vercel-composition-patterns
3/3

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Verified authorvercel-labs
SKILLS.SH
172K26.9K
2026-05-22
ui-ux-pro-max
2/3

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

nextlevelbuilder
SKILLS.SH
158K81.3K
2026-05-22

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card