Why does it generate multiple files like ICO and SVG?

It ensures cross-browser compatibility; modern browsers prefer scalable SVGs, legacy browsers require ICO files, and mobile devices need specific PNG sizes for home screen shortcuts.

Can I use this for Progressive Web Apps (PWA)?

Yes, it generates a site.webmanifest file and high-resolution 192px and 512px icons required for PWA installation on Android and desktop Chrome.

How does it fix the black square issue on iPhones?

iOS does not support transparency in touch icons. This skill automatically applies a solid background color to the apple-touch-icon.png to ensure it renders correctly on Apple devices.

Does this skill require external design software?

No, the skill generates pure SVG code directly and provides command-line instructions for conversion, though it can also work with your existing SVG logo files.

Favicon Generator

Name: Favicon Generator
Author: jezweb

byjezweb

•

169

•

デザインツール

Generates production-grade favicon sets and web manifests from logos, text, or brand colors to ensure professional site branding.

This skill streamlines the creation of essential web branding assets by generating all required formats—including SVG, legacy ICO, and iOS-optimized PNGs—along with a complete web manifest. It eliminates common deployment issues such as launching with CMS defaults, illegible icons at small scales, or the 'black box' transparency bug on iOS devices. Whether you are extracting an icon from an existing logo, creating a monogram from initials, or using industry-specific shapes, this skill provides the templates and rules needed for high-quality, high-contrast favicons that work across all modern and legacy browsers.

主な機能

01169 GitHub stars

02Multi-format export: SVG, multi-size ICO, and Apple Touch Icons

03Automated Web App Manifest generation for Android and PWA support

04iOS-specific background enforcement to prevent transparency issues

05Intelligent monogram templates with optimized font-weight for 16x16 legibility

06Industry-specific shape recommendations and brand color integration

ユースケース

01Fixing missing manifest files and troubleshooting iOS home screen icon display

02Initializing brand assets for new web projects and PWAs

03Replacing default WordPress, Wix, or Squarespace favicons before launch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jezweb/claude-skills favicon-gen

For use in Claude.ai and ChatGPT

Download Skill