How do I force a favicon to update in my browser?

Browsers cache favicons aggressively. You can force an update by performing a hard refresh (Ctrl+Shift+R), clearing your browser cache, or adding a version query string to the file path in your HTML.

Where should I place the generated favicon files?

For most modern frameworks like Vite, React, or Next.js, these files should be placed in the public root directory to be served at the top-level path.

How does this solve the 'black box' issue on iPhones?

The skill automatically enforces solid backgrounds for Apple Touch icons, as iOS renders transparent PNGs as black squares on the home screen.

Why do I need more than just a .ico file?

Modern web standards require SVGs for scalability, high-resolution PNGs for mobile home screens, and a web manifest for Progressive Web App (PWA) support and Android compatibility.

Can I create a favicon if I don't have a logo yet?

Yes, the skill includes templates for creating professional monogram-style icons using your brand's initials and industry-standard geometric shapes.

Favicon Generator

Name: Favicon Generator
Author: evolv3ai

byevolv3ai

0•

设计工具

Generates professional, multi-format favicons and web manifests to ensure brand consistency and mobile compatibility across all devices.

Favicon Generator is a comprehensive Claude Code skill designed to replace generic CMS defaults with production-ready branding. It automates the creation of a full suite of assets—including scalable SVGs, legacy ICO files, solid-background Apple Touch icons, and Android-compliant web manifests. The skill provides expert guidance on visual simplification, high-contrast color accessibility, and industry-specific design patterns to ensure your site looks professional in every browser tab and mobile home screen, effectively preventing common issues like iOS transparency bugs and aggressive browser caching.

主要功能

01Built-in validation for iOS transparency and accessibility standards

02Industry-specific shape and color recommendations

030 GitHub stars

04Logo-to-icon extraction and simplification logic

05Automated monogram creation for text-based brands

06Multi-format asset generation (SVG, ICO, PNG, and Web Manifest)

使用场景

01Replacing default WordPress or generic CMS icons during site launch

02Configuring Progressive Web App (PWA) assets with valid manifest files

03Converting complex corporate logos into legible 16x16 browser tab icons

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add evolv3ai/claude-skills-archive favicon-gen

For use in Claude.ai and ChatGPT

Download Skill