Builder Methods

Free Agent Skill

Add a favicon to your app or site. On demand.

Favicon Creator gives your app the polished, professional touch a real product deserves — rendered correctly across every browser, device, and home screen, in a single step.

Docs & SetupView on GitHub

Free & Open Source · Get notified of major new releases:

What is Favicon Creator?

Favicon Creator is a Claude Code skill that produces the full set of favicon files a modern site needs — rounded-square SVG, multi-resolution .ico, Android PNG, Apple touch icon — and inserts the matching <link> and theme-color tags into your layout file.

By default it pulls the exact SVG of a Lucide icon you name, centers it on a solid background color, and uses that as the source for every output size. You can also point it at an existing SVG in your repo, name an icon from a different library, or describe the icon you want and let the skill draw it.

You walk away with these files written to public/:

  • favicon.ico — multi-resolution 16/32/48 for Windows and legacy browsers.
  • icon.svg + favicon.svg — the rounded-square mark for modern browser tabs.
  • icon.png (512px) and icon-192.png for Android.
  • apple-touch-icon.png (180px) for the iOS home screen.

Plus the corresponding <link> and <meta name="theme-color"> tags added to your layout file (Rails ERB, Next.js layout, plain index.html — the skill detects the project type).

Requirements

The skill shells out to two command-line tools to rasterize the SVG into PNGs and bundle the multi-resolution .ico. On a Mac:

brew install librsvg imagemagick

On Windows, install both via winget in PowerShell:

winget install -e --id ImageMagick.ImageMagick
winget install -e --id GNOME.Librsvg

(Or use Chocolatey: choco install imagemagick rsvg-convert.) If either is missing, the skill stops and asks you to install them rather than improvising a workaround.

Installation

Favicon Creator ships in the open-source bm-skills marketplace. In any Claude Code session:

/plugin marketplace add buildermethods/bm-skills
/plugin install bm-favicon-creator

Then open Claude Code in your project and run /bm-favicon-creator, or just ask it to set up a favicon — the skill auto-triggers.

Any agent

The skill is just markdown — not Claude Code-specific. If you’re using Codex, Cursor, Antigravity, or another agentic tool, download the bm-favicon-creator folder from the bm-skills repo and install it as a custom skill, command, or rule per your tool’s convention. The steps are identical.

Learn to build

Want a step-by-step tutorial on how to plan, prompt, and ship real apps with AI — using tools like Favicon Creator as part of a larger workflow? That’s exactly what I teach in my Become the Builder course, included with Builder Methods Pro. You’ll learn how I plan, prompt, and ship full-stack apps end-to-end — alongside direct support from me and the rest of the community.

1. Pick an icon

The skill asks where to source the icon. You can:

  • Name a Lucide icon — e.g. rocket, sparkles, book-open. This is the default. The skill fetches the exact SVG from Lucide and uses its paths unchanged.
  • Name an icon from a different library — Heroicons, Phosphor, Tabler, Material Symbols, etc. The skill fetches it from that library’s official source.
  • Point at an existing SVG in your repo.
  • Describe the icon and let the skill draw a minimal SVG that reads cleanly at 16×16.

2. Pick the colors

The skill asks two color questions:

  • Background color — fills the rounded square and also becomes the theme-color meta tag value (the browser-chrome tint on mobile).
  • Icon color — the stroke (or fill) of the icon itself.

Both are confirmed back to you before any files are generated, so you can adjust before the skill commits.

3. Generate & wire up

The skill composes the final SVG (rounded square + centered icon), rasterizes every size with rsvg-convert, bundles the multi-resolution .ico with magick, writes all the files into public/ (or the equivalent for your framework), and then edits your layout file to add or replace these tags:

<meta name="theme-color" content="#FCF8F2">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

When it’s done you’ll get a short summary of what was written and a reminder to hard-refresh the browser (or close and reopen the tab) to bust the favicon cache.

When to reach for it

Reach for it the moment a new project still has a placeholder favicon — or when you want to refresh an existing one across every device in a single pass instead of hand-exporting six file sizes.

When to skip it

Skip it if:

  • Your favicon is already in place and rendering correctly across browsers — there’s nothing to retrofit.
  • Your brand mark is more elaborate than a single centered icon (a wordmark, complex artwork). Design those by hand and drop the files into the same public/ paths the skill would have written.

Next steps

Stay updated on Favicon Creator

Get notified of major new releases and updates to Favicon Creator.