skills.rest
DevOtts
DevOttsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

favicon-builder

Design and implement a readable SVG favicon for Next.js App Router.

4|Updated Jun 27, 2025
Search Tags:#accessibility#next.js#svg#brand#favicon#ui assets#browser tab icon
One-click install
npx skills add https://github.com/DevOtts/all-skills-you-will-ever-need --skill favicon-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: favicon-builder
Source: https://github.com/DevOtts/all-skills-you-will-ever-need/tree/main/.claude/favicon-builder
Command: npx skills add https://github.com/DevOtts/all-skills-you-will-ever-need --skill favicon-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Producing a favicon that still reads clearly at 16×16 is hard, and default framework icons often don’t match the brand or render correctly in browser tab UI.

Core Features & Use Cases

  • Next.js App Router-friendly favicon setup: Places icon.svg and apple-icon.svg in src/app/ so Next auto-detects and serves the right <link rel="icon"> tags.
  • High-legibility SVG design rules: Enforces one recognizable brand element, substantial stroke/shape sizing, 2–3 color limits, and forbids text so the icon doesn’t smear or vanish at small sizes.
  • Cleanup for conflicting defaults: Removes manual favicon <link> tags and leftover favicon.ico that can override the SVG in certain Next setups.

Quick Start

Use the favicon-builder skill to design and implement a brand favicon by updating src/app/icon.svg and src/app/apple-icon.svg, then ensure no manual favicon links or favicon.ico overrides remain.

Frequently Asked Questions about favicon-builder

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

FAQPage Schema
How do I add an SVG favicon to a Next.js App Router project?▼

To add an SVG favicon to Next.js App Router, place `icon.svg` and `apple-icon.svg` files inside the `src/app/` directory so the framework auto-detects and serves the correct `<link rel="icon">` tags automatically.

Why does my favicon vanish or smear at 16x16 in the browser tab?▼

A favicon vanishes or smears at 16x16 when it contains text, too many colors, or thin strokes. Maintaining high favicon legibility requires one recognizable brand element, substantial stroke sizing, and a strict 2-3 color limit.

What is the best way to replace the default Next.js favicon with a custom brand icon?▼

The best way to replace the default Next.js favicon is to update `src/app/icon.svg` with your brand design and remove conflicting manual `<link>` tags and leftover `favicon.ico` files that can override the SVG.

Does Next.js App Router support SVG favicons for iOS Apple touch icons?▼

Yes, Next.js App Router supports SVG favicons for iOS by placing an `apple-icon.svg` file in the `src/app/` directory, which the framework auto-detects to serve the appropriate Apple touch icon link tags.

What SVG constraints are needed for a crisp browser tab icon?▼

For a crisp browser tab icon, SVG constraints include using a 256 viewBox, omitting text, applying substantial primary strokes, and limiting the design to 2-3 colors to ensure the icon remains readable at small sizes.

Do I need to remove favicon.ico when using an SVG favicon in Next.js?▼

Yes, you need to remove leftover `favicon.ico` and manual favicon `<link>` tags when using an SVG favicon in Next.js to prevent configuration conflicts that can override your optimized SVG icon.

Related Skills

Explore More Design & Creative Skills→
Aqsagull99Aqsagull99

nextjs-skill

Build Next.js 16+ apps with App Router, server components, and API routes.

Community
Intermediate
deomiarndeomiarn

favicon-pwa

Generate favicon variants, apple-touch-icon, and PWA manifest from brand colors.

Community
Intermediate
dembrandtdembrandt
33

brand-visual-language

Define cohesive border-radius, typography, and iconography systems for brand consistency.

Official
Intermediate
ThomashighbaughThomashighbaugh
1

icon-generator

Generate favicon, PWA, and Unreal Engine icon sets from a single PNG or SVG source.

Community
Intermediate