favicon-gen

📁 olino3/forge 📅 Feb 13, 2026

总安装量

周安装量

#51343

全站排名

安装命令

npx skills add https://github.com/olino3/forge --skill favicon-gen

Agent 安装分布

cursor 4

claude-code 4

replit 4

mcpjam 3

openhands 3

zencoder 3

Skill 文档

skill:favicon-gen – Custom Favicon Generator

Version: 1.0.0

Purpose

Generate custom favicons from logos, text/initials, or brand colors. Prevents launching with CMS defaults by producing a complete favicon set covering all platforms and devices. Supports three approaches: extracting icons from existing logos, creating monogram favicons from brand initials, or generating geometric shape favicons from brand colors. Outputs all required formats â favicon.ico (16/32/48), favicon.svg, apple-touch-icon.png (180Ã180), android-chrome icons (192/512), PNG fallbacks, and the web manifest JSON.

File Structure

skills/favicon-gen/
âââ SKILL.md (this file)
âââ examples.md

Interface References

Context: Loaded via ContextProvider Interface
Memory: Accessed via MemoryStore Interface
Shared Patterns: Shared Loading Patterns
Schemas: Validated against context_metadata.schema.json and memory_entry.schema.json

Mandatory Workflow

IMPORTANT: Execute ALL steps in order. Do not skip any step.

Step 1: Initial Analysis

Gather the favicon source from the user:
- Logo file: SVG or high-res PNG to extract/simplify into an icon
- Text/initials: Letters for a monogram favicon (e.g., “AB”, “F”)
- Brand colors: Hex values for generating geometric shape icons
Determine size requirements (standard set or custom sizes)
Identify format preferences (all formats by default)
Detect project type and existing favicon configuration

Step 2: Load Memory

Follow Standard Memory Loading with skill="favicon-gen" and domain="engineering".

Step 3: Load Context

Follow Standard Context Loading for the engineering domain. Stay within the file budget declared in frontmatter.

Step 4: Determine Favicon Strategy

Based on the source input, select the generation approach:

Logo extraction â Simplify an existing logo SVG for small sizes, remove fine details that break at 16Ã16, ensure the icon reads clearly at every target size
Monogram generation â Render initials using a bold, legible font on a branded background, ensure letterforms are crisp at 16Ã16 and 32Ã32
Branded shape â Create a geometric shape (circle, rounded square, shield) filled with the brand color, optionally with an embedded initial or symbol

For all approaches:

Define the primary color and background color
Choose a shape mask (square, rounded square, circle) for platform-specific variants
Plan the SVG source that will serve as the master from which all raster sizes are derived

Step 5: Generate Favicon Assets

Produce the complete favicon set from the master SVG:

File	Size	Purpose
`favicon.ico`	16Ã16, 32Ã32, 48Ã48	Legacy browser fallback (multi-size ICO)
`favicon.svg`	Scalable	Modern browsers, supports dark mode via `prefers-color-scheme`
`favicon-16x16.png`	16Ã16	PNG fallback for older browsers
`favicon-32x32.png`	32Ã32	Standard browser tab icon
`apple-touch-icon.png`	180Ã180	iOS home screen bookmark
`android-chrome-192x192.png`	192Ã192	Android home screen icon
`android-chrome-512x512.png`	512Ã512	Android splash screen / PWA install

For the SVG favicon:

Use prefers-color-scheme media query for automatic dark mode adaptation
Keep the SVG minimal â no embedded fonts, no external references
Ensure crisp rendering at small sizes with pixel-aligned paths

Step 6: Generate HTML Meta Tags

Produce the complete <head> snippet for all icon references:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Generate the site.webmanifest file:

{
  "name": "{Project Name}",
  "short_name": "{Short Name}",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "{brand-hex}",
  "background_color": "{background-hex}",
  "display": "standalone"
}

Step 7: Generate Output

Save output to /claudedocs/favicon-gen_{project}_{YYYY-MM-DD}.md
Follow naming conventions in ../OUTPUT_CONVENTIONS.md
Output includes:
- Master SVG source code
- Instructions or scripts for generating raster formats from the SVG
- Complete HTML <head> snippet
- site.webmanifest contents
- File placement guide (where each file goes in the project)

Step 8: Update Memory

Follow Standard Memory Update for skill="favicon-gen". Store brand assets, generation approach, and project preferences.

Compliance Checklist

Before completing, verify:

All mandatory workflow steps executed in order
Standard Memory Loading pattern followed (Step 2)
Standard Context Loading pattern followed (Step 3)
Favicon strategy determined and documented (Step 4)
All required favicon formats generated (Step 5)
HTML meta tags and web manifest produced (Step 6)
Output saved with standard naming convention
Standard Memory Update pattern followed (Step 8)

Version History

Version	Date	Changes
1.0.0	2026-02-12	Initial release â logo extraction, monogram generation, branded shapes, full format output

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台