Generate Complete Favicon Set and Update Project HTML

This skill generates a complete set of favicons from a single source image and updates the project's HTML with the appropriate link tags. It validates the source image, detects the project type, writes the right favicon outputs into the framework-specific static directory, and produces a web manifest. It takes the path to the source image as its argument and is limited to a few shell tools: ImageMagick, which, cp, and mkdir.

The eight steps:

1. Validate the source image. It must exist and be PNG, JPG, JPEG, SVG, WEBP, or GIF. If the source is an SVG, it is also copied as favicon.svg.
2. Detect the project type and static assets directory. The table covers Rails, Next.js, Astro, Vite, Create React App, and Vue CLI (public), Gatsby, SvelteKit, and Hugo (static), Jekyll (the root next to index.html), Angular (src/assets), Eleventy (check the site output or root), and plain static HTML (next to index.html). If existing favicon files are found, their location wins regardless of framework detection. When not fully confident about where assets belong, the assistant should ask the user.
3. Determine the app name, in priority order: an existing site.webmanifest, the name field in package.json, the Rails application module name, or the directory name as a fallback, converted to title case.
4. Ensure the static directory exists, creating it if needed.
5. Generate the files with ImageMagick: a multi-resolution favicon.ico (16, 32, and 48 pixels), favicon-96x96.png, apple-touch-icon.png at 180 pixels, and two web app manifest icons at 192 and 512 pixels.
6. Create or update site.webmanifest, preserving existing theme color, background color, and display values while updating the name, short name, and icons.
7. Update the layout: the Rails application layout, the Next.js layout metadata export, or index.html for static sites. If no project is detected, skip HTML edits and tell the user which tags to add manually.
8. Report the detected framework, directory used, files generated, app name, layout updated, and any overwritten files.

Use it when you need a full favicon set from one source image, want the assets placed in the correct framework static directory, and want the HTML link tags updated in the same workflow.

Do not use it without ImageMagick version 7 or newer; the skill checks with the which command and stops with installation instructions (Homebrew on macOS, apt on Linux) if it is missing. It also stops if the source image does not exist or is not a supported format. One important detail: the background none flag must come before the input file so transparency is preserved when rendering SVGs, otherwise the result gets a white background.

The input is a path to a source image. Outputs are the icon files, the manifest, and the edited layout. An example command for the Apple touch icon:

magick -background none "$1" -resize 180x180 -alpha on [STATIC_DIR]/apple-touch-icon.png

If the source is not an SVG, the SVG icon link (or Next.js icon entry) is omitted. Existing icon, shortcut icon, apple-touch-icon, and manifest tags are removed before new ones are added near the top of the head section.

ImageMagick for rendering, plus framework conventions for Rails, Next.js, Gatsby, SvelteKit, Astro, Hugo, Jekyll, Vite, Create React App, Vue CLI, Angular, Eleventy, and static HTML. Error handling is explicit: if the layout file cannot be found, files are still generated and the user is told how to add the tags by hand, and ImageMagick failures are reported with the specific error message.

It is for web developers who want a one-command favicon setup that works across frameworks without hand-editing icon sizes, manifests, and link tags.