favicon — скилл для Claude Code: генерация и установка
Создаёт набор фавиконов из исходного изображения, обновляет манифест и HTML проекта. Пригодится при настройке и замене иконок сайта.
npx skills add brianlovin/agent-config --skill favicon -a claude-codeЧто делает favicon
Скилл проверяет исходное изображение в формате PNG, JPG, JPEG, SVG, WEBP или GIF, затем создаёт favicon.ico, PNG-иконки и site.webmanifest. Для SVG он также копирует исходник как favicon.svg.
Он ищет тип проекта по конфигурационным файлам и выбирает каталог статики: среди поддерживаемых вариантов есть Rails, Next.js, Gatsby, SvelteKit, Astro, Vite, Angular и статический HTML. Если уже найдены файлы вроде favicon.ico, их папка получает приоритет. При неоднозначной структуре скилл запрашивает каталог у пользователя.
Для генерации нужен ImageMagick v7+ с командой magick; без него работа остановится до установки зависимости. Скилл берёт имя приложения из site.webmanifest, package.json, Rails-конфигурации или имени текущей папки, сохраняет существующие параметры оформления манифеста и обновляет ссылки в HTML или файле макета.
Какие задачи решает
- создать
favicon.icoс несколькими разрешениями - собрать PNG-иконки для браузера и мобильного экрана
- обновить
site.webmanifestименем приложения и списком иконок - добавить в HTML ссылки на новые фавиконы
- выбрать каталог статики по структуре проекта
Примеры запросов агенту
- Сгенерируй фавиконы из
<path to source image>и обнови HTML проекта. - Создай
site.webmanifestи набор иконок по файлу<path to source image>. - Проверь каталог статики и замени текущие фавиконы изображением
<path to source image>.
Как установить favicon
1Через Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill favicon -a claude-code2Вручную: положить файлы
~/.claude/skills/favicon/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/favicon/
1Через Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill favicon -a codex2Вручную: положить файлы
.agents/skills/favicon/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill favicon -a cursor2Вручную: положить файлы
.cursor/skills/favicon/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install brianlovin/agent-config favicon2Вручную: положить файлы
.github/skills/favicon/SKILL.md1Через Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill favicon -a gemini-cli2Командой платформы
gemini skills install https://github.com/brianlovin/agent-config --path skills/faviconВручную: положить файлы
.devin/skills/favicon/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill favicon -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора12
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о favicon
Как установить favicon в Claude Code?
Выполните npx skills add brianlovin/agent-config --skill favicon -a claude-code.
Что делает скилл favicon?
Он создаёт файлы фавиконов из одного изображения, формирует или обновляет site.webmanifest и правит теги иконок в HTML либо макете проекта.
Что нужно для работы favicon?
Нужен ImageMagick v7+ и доступная команда magick. Исходник должен быть PNG, JPG, JPEG, SVG, WEBP или GIF.