— name: favicon argument-hint: [path to source image] description: Generate favicons from a source image allowed-tools: Bash(magick *), Bash(which *), Bash(cp *), Bash(mkdir *) context: fork risk: unknown source: community metadata: author: Shpigford version: "1.0" — Generate a complete set of favicons from the source image at `$1` and update the project's HTML with the appropriate link tags. ## When to Use – You need to generate a complete favicon set from a single source image. – The task includes placing the assets in the correct framework-specific static directory and updating HTML link tags. – You want one workflow that validates the source image, detects the project type, and writes the right favicon outputs. ## Prerequisites First, verify ImageMagick v7+ is installed by running: “`bash which magick “` If not found, stop and instruct the user to install it: – **macOS**: `brew install imagemagick` – **Linux**: `sudo apt install imagemagick` ## Step 1: Validate Source Image 1. Verify the source image exists at the provided path: `$1` 2. Check the file extension is a supported format (PNG, JPG, JPEG, SVG, WEBP, GIF) 3. If the file doesn't exist or isn't a valid image format, report the error and stop Note whether the source is an SVG file – if so, it will also be copied as `favicon.svg`. ## Step 2: Detect Project Type and Static Assets Directory Detect the project type and determine where static assets should be placed. Check in this order: | Framework | Detection | Static Assets Directory | |———–|———–|————————| | **Rails** | `config/routes.rb` exists | `public/` | | **Next.js** | `next.config.*` exists | `public/` | | **Gatsby** | `gatsby-config.*` exists | `static/` | | **SvelteKit** | `svelte.config.*` exists | `static/` | | **Astro** | `astro.config.*` exists | `public/` | | **Hugo** | `hugo.toml` or `config.toml` with Hugo markers | `static/` | | **Jekyll** | `_config.yml` with Jekyll markers | Root directory (same as `index.html`) | | **Vite** | `vite.config.*` exists | `public/` | | **Create React App** | `package.json` has `react-scripts` dependency | `public/` | | **Vue CLI** | `vue.config.*` exists | `public/` | | **Angular** | `angular.json` exists | `src/assets/` | | **Eleventy** | `.eleventy.js` or `eleventy.config.*` exists | Check `_site` output or root | | **Static HTML** | `index.html` in root | Same directory as `index.html` | **Important**: If existing favicon files are found (e.g., `favicon.ico`, `apple-touch-icon.png`), use their location as the target directory regardless of framework detection. Report the detected project type and the static assets directory that will be used. **When in doubt, ask**: If you are not 100% confident about where static assets should be placed (e.g., ambiguous project structure, multiple potential locations, unfamiliar framework), use `AskUserQuestionTool` to confirm the target directory before proceeding. It's better to ask than to put files in the wrong place. ## Step 3: Determine App Name Find the app name from these sources (in priority order): 1. **Existing `site.webmanifest`** – Check the detected static assets directory for an existing manifest and extract the `name` field 2. **`package.json`** – Extract the `name` field if it exists 3. **Rails `config/application.rb`** – Extract the module name (e.g., `module MyApp` → "MyApp") 4. **Directory name** – Use the current working directory name as fallback Convert the name to title case if needed (e.g., "my-app" → "My App"). ## Step 4: Ensure Static Assets Directory Exists Check if the detected static assets directory exists. If not, create it. ## Step 5: Generate Favicon Files Run these ImageMagick commands to generate all favicon files. Replace `[STATIC_DIR]` with the detected static assets directory from Step 2. **Important**: The `-background none` flag must come BEFORE the input file to properly preserve transparency when rendering SVGs. Placing it after the input will result in a white background. ### favicon.ico (multi-resolution: 16×16, 32×32, 48×48) “`bash magick -background none "$1" \ \( -clone 0 -resize 16×16 \) \ \( -clone 0 -resize 32×32 \) \ \( -clone 0 -resize 48×48 \) \ -delete 0 -alpha on \ [STATIC_DIR]/favicon.ico “` ### favicon-96×96.png “`bash magick -background none "$1" -resize 96×96 -alpha on [STATIC_DIR]/favicon-96×96.png “` ### apple-touch-icon.png (180×180) “`bash magick -background none "$1" -resize 180×180 -alpha on [STATIC_DIR]/apple-touch-icon.png “` ### web-app-manifest-192×192.png “`bash magick -background none "$1" -resize 192×192 -alpha on [STATIC_DIR]/web-app-manifest-192×192.png “` ### web-app-manifest-512×512.png “`bash magick -background none "$1" -resize 512×512 -alpha on [STATIC_DIR]/web-app-manifest-512×512.png “` ### favicon.svg (only if source is SVG) If the source file has a `.svg` extension, copy it: “`bash cp "$1" [STATIC_DIR]/favicon.svg “` ## Step 6: Create/Update site.webmanifest Create or update `[STATIC_DIR]/site.webmanifest` with this content (substitute the detected app name): “`json { "name": "[APP_NAME]", "short_name": "[APP_NAME]", "icons": [ { "src": "/web-app-manifest-192×192.png", "sizes": "192×192", "type": "image/png", "purpose": "maskable" }, { "src": "/web-app-manifest-512×512.png", "sizes": "512×512", "type": "image/png", "purpose": "maskable" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" } “` If `site.webmanifest` already exists in the static directory, preserve the existing `theme_color`, `background_color`, and `display` values while updating the `name`, `short_name`, and `icons` array. ## Step 7: Update HTML/Layout Files Based on the detected project type, update the appropriate file. Adjust the `href` paths based on where the static assets directory is relative to the web root: – If static files are in `public/` or `static/` and served from root → use `/favicon.ico` – If static files are in `src/assets/` → use `/assets/favicon.ico` – If static files are in the same directory as HTML → use `./favicon.ico` or just `favicon.ico` ### For Rails Projects Edit `app/views/layouts/application.html.erb`. Find the `<head>` section and add/replace favicon-related tags with: “`html <link rel="icon" type="image/png" href="/favicon-96×96.png" sizes="96×96" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" sizes="180×180" href="/apple-touch-icon.png" /> <meta name="apple-mobile-web-app-title" content="[APP_NAME]" /> <link rel="manifest" href="/site.webmanifest" /> “` **Important**: – If the source was NOT an SVG, omit the `<link rel="icon" type="image/svg+xml" href="/favicon.svg" />` line – Remove any existing `<link rel="icon"`, `<link rel="shortcut icon"`, `<link rel="apple-touch-icon"`, or `<link rel="manifest"` tags before adding the new ones – Place these tags near the top of the `<head>` section, after `<meta charset>` and `<meta name="viewport">` if present ### For Next.js Projects Edit the detected layout file (`app/layout.tsx` or `src/app/layout.tsx`). Update or add the `metadata` export to include icons configuration: “`typescript export const metadata: Metadata = { // … keep existing metadata fields icons: { icon: [ { url: '/favicon.ico' }, { url: '/favicon-96×96.png', sizes: '96×96', type: 'image/png' }, { url: '/favicon.svg', type: 'image/svg+xml' }, ], shortcut: '/favicon.ico', apple: '/apple-touch-icon.png', }, manifest: '/site.webmanifest', appleWebApp: { title: '[APP_NAME]', }, }; “` **Important**: – If the source was NOT an SVG, omit the `{ url: '/favicon.svg', type: 'image/svg+xml' }` entry from the icon array – If metadata export doesn't exist, create it with just the icons-related fields – If metadata export exists, merge the icons configuration with existing fields ### For Static HTML Projects Edit the detected `index.html` file. Add the same HTML as Rails within the `<head>` section. ### If No Project Detected Skip HTML updates and inform the user they need to manually add the following to their HTML `<head>`: “`html <link rel="icon" type="image/png" href="/favicon-96×96.png" sizes="96×96" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" sizes="180×180" href="/apple-touch-icon.png" /> <meta name="apple-mobile-web-app-title" content="[APP_NAME]" /> <link rel="manifest" href="/site.webmanifest" /> “` ## Step 8: Summary Report completion with: – Detected project type and framework – Static assets directory used – List of files generated – App name used in manifest and HTML – Layout file updated (or note if manual update is needed) – Note if any existing files were overwritten ## Error Handling – If ImageMagick is not installed, provide installation instructions and stop – If the source image doesn't exist, report the exact path that was tried and stop – If ImageMagick commands fail, report the specific error message – If the layout file cannot be found for HTML updates, generate files anyway and instruct on manual HTML addition ## Limitations – Use this skill only when the task clearly matches the scope described above. – Do not treat the output as a substitute for environment-specific validation, testing, or expert review. – Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.