majesticlabs-dev Favicon Generator Skill
Purpose: Generate a complete set of favicons from a source image and wire them into the project's HTML layout, web manifest, and assets directory.
Supported source formats: PNG, JPG, JPEG, SVG, WEBP, GIF
When to Use
- User asks to generate favicons or icons from an image
- New project setup needs favicon assets
- Replacing an outdated favicon set
- Adding PWA-compatible icons (
web-app-manifest-*.png)
Prerequisites
ImageMagick v7+ required. Verify with:
which magick
If missing:
- macOS:
brew install imagemagick - Linux:
sudo apt install imagemagick
Workflow
1. Validate Source Image
- Check source file exists
- Verify supported format (PNG, JPG, JPEG, SVG, WEBP, GIF)
- Note if SVG (gets special handling — direct copy +
<link rel="icon" type="image/svg+xml">)
If invalid, report error and stop.
2. Detect Framework
Check for marker files to identify framework and assets directory:
| Framework | Marker File | Assets Directory |
|---|---|---|
| Rails | config/routes.rb |
public/ |
| Next.js | next.config.* |
public/ |
| Gatsby | gatsby-config.* |
static/ |
| SvelteKit | svelte.config.* |
static/ |
| Astro | astro.config.* |
public/ |
| Hugo | hugo.toml or hugo.yaml |
static/ |
| Jekyll | _config.yml |
Root directory |
| Vite | vite.config.* |
public/ |
| Create React App | package.json with react-scripts |
public/ |
| Vue CLI | vue.config.* |
public/ |
| Angular | angular.json |
src/assets/ |
| Eleventy | .eleventy.js or eleventy.config.* |
Root or _site/ |
| Static HTML | index.html in root |
Same directory as HTML |
Priority rule: If existing favicon files found (favicon.ico, apple-touch-icon.png), use their location regardless of framework detection.
If uncertain about asset placement → use AskUserQuestion to confirm target directory.
3. Resolve App Name
Check sources in order (use first found):
- Existing
site.webmanifest→namefield package.json→namefield- Rails
config/application.rb→ module name - Current directory name
Convert to title case for display.
4. Generate Favicon Assets
Run ImageMagick commands (preserve alpha with -alpha on -background none):
# Multi-resolution ICO (16x16, 32x32, 48x48)
magick "<source>" -alpha on -background none \
\( -clone 0 -resize 16x16 \) \
\( -clone 0 -resize 32x32 \) \
\( -clone 0 -resize 48x48 \) \
-delete 0 "<target>/favicon.ico"
# PNG variants
magick "<source>" -alpha on -background none -resize 96x96 "<target>/favicon-96x96.png"
magick "<source>" -alpha on -background none -resize 180x180 "<target>/apple-touch-icon.png"
magick "<source>" -alpha on -background none -resize 192x192 "<target>/web-app-manifest-192x192.png"
magick "<source>" -alpha on -background none -resize 512x512 "<target>/web-app-manifest-512x512.png"
If source is SVG, also copy directly:
cp "<source>" "<target>/favicon.svg"
5. Generate or Update Web Manifest
Create or update site.webmanifest in target directory.
If exists: preserve theme_color, background_color, display values.
{
"name": "<app-name>",
"short_name": "<app-name>",
"icons": [
{ "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
{ "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
6. Update HTML Layout
Rails → Edit app/views/layouts/application.html.erb:
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="<app-name>" />
<link rel="manifest" href="/site.webmanifest" />
Next.js → Edit app/layout.tsx or app/layout.js metadata export:
export const metadata = {
// ... existing metadata
icons: {
icon: [
{ url: '/favicon.ico', sizes: '48x48' },
{ url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
{ url: '/favicon.svg', type: 'image/svg+xml' },
],
apple: [
{ url: '/apple-touch-icon.png', sizes: '180x180' },
],
},
manifest: '/site.webmanifest',
appleWebApp: {
title: '<app-name>',
},
}
Static HTML → Edit index.html <head>:
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="<app-name>" />
<link rel="manifest" href="/site.webmanifest" />
Other/Unknown → Output HTML snippet for user to add manually.
Note: Omit SVG-related tags if source was not SVG format.
7. Report Summary
## Favicon Generation Complete
- **Framework:** <detected-framework>
- **Assets directory:** <target-path>
- **App name:** <resolved-name>
### Generated Files
- favicon.ico (16x16, 32x32, 48x48)
- favicon-96x96.png
- apple-touch-icon.png (180x180)
- web-app-manifest-192x192.png
- web-app-manifest-512x512.png
- site.webmanifest
[- favicon.svg (if source was SVG)]
### Updated Files
- <layout-file-path>
### Overwrites
[List any existing files that were replaced]