skill CX Codex

favicon — Claude Code skill: what it does, how to install

Q: How do I install favicon in Claude Code?

Run `npx skills add brianlovin/agent-config --skill favicon -a claude-code`.

Q: What does the favicon skill do?

It builds favicon files from one image, creates or updates `site.webmanifest`, and changes icon tags in HTML or a project layout.

Q: What does favicon need to run?

It requires ImageMagick v7+ and the `magick` command. The source image must be PNG, JPG, JPEG, SVG, WEBP, or GIF.

Creates favicon files from one source image, then updates the web manifest and project HTML. Use it when adding or replacing site icons.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add brianlovin/agent-config --skill favicon -a claude-code

Open on GitHub

What favicon does

The skill validates a PNG, JPG, JPEG, SVG, WEBP, or GIF source, then produces favicon.ico, PNG icons, and site.webmanifest. When the source is SVG, it also places a copy at favicon.svg.

It identifies the project from configuration files and selects a static-assets folder. Supported checks include Rails, Next.js, Gatsby, SvelteKit, Astro, Vite, Angular, and plain HTML. Existing icon files take precedence over framework detection, and an unclear folder layout prompts the user for confirmation.

ImageMagick v7+ with the magick command is required; the skill stops until it is installed. It derives the app name from an existing manifest, package.json, Rails configuration, or the current directory, preserves existing manifest appearance settings, and updates icon references in HTML or a layout file.

What it helps with

generate a multi-resolution favicon.ico file
create browser and mobile PNG icon files
update site.webmanifest with app details and icons
replace favicon links in project HTML
locate the appropriate static-assets directory

Example prompts for the agent

Generate favicons from <path to source image> and update this project's HTML.
Create site.webmanifest and the icon set from <path to source image>.
Check the static-assets folder and replace the current favicons using <path to source image>.

How to install favicon

1Skills CLI (Vercel)

npx skills add brianlovin/agent-config --skill favicon -a claude-code

2Manually: put the files in place

~/.claude/skills/favicon/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/favicon/

1Skills CLI (Vercel)

npx skills add brianlovin/agent-config --skill favicon -a codex

2Manually: put the files in place

.agents/skills/favicon/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add brianlovin/agent-config --skill favicon -a cursor

2Manually: put the files in place

.cursor/skills/favicon/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install brianlovin/agent-config favicon

2Manually: put the files in place

.github/skills/favicon/SKILL.md

1Skills CLI (Vercel)

npx skills add brianlovin/agent-config --skill favicon -a gemini-cli

2Platform CLI

gemini skills install https://github.com/brianlovin/agent-config --path skills/favicon

Manually: put the files in place

.devin/skills/favicon/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add brianlovin/agent-config --skill favicon -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about favicon

How do I install favicon in Claude Code?

Run npx skills add brianlovin/agent-config --skill favicon -a claude-code.

What does the favicon skill do?

It builds favicon files from one image, creates or updates site.webmanifest, and changes icon tags in HTML or a project layout.

What does favicon need to run?

It requires ImageMagick v7+ and the magick command. The source image must be PNG, JPG, JPEG, SVG, WEBP, or GIF.

Similar skills

Everything for Frontend and UI →

favicon-gen jezweb Generates complete favicon packages and web manifests from logos, text monograms, or brand colors. Provides clean HTML markup for site headers. CX Codex +1 2,200installs favicon-generator kostja94 Walks through favicon and app icon setup: sizes, formats, HTML tags and what Google Search expects from the icon. CX Codex +1 1,100installs web-asset-generator alonw0 Generates favicons, PWA app icons, and Open Graph social cards from logos, emojis, or text. Useful when preparing a website or web app for launch and configuring social sharing snippets. CX Codex +1 933installs image-optimization aj-geddes A skill that walks your agent through compressing images and picking modern formats. Useful before a deploy, when pages drag on mobile networks. CX Codex +1 656installs image-manipulation-image-magick official github Use ImageMagick to resize images, convert formats and inspect metadata. The skill is suited to thumbnails and batch image processing. 9,723installs app-icon Code-with-Beto Generates and configures app icons for React Native Expo apps. Handles iOS 26 Liquid Glass formats, Android adaptive safe areas, and app.json updates. CX Codex +1 2,100installs

From the same set12

sentry Guides an agent through Sentry error capture and performance tracing in Next.js code. Use it while adding Sentry instrumentation to an application. CX Codex +1 2,800installs chrome-webstore-release-blueprint Walks you through OAuth setup and version-triggered publishing of a Chrome extension to the Web Store. CX Codex +1 2,800installs tdd Guides agents through a disciplined red-green-refactor loop. It builds features one vertical slice at a time and tests public behavior over implementation details. CX Codex +1 2,800installs react-doctor The skill scans a React codebase against 47+ rules and returns a 0-100 score with file paths and line numbers. Handy before a review or when the app drags. CX Codex +1 2,800installs reclaude Splits a bloated CLAUDE.md into a short root file plus a .claude/rules/ folder. Useful once your agent instructions grow past the point where you can keep them in your head. CX Codex +1 2,800installs bun Configures the assistant to use the Bun runtime instead of Node.js and npm. Replaces heavy npm packages with built-in APIs. CX Codex +1 2,800installs workflow Makes the agent plan multi-step work, push research into subagents and prove a task works before marking it done. CX Codex +1 2,700installs fix-sentry-issues Triages production Sentry errors through Sentry MCP and resolves underlying software defects. Fits investigations of error spikes and Sentry noise cleanup. CX Codex +1 2,700installs