favicon-gen

Name: favicon-gen
Author: jezweb

1.9kinstalls96forks

How to install favicon-gen?

jezweb/claude-skills/favicon-gen

$npx -y skills add jezweb/claude-skills --skill favicon-gen

Installs into the current project.

Summary

Generate custom favicons from logos, text, or brand colours. Produces favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, and web manifest. Use whenever the user wants a favicon, mentions replacing a CMS default favicon, converting a logo into a favicon, creating br

Files · 1

View on GitHub

SKILL.md

1	# Favicon Generator
2
3	Generate a complete favicon package from a logo, initials, or brand colours. Produces all required formats and HTML integration code.
4
5	## Workflow
6
7	### Step 1: Choose Your Approach
8
9	```
10	Have a logo with an icon element?
11	YES -> Extract icon from logo
12	NO -> Have text/initials?
13	YES -> Create monogram favicon
14	NO -> Use branded shape
15	```
16
17	### Step 2: Create Source SVG
18
19	Extracted icon — copy icon paths from logo, centre in 32x32 viewBox, simplify for small sizes.
20
21	Monogram — use a template from `assets/`:
22	```xml
23	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
24	<circle cx="16" cy="16" r="16" fill="#0066cc"/>
25	<text x="16" y="21" font-size="16" font-weight="bold"
26	text-anchor="middle" fill="#ffffff" font-family="sans-serif">AC</text>
27	</svg>
28	```
29
30	Branded shape — circle (universal), rounded square (modern), shield (security), hexagon (tech).
31
32	SVG templates available in `assets/` directory.
33
34	### Step 3: Generate All Formats
35
36	Requires ImageMagick (`convert` command). Install if needed: `brew install imagemagick` (macOS) or `apt install imagemagick` (Linux).
37
38	```bash
39	# ICO (16x16 + 32x32)
40	convert favicon.svg -define icon:auto-resize=16,32 favicon.ico
41
42	# Apple Touch Icon (180x180, SOLID background — transparent = black on iOS)
43	convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png
44
45	# Android/PWA icons
46	convert favicon.svg -resize 192x192 icon-192.png
47	convert favicon.svg -resize 512x512 icon-512.png
48	```
49
50	No ImageMagick? Use https://favicon.io to convert from the SVG instead.
51
52	### Step 4: Create Web Manifest
53
54	Copy and customise `assets/manifest.webmanifest`:
55	```json
56	{
57	"name": "Your Business Name",
58	"short_name": "Business",
59	"icons": [
60	{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
61	{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
62	],
63	"theme_color": "#0066cc",
64	"background_color": "#ffffff",
65	"display": "standalone"
66	}
67	```
68
69	### Step 5: Add HTML Tags
70
71	```html
72	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
73	<link rel="icon" type="image/x-icon" href="/favicon.ico">
74	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
75	<link rel="manifest" href="/site.webmanifest">
76	<meta name="theme-color" content="#0066cc">
77	```
78
79	Place all files in site root (`/public/` in Vite/React).
80
81	---
82
83	## Critical Rules
84
85	- Always generate ALL formats — SVG, ICO, apple-touch-icon, 192, 512, manifest
86	- iOS icons MUST have solid backgrounds — transparent = black square
87	- Always use bold font weight for monogram text (regular disappears at 16x16)
88	- Test at 16x16 — if it's not legible, simplify
89	- Never launch with CMS defaults (WordPress "W", etc.)
90
91	## Format Quick Reference
92
93	\| Format \| Size \| Transparency \| Purpose \|
94	\|--------\|------\|-------------\|---------\|
95	\| `favicon.svg` \| Vector \| Yes \| Modern browsers \|
96	\| `favicon.ico` \| 16+32 \| Yes \| Legacy browsers \|
97	\| `apple-touch-icon.png` \| 180x180 \| No \| iOS home screen \|
98	\| `icon-192.png` \| 192x192 \| Yes \| Android \|
99	\| `icon-512.png` \| 512x512 \| Yes \| PWA \|
100
101	## Asset Files
102
103	- `assets/favicon-svg-circle.svg` — Circle monogram template
104	- `assets/favicon-svg-square.svg` — Rounded square template
105	- `assets/favicon-svg-shield.svg` — Shield template
106	- `assets/manifest.webmanifest` — Web manifest template
107
108	## Reference Files
109
110	- `references/format-guide.md` — Complete format specifications
111	- `references/extraction-methods.md` — Logo icon extraction steps
112	- `references/monogram-patterns.md` — Advanced monogram design
113	- `references/shape-templates.md` — Industry-specific shapes with SVG code

