skills.rest
compozy
compozyOFFICIAL
Explore all skills by this author →
Website𝕏@compozyaiGitHub

favicon-gen

Generate a multi-format favicon set from logos, initials, or brand colors.

182|8|Updated Apr 4, 2026
Search Tags:#branding#svg#favicon#web manifest#apple-touch-icon#ico generation#pwa icons
One-click install
npx skills add https://github.com/compozy/agh --skill favicon-gen-compozy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: favicon-gen
Source: https://github.com/compozy/agh/tree/main/.agents/skills/favicon-gen
Command: npx skills add https://github.com/compozy/agh --skill favicon-gen-compozy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you create complete favicons that render correctly across browsers and devices, avoiding common issues like missing manifests, blurry icons, or iOS black-square problems.

Core Features & Use Cases

  • Generate the full favicon package: Produces favicon.svg, favicon.ico, apple-touch-icon.png, icon-192.png, icon-512.png, and the web manifest for PWA installs.
  • Support multiple input styles: Builds favicons from an existing logo icon, from initials/monograms, or from brand-color shapes using SVG templates.
  • Follow platform-specific correctness rules: Ensures iOS apple-touch icons use a solid background (never transparency) and that the design stays legible at 16x16.

Quick Start

Run the favicon-gen skill to generate a complete favicon set for your website using your logo or brand colors.

Frequently Asked Questions about favicon-gen

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

FAQPage Schema
What files do I need for a complete favicon set?▼

A complete favicon package includes favicon.svg, favicon.ico with 16+32 sizes, apple-touch-icon.png with a solid background, icon-192.png, icon-512.png, and a site web manifest for PWA usage.

How do I generate favicons from initials or brand colors?▼

Generate favicons from initials or brand colors by applying SVG templates to build branded icons, producing a full multi-format favicon set without requiring an existing logo image file.

Why does my apple-touch-icon show up as a black square on iOS?▼

Apple-touch-icon displays as a black square on iOS when transparency is used; apple-touch-icon.png must use a solid opaque background to render correctly on iOS home screens.

How do I make sure my favicon is legible at 16x16 pixels?▼

To ensure favicon legibility at 16x16 pixels, simplify the design to retain clarity at tiny sizes; generating a dedicated 16x16 layer in favicon.ico helps maintain visual correctness.

Can I create PWA icons without an existing logo file?▼

Create PWA icons without an existing logo file by using brand colors or initials to generate required icon-192.png and icon-512.png files alongside a site web manifest.

Related Skills

Explore More Design & Creative Skills→
brendadeeznuts1111brendadeeznuts1111

favicon-gen

Generates SVG, ICO, PNGs, and manifest favicon packages from brand assets or initials.

Community
Intermediate
moughamirmoughamir

favicon-gen

Generate SVG, ICO, PNG, and web manifest favicon assets from logo, initials, or brand colors.

Community
Intermediate
ArnavPuriArnavPuri
3

brand-identity

Generate logos, color palettes, typography, and brand patterns using CSS and SVG.

Community
Intermediate
evolv3aievolv3ai
3

favicon-gen

Generate complete favicon packages with SVG, ICO, PNGs, and web manifest.

Community
Intermediate