favicon-gen
Favicon-gen creates a complete favicon package including SVG, ICO, Apple touch icon, and PWA icons from logos, text, or brand colors. Use it when users need to generate favicons, replace CMS defaults, convert logos to favicons, create branded initials, or fix missing or incorrectly displaying favicons across devices and platforms.
git clone --depth 1 https://github.com/jezweb/claude-skills /tmp/favicon-gen && cp -r /tmp/favicon-gen/plugins/design-assets/skills/favicon-gen ~/.claude/skills/favicon-genSKILL.md
# Favicon Generator
Generate a complete favicon package from a logo, initials, or brand colours. Produces all required formats and HTML integration code.
## Workflow
### Step 1: Choose Your Approach
```
Have a logo with an icon element?
YES -> Extract icon from logo
NO -> Have text/initials?
YES -> Create monogram favicon
NO -> Use branded shape
```
### Step 2: Create Source SVG
**Extracted icon** — copy icon paths from logo, centre in 32x32 viewBox, simplify for small sizes.
**Monogram** — use a template from `assets/`:
```xml
<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.
### Step 3: Generate All Formats
Requires ImageMagick (`convert` command). Install if needed: `brew install imagemagick` (macOS) or `apt install imagemagick` (Linux).
```bash
# 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.
### Step 4: Create Web Manifest
Copy and customise `assets/manifest.webmanifest`:
```json
{
"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"
}
```
### Step 5: Add HTML Tags
```html
<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).
---
## Critical Rules
- **Always generate ALL formats** — SVG, ICO, apple-touch-icon, 192, 512, manifest
- **iOS icons MUST have solid backgrounds** — transparent = black square
- **Always use bold font weight** for monogram text (regular disappears at 16x16)
- **Test at 16x16** — if it's not legible, simplify
- **Never launch with CMS defaults** (WordPress "W", etc.)
## Format Quick Reference
| 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 |
## Asset Files
- `assets/favicon-svg-circle.svg` — Circle monogram template
- `assets/favicon-svg-square.svg` — Rounded square template
- `assets/favicon-svg-shield.svg` — Shield template
- `assets/manifest.webmanifest` — Web manifest template
## Reference Files
- `references/format-guide.md` — Complete format specifications
- `references/extraction-methods.md` — Logo icon extraction steps
- `references/monogram-patterns.md` — Advanced monogram design
- `references/shape-templates.md` — Industry-specific shapes with SVG codeGenerate AI images using Gemini or GPT APIs directly. Covers model selection (Gemini for scenes; GPT Image 2 for text rendering, batch variations, multi-reference compositing; GPT Image 1.5 for transparent icons), the 5-part prompting framework, API calling patterns, multi-turn editing, and quality assurance. Produces photorealistic scenes, icons, illustrations, OG images, posters, infographics, and product shots. Use when building websites that need images, creating marketing assets, or generating visual content. Triggers: 'generate image', 'ai image', 'create hero image', 'make an icon', 'generate illustration', 'create og image', 'poster', 'infographic', 'image variations', 'gpt-image-2', 'ai art', 'image generation'.
Generate complete user documentation for a web app with screenshots. Browses the app via browser automation, screenshots every screen, and produces a structured user guide with step-by-step instructions, annotated screenshots, workflow diagrams, and reference tables. Supports quick (key screens), standard (all pages), thorough (every state and flow), and exhaustive (publishable documentation suite). Triggers: 'document the app', 'user guide', 'app documentation', 'screenshot docs', 'generate user docs', 'help docs', 'how-to guide', 'write the docs'.
Australian business English for professional writing — warm, direct, EN-AU spelling (colour, organise, centre), no filler words. Use whenever the user is writing for an Australian audience: emails, chat messages, proposals, client communications, blog posts, web copy, or any business writing. Apply to drafting, editing, and tone-checking professional text.
Write compelling award submissions, grant applications, and competition entries. Maps achievements to selection criteria using evidence-based narratives. Use whenever the user is applying for a business award (Telstra, chamber of commerce, industry awards), a grant, a competition, or any submission demonstrating merit against defined criteria.
Get a second opinion from leading AI models on code, architecture, strategy, prompting, or anything. Queries models via OpenRouter, Gemini, or OpenAI APIs. Supports single opinion, multi-model consensus, and devil's advocate patterns. Use whenever the user says 'brains trust', 'second opinion', 'ask gemini', 'ask gpt', 'peer review', 'consult another model', 'challenge this', or 'devil's advocate'.
Hit the Cloudflare REST API directly for operations that wrangler and MCP can't handle well. Bulk DNS, custom hostnames, email routing, cache purge, WAF rules, redirect rules, zone settings, Worker routes, D1 cross-database queries, R2 bulk operations, KV bulk read/write, Vectorize queries, Queues, and fleet-wide resource audits. Produces curl commands or scripts. Triggers: 'cloudflare api', 'bulk dns', 'custom hostname', 'email routing', 'cache purge', 'waf rule', 'd1 query', 'r2 bucket', 'kv bulk', 'vectorize query', 'audit resources', 'fleet operation'.
Scaffold and deploy Cloudflare Workers with Hono routing, Vite plugin, and Static Assets. Describe project, scaffold structure, configure bindings, deploy. Use whenever the user wants to create a Worker project, set up Hono on Cloudflare, configure D1 / R2 / KV / Queues bindings, or troubleshoot Worker export syntax, API route conflicts, HMR issues, or deployment failures.
Run an independent code review using the OpenAI Codex CLI in headless mode. Gets a second opinion from a different model family (the current Codex models) on recent changes, a PR, a commit, or the whole app — covering bugs, regressions, security, data consistency, UX/state bugs, performance risks, and testing gaps. Saves a severity-prioritised report to .jez/reviews/. Triggers: 'codex review', 'review with codex', 'independent code review', 'what does codex think', 'get codex to review'.