People who liked this also viewed

6 picks

Type

favicon-gen

1.9kinstalls96forks

View on GitHub

How to install favicon-gen?

jezweb/claude-skills/favicon-gen

$npx -y skills add jezweb/claude-skills --skill favicon-gen

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Favicon Generator
2
3	Generate a complete favicon package from a logo, initials, or brand colours. Produces all required formats and HTML integration code.
4
5	## Workflow
6
7	### Step 1: Choose Your Approach
8
9	```
10	Have a logo with an icon element?
11	YES -> Extract icon from logo
12	NO -> Have text/initials?
13	YES -> Create monogram favicon
14	NO -> Use branded shape
15	```
16
17	### Step 2: Create Source SVG
18
19	Extracted icon — copy icon paths from logo, centre in 32x32 viewBox, simplify for small sizes.
20
21	Monogram — use a template from `assets/`:
22	```xml
23	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
24	<circle cx="16" cy="16" r="16" fill="#0066cc"/>
25	<text x="16" y="21" font-size="16" font-weight="bold"
26	text-anchor="middle" fill="#ffffff" font-family="sans-serif">AC</text>
27	</svg>
28	```
29
30	Branded shape — circle (universal), rounded square (modern), shield (security), hexagon (tech).
31
32	SVG templates available in `assets/` directory.
33
34	### Step 3: Generate All Formats
35
36	Requires ImageMagick (`convert` command). Install if needed: `brew install imagemagick` (macOS) or `apt install imagemagick` (Linux).
37
38	```bash
39	# ICO (16x16 + 32x32)
40	convert favicon.svg -define icon:auto-resize=16,32 favicon.ico
41
42	# Apple Touch Icon (180x180, SOLID background — transparent = black on iOS)
43	convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png
44
45	# Android/PWA icons
46	convert favicon.svg -resize 192x192 icon-192.png
47	convert favicon.svg -resize 512x512 icon-512.png
48	```
49
50	No ImageMagick? Use https://favicon.io to convert from the SVG instead.
51
52	### Step 4: Create Web Manifest
53
54	Copy and customise `assets/manifest.webmanifest`:
55	```json
56	{
57	"name": "Your Business Name",
58	"short_name": "Business",
59	"icons": [
60	{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
61	{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
62	],
63	"theme_color": "#0066cc",
64	"background_color": "#ffffff",
65	"display": "standalone"
66	}
67	```
68
69	### Step 5: Add HTML Tags
70
71	```html
72	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
73	<link rel="icon" type="image/x-icon" href="/favicon.ico">
74	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
75	<link rel="manifest" href="/site.webmanifest">
76	<meta name="theme-color" content="#0066cc">
77	```
78
79	Place all files in site root (`/public/` in Vite/React).
80
81	---
82
83	## Critical Rules
84
85	- Always generate ALL formats — SVG, ICO, apple-touch-icon, 192, 512, manifest
86	- iOS icons MUST have solid backgrounds — transparent = black square
87	- Always use bold font weight for monogram text (regular disappears at 16x16)
88	- Test at 16x16 — if it's not legible, simplify
89	- Never launch with CMS defaults (WordPress "W", etc.)
90
91	## Format Quick Reference
92
93	\| Format \| Size \| Transparency \| Purpose \|
94	\|--------\|------\|-------------\|---------\|
95	\| `favicon.svg` \| Vector \| Yes \| Modern browsers \|
96	\| `favicon.ico` \| 16+32 \| Yes \| Legacy browsers \|
97	\| `apple-touch-icon.png` \| 180x180 \| No \| iOS home screen \|
98	\| `icon-192.png` \| 192x192 \| Yes \| Android \|
99	\| `icon-512.png` \| 512x512 \| Yes \| PWA \|
100
101	## Asset Files
102
103	- `assets/favicon-svg-circle.svg` — Circle monogram template
104	- `assets/favicon-svg-square.svg` — Rounded square template
105	- `assets/favicon-svg-shield.svg` — Shield template
106	- `assets/manifest.webmanifest` — Web manifest template
107
108	## Reference Files
109
110	- `references/format-guide.md` — Complete format specifications
111	- `references/extraction-methods.md` — Logo icon extraction steps
112	- `references/monogram-patterns.md` — Advanced monogram design
113	- `references/shape-templates.md` — Industry-specific shapes with SVG code

People who liked this also viewed

6 picks

Type