{"id":"favicon-gen","name":"favicon-gen","summary":"ロゴ、テキスト、ブランドカラーからカスタムファビコンを作成してください。favicon.svg、favicon.ico、apple-touch-icon.png、icon-192/512.png、ウェブマニフェストを生成します。","body":"# Favicon Generator\n\nGenerate a complete favicon package from a logo, initials, or brand colours. Produces all required formats and HTML integration code.\n\n## Workflow\n\n### Step 1: Choose Your Approach\n\n```\nHave a logo with an icon element?\n YES -> Extract icon from logo\n NO  -> Have text/initials?\n         YES -> Create monogram favicon\n         NO  -> Use branded shape\n```\n\n### Step 2: Create Source SVG\n\n**Extracted icon** — copy icon paths from logo, centre in 32x32 viewBox, simplify for small sizes.\n\n**Monogram** — use a template from `assets/`:\n```xml\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n  <circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"#0066cc\"/>\n  <text x=\"16\" y=\"21\" font-size=\"16\" font-weight=\"bold\"\n        text-anchor=\"middle\" fill=\"#ffffff\" font-family=\"sans-serif\">AC</text>\n</svg>\n```\n\n**Branded shape** — circle (universal), rounded square (modern), shield (security), hexagon (tech).\n\nSVG templates available in `assets/` directory.\n\n### Step 3: Generate All Formats\n\nRequires ImageMagick (`convert` command). Install if needed: `brew install imagemagick` (macOS) or `apt install imagemagick` (Linux).\n\n```bash\n# ICO (16x16 + 32x32)\nconvert favicon.svg -define icon:auto-resize=16,32 favicon.ico\n\n# Apple Touch Icon (180x180, SOLID background — transparent = black on iOS)\nconvert favicon.svg -resize 180x180 -background \"#0066cc\" -alpha remove apple-touch-icon.png\n\n# Android/PWA icons\nconvert favicon.svg -resize 192x192 icon-192.png\nconvert favicon.svg -resize 512x512 icon-512.png\n```\n\n**No ImageMagick?** Use https://favicon.io to convert from the SVG instead.\n\n### Step 4: Create Web Manifest\n\nCopy and customise `assets/manifest.webmanifest`:\n```json\n{\n  \"name\": \"Your Business Name\",\n  \"short_name\": \"Business\",\n  \"icons\": [\n    { \"src\": \"/icon-192.png\", \"sizes\": \"192x192\", \"type\": \"image/png\" },\n    { \"src\": \"/icon-512.png\", \"sizes\": \"512x512\", \"type\": \"image/png\" }\n  ],\n  \"theme_color\": \"#0066cc\",\n  \"background_color\": \"#ffffff\",\n  \"display\": \"standalone\"\n}\n```\n\n### Step 5: Add HTML Tags\n\n```html\n<link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\">\n<link rel=\"icon\" type=\"image/x-icon\" href=\"/favicon.ico\">\n<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\">\n<link rel=\"manifest\" href=\"/site.webmanifest\">\n<meta name=\"theme-color\" content=\"#0066cc\">\n```\n\nPlace all files in site root (`/public/` in Vite/React).\n\n---\n\n## Critical Rules\n\n- **Always generate ALL formats** — SVG, ICO, apple-touch-icon, 192, 512, manifest\n- **iOS icons MUST have solid backgrounds** — transparent = black square\n- **Always use bold font weight** for monogram text (regular disappears at 16x16)\n- **Test at 16x16** — if it's not legible, simplify\n- **Never launch with CMS defaults** (WordPress \"W\", etc.)\n\n## Format Quick Reference\n\n| Format | Size | Transparency | Purpose |\n|--------|------|-------------|---------|\n| `favicon.svg` | Vector | Yes | Modern browsers |\n| `favicon.ico` | 16+32 | Yes | Legacy browsers |\n| `apple-touch-icon.png` | 180x180 | **No** | iOS home screen |\n| `icon-192.png` | 192x192 | Yes | Android |\n| `icon-512.png` | 512x512 | Yes | PWA |\n\n## Asset Files\n\n- `assets/favicon-svg-circle.svg` — Circle monogram template\n- `assets/favicon-svg-square.svg` — Rounded square template\n- `assets/favicon-svg-shield.svg` — Shield template\n- `assets/manifest.webmanifest` — Web manifest template\n\n## Reference Files\n\n- `references/format-guide.md` — Complete format specifications\n- `references/extraction-methods.md` — Logo icon extraction steps\n- `references/monogram-patterns.md` — Advanced monogram design\n- `references/shape-templates.md` — Industry-specific shapes with SVG code","author":"@jezweb","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/jezweb/claude-skills/tree/main/plugins/design-assets/skills/favicon-gen","license":"MIT","category":"writing","lang":"en","tokens":1008,"stars":0,"calls30d":2,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"assets/manifest.webmanifest","size":509,"sha256":"c2084678ce7b1ee6731d452cb34ebedff3700ea6a92e68929b898668f857f168"},{"path":"references/extraction-methods.md","size":12460,"sha256":"b7934d747d2c47cd0c27d6134360b67b1e20514993aa315a5b780e725170aa3d"},{"path":"references/format-guide.md","size":14216,"sha256":"0e591ad6128d482ac0adc1c46aea10442634137a9518a3ab368081bdb330f7c8"},{"path":"references/monogram-patterns.md","size":16762,"sha256":"77865cd579ad5f1f3f723e4645428cbfac2d3b10f79a5dea3f415cd65c2d8969"},{"path":"references/shape-templates.md","size":14893,"sha256":"94c0b3d61b9232e3d990343895a3ef9f8daf35e6c7947917ad1879fd6df5b33a"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["caniuse.com","cloudconvert.com","developer.apple.com","favicon.io","fonts.google.com","heroicons.com","lucide.dev","material.io","realfavicongenerator.net","validator.w3.org","w3c.github.io","web.dev","webaim.org","www.smashingmagazine.com"]}}