favicon_skill

This skill generates a complete favicon set from a source image, updates project HTML, and configures a manifest for consistent branding across platforms.

Shell

147

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill brianlovin/claude-config --skill favicon

SKILL.md8.6 KB

Overview

This skill generates a complete set of favicon assets from a single source image and inserts or updates the necessary HTML/manifest entries for a web project. It automates detection of common frameworks, places files in the correct static assets directory, and creates or updates site.webmanifest and layout/head markup. Use it to quickly add consistent, multi-resolution favicons and manifest support to a project.

How this skill works

The skill validates the source image and checks ImageMagick v7 availability. It detects the project type by scanning for framework-specific files, chooses the static assets directory (or uses existing favicon locations), and derives an app name from an existing manifest, package.json, Rails config, or the directory name. It runs ImageMagick commands to produce ICO and PNG variants, copies SVG if provided, writes or updates site.webmanifest, and updates the appropriate layout or index.html with favicon link tags.

When to use it

Setting up favicons for a new web project
Replacing or standardizing existing favicon assets
Adding PWA manifest icons and apple-touch configuration
Preparing icons for multiple platforms and resolutions
Automating favicon generation during project setup or CI pipeline

Best practices

Ensure ImageMagick v7+ is installed before running the skill
Provide a high-resolution square source image (SVG preferred) for best quality
Confirm the detected static assets directory if project structure is ambiguous
Back up existing favicon files before overwriting in critical projects
Preserve existing manifest theme/background/display values when updating site.webmanifest

Example use cases

Convert a project logo.svg into favicon.ico, apple-touch-icon.png, and PNG manifest icons and update index.html
Add favicons to a Next.js app by updating app/layout.tsx metadata and creating site.webmanifest
Generate icons for a Rails app and insert tags into app/views/layouts/application.html.erb
Produce favicon files for a static HTML site and instruct how to add head tags manually
Run in a CI job to regenerate favicons from a single updated source image

FAQ

The skill will stop and instruct to install ImageMagick v7+. On macOS use 'brew install imagemagick'; on Debian/Ubuntu use 'sudo apt install imagemagick'.

Will existing favicon files be overwritten?

Yes — existing files in the chosen static directory will be replaced. The skill reports which files were overwritten; back up important files first.

How is the app name chosen for site.webmanifest?

It prefers an existing site.webmanifest name, then package.json name, then Rails application module, then the current directory name as a fallback. The name is converted to title case.