Favicon Gen

Favicon Gen

A Claude Code skill for favicon gen workflows and automation

Category: development Source: jezweb/claude-skills

What Is Favicon Gen?

Favicon Gen is a specialized Claude Code skill designed to streamline and automate the creation of website favicons. Favicons are small but critical assets that appear in browser tabs, bookmarks, and mobile device home screens, serving as visual identifiers for web brands. Favicon Gen supports the generation of all required favicon formats, including modern SVG, legacy ICO, Apple touch icons, PNGs for Android, and a compliant web manifest file. The skill is particularly useful during website initialization, rebranding, or troubleshooting favicon issues such as missing icons or platform-specific display bugs.

This skill can generate favicons from various sources: extracted logo icons, monogram text, or brand colors. It is intended to replace generic or CMS-default favicons with custom-branded assets, ensuring consistency and professionalism across all platforms and devices.

Why Use Favicon Gen?

Many web projects treat favicon generation as an afterthought, leading to incomplete coverage, inconsistent branding, or technical issues. These problems can manifest as missing icons in Safari tabs, black squares on iOS, or fuzzy icons on high-resolution devices. Manually creating each required asset is tedious and error-prone, especially when dealing with legacy formats or strict sizing requirements.

Favicon Gen automates this process, ensuring that all required icon sizes and formats are generated from a single source SVG. It provides templates and guidance for extracting icons from logos, creating monogram-based favicons, or generating branded shapes. This automation saves significant development time, reduces errors, and results in a professional, cross-platform favicon package.

In addition, Favicon Gen produces the necessary HTML integration code and manifest files, further simplifying the developer workflow and ensuring best practices are followed.

How to Get Started

To use Favicon Gen, you should have access to a Claude Code environment with ImageMagick installed, as image format conversions rely on this tool. The skill is available at the following repository: Favicon Gen on GitHub.

Step 1: Select Your Source

  • Logo Icon Extraction: If your brand has a logo with a distinct icon, extract the icon paths and prepare an SVG centered in a 32x32 viewBox.
  • Monogram Creation: If you lack a logo icon, generate a monogram favicon using initials and a brand color.
  • Branded Shape: For organizations without established marks, choose from universal shapes (circle, rounded square, shield, hexagon) and apply your brand color.

Step 2: Prepare the Source SVG

For a monogram favicon, use a template such as:

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

Ensure your SVG is visually simple, centered, and uses flat colors for best results at small sizes.

Step 3: Run the Favicon Gen Workflow

Invoke the skill in Claude Code, specifying your SVG input. The skill will:

  • Convert the SVG to all required raster PNG sizes (192x192, 512x512, 180x180, etc.) using ImageMagick.
  • Generate a .ico file containing multi-resolution icons for legacy Windows/IE support.
  • Output a manifest.json for web app integration.
  • Generate the HTML <link> and <meta> tags required for proper browser and platform support.

Example Command

If running locally via ImageMagick, the conversion step may look like:

convert favicon.svg -resize 192x192 favicon-192.png
convert favicon.svg -resize 512x512 favicon-512.png
convert favicon.svg -resize 180x180 apple-touch-icon.png
convert favicon.svg favicon.ico

Favicon Gen automates these conversions and produces a ready-to-use package.

Key Features

  • Comprehensive Format Support: Outputs SVG, ICO, PNG (multiple sizes), Apple touch icon, and manifest.json.
  • Flexible Source Options: Accepts extracted logo icons, monograms, or branded shapes.
  • HTML Integration Code: Supplies all necessary <link> and <meta> tags for straightforward embedding.
  • Troubleshooting Guidance: Helps resolve common favicon issues, such as iOS black icons or missing manifests.
  • SVG Templates: Provides starter templates for monograms and branded shapes.
  • Cross-Platform Consistency: Ensures your favicon appears correctly on all major browsers and devices.

Best Practices

  • Simplicity First: Favicon images are displayed at very small sizes; avoid detailed graphics or fine text. Favor bold, simple shapes and high-contrast color schemes.
  • SVG as Source: Always begin with a well-formed SVG. This ensures crisp rendering at all sizes and allows for easy scaling or color changes.
  • Brand Consistency: Use your official brand color palette and, if possible, your logo’s iconography or initials.
  • Test Across Devices: After generating your favicon package, verify appearance on Windows, macOS, iOS, and Android. Pay special attention to iOS home screen icons and high-DPI displays.
  • Update Manifests and HTML: Replace any default or old <link rel="icon"> references with the integration code provided by Favicon Gen to avoid caching or legacy issues.

Important Notes

  • ImageMagick Dependency: Favicon Gen requires ImageMagick for rasterization. Ensure it is installed and accessible in your Claude Code environment.
  • SVG Quality Matters: Poorly constructed SVGs (e.g., not centered, not square, too complex) may result in misaligned or unreadable favicons.
  • Manifest Configuration: The generated manifest.json must be correctly linked in your HTML for full PWA support.
  • Cache Invalidation: Browsers may aggressively cache favicons. After updating, use cache-busting query strings or instruct users to refresh.
  • Platform Quirks: Some browsers or devices ignore certain favicon types. Always include a full set of formats for maximum compatibility.

Favicon Gen provides a robust, automated solution for generating professional favicon packages, significantly improving developer efficiency and ensuring high-quality, consistent branding across all platforms.