skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

favicon

Generate favicon files and web manifest from a source image using ImageMagick.

1|Updated Aug 17, 2025
Search Tags:#icon generation#next.js#pwa#static assets#favicon#imagemagick#web manifest
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill favicon-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: favicon
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/favicon
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill favicon-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires imagemagick.

What problem does it solve? Manually resizing a logo into every required favicon size and wiring up the correct HTML link tags for each framework is tedious and error-prone. This Skill automates the entire favicon pipeline from a single source image. ## Core Features & Use Cases - Multi-size favicon generation: Produces favicon.ico (16/32/48px), favicon-96x96.png, apple-touch-icon.png, and 192/512px web app manifest icons with transparency preserved. - Framework detection: Detects Rails, Next.js, Gatsby, SvelteKit, Astro, Hugo, Jekyll, Vite, CRA, Vue CLI, Angular, Eleventy, or static HTML projects and places assets in the correct directory. - Automatic HTML/metadata updates: Creates or updates site.webmanifest and injects the proper link tags or Next.js metadata icons configuration. - Use Case: You have a new logo.svg for your Next.js app. Run the Skill with the image path and it generates all favicon files into public/, creates site.webmanifest, and updates app/layout.tsx with the icons metadata. ## Quick Start Generate a complete favicon set from my logo.png file and update my project with the correct link tags.

Frequently Asked Questions about favicon

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate favicons from a PNG or SVG image?▼

Provide the path to your source image (PNG, JPG, SVG, WEBP, or GIF) and the Skill uses ImageMagick to generate favicon.ico, favicon-96x96.png, apple-touch-icon.png, and 192/512px manifest icons. SVG sources are also copied as favicon.svg.

What favicon sizes do modern websites need?▼

Modern sites need a multi-resolution favicon.ico (16x16, 32x32, 48x48), a 96x96 PNG, a 180x180 apple-touch-icon, and 192x192 plus 512x512 PNG icons referenced in site.webmanifest for Android and PWA support.

Does favicon generation work with Next.js app router?▼

Yes. The Skill detects Next.js via next.config files, places generated icons in the public/ directory, and updates app/layout.tsx by merging an icons configuration into the existing metadata export.

Why does my SVG favicon have a white background after conversion?▼

The white background appears when ImageMagick's -background none flag is placed after the input file instead of before it. The Skill's commands place the flag first so SVG transparency is preserved during rasterization.

What happens if ImageMagick is not installed?▼

The Skill checks for ImageMagick v7 with 'which magick' before doing anything. If it is missing, it stops and provides install instructions: brew install imagemagick on macOS or apt install imagemagick on Linux.

Related Skills

Explore More Software Engineering Skills→
GetFresh-VenturesGetFresh-Ventures

logo-creator

Generate logo variations with style controls and export SVG assets.

Official
Advanced
kostja94kostja94
872

favicon-generator

Generate and audit favicon and app icon implementations for cross-platform brand consistency.

Community
Intermediate
jscraikjscraik
8

fixing-metadata

Audit and correct website metadata including titles, Open Graph tags, and JSON-LD.

Community
Intermediate
vitoropereiravitoropereira

favicon

Generate favicons and app icons for Next.js projects with metadata detection.

Community
Intermediate