Generate custom favicons from logos, text, or brand colours. Produces all required formats: favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, and web manifest. Use when initialising websites, replacing CMS default favicons, converting logos to favicons, creating branded icons from initials, or troubleshooting favicon not displaying, iOS black square, or missing manifest.
Generates complete favicon packages from logos, text, or colors, producing all required formats and integration code.
npx claudepluginhub jezweb/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/favicon-svg-circle.svgassets/favicon-svg-shield.svgassets/favicon-svg-square.svgassets/manifest.webmanifestreferences/extraction-methods.mdreferences/format-guide.mdreferences/monogram-patterns.mdreferences/shape-templates.mdGenerate a complete favicon package from a logo, initials, or brand colours. Produces all required formats and HTML integration code.
Have a logo with an icon element?
YES -> Extract icon from logo
NO -> Have text/initials?
YES -> Create monogram favicon
NO -> Use branded shape
Extracted icon — copy icon paths from logo, centre in 32x32 viewBox, simplify for small sizes.
Monogram — use a template from assets/:
<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>
Branded shape — circle (universal), rounded square (modern), shield (security), hexagon (tech).
SVG templates available in assets/ directory.
Requires ImageMagick (convert command). Install if needed: brew install imagemagick (macOS) or apt install imagemagick (Linux).
# ICO (16x16 + 32x32)
convert favicon.svg -define icon:auto-resize=16,32 favicon.ico
# Apple Touch Icon (180x180, SOLID background — transparent = black on iOS)
convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png
# Android/PWA icons
convert favicon.svg -resize 192x192 icon-192.png
convert favicon.svg -resize 512x512 icon-512.png
No ImageMagick? Use https://favicon.io to convert from the SVG instead.
Copy and customise assets/manifest.webmanifest:
{
"name": "Your Business Name",
"short_name": "Business",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#0066cc",
"background_color": "#ffffff",
"display": "standalone"
}
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0066cc">
Place all files in site root (/public/ in Vite/React).
| Format | Size | Transparency | Purpose |
|---|---|---|---|
favicon.svg | Vector | Yes | Modern browsers |
favicon.ico | 16+32 | Yes | Legacy browsers |
apple-touch-icon.png | 180x180 | No | iOS home screen |
icon-192.png | 192x192 | Yes | Android |
icon-512.png | 512x512 | Yes | PWA |
assets/favicon-svg-circle.svg — Circle monogram templateassets/favicon-svg-square.svg — Rounded square templateassets/favicon-svg-shield.svg — Shield templateassets/manifest.webmanifest — Web manifest templatereferences/format-guide.md — Complete format specificationsreferences/extraction-methods.md — Logo icon extraction stepsreferences/monogram-patterns.md — Advanced monogram designreferences/shape-templates.md — Industry-specific shapes with SVG codeExpert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.