DiscordSign up
SKILLS.SH

favicon-generator

When the user wants to implement, optimize, or audit favicon and app icons. Also use when the user mentions "favicon," "app icon," "browser icon," "touch…

INSTALLATION
npx skills add https://github.com/kostja94/marketing-skills --skill favicon-generator
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$27

Size

Use

16x16

Browser tabs, standard displays

32x32

Retina/HiDPI browser tabs

180x180

Apple Touch Icon (iOS home screen); no transparency

192x192

Android Chrome home screen, PWA launcher

512x512

PWA splash screens, adaptive icons

Optional: 48x48, 96x96, 120x120, 152x152, 167x167, 256x256 for broader coverage.

Formats

Format

Use

SVG

Modern browsers; scalable; supports dark mode via media queries; lightweight

PNG

High-DPI; explicit sizes; easy to generate; required for Apple Touch Icon

ICO

Legacy; bundles multiple sizes; fallback for older browsers

Recommended: Provide SVG + PNG fallbacks. Never skip Apple Touch Icon (180x180); iOS shows a generic screenshot without it.

Google Search (SERP Display)

See serp-features for SERP feature types and optimization.

Favicons can appear in Google Search results next to your site's listings. Google Search Central requirements:

Requirement

Guideline

Placement

Add <link rel="icon" href="/path/to/favicon.ico"> to homepage header

One per hostname

One favicon per hostname; example.com and code.example.com are separate; example.com/sub-site shares the same favicon

Crawlability

Googlebot-Image must crawl favicon; Googlebot must crawl homepage; do not block either in robots.txt

Shape

Square (1:1 aspect ratio); minimum 8x8px; preferably >48x48px for quality across platforms

Stable URL

Do not change favicon URL frequently

Appropriate

No inappropriate content (pornography, hate symbols); Google may replace with default icon

Timing

Crawling can take days to weeks; use Search Console URL Inspection to request indexing

Supported rel values: icon, shortcut icon, apple-touch-icon, apple-touch-icon-precomposed. href can be relative (/favicon.ico) or absolute; favicon can be hosted on CDN.

Implementation

HTML Link Tags

<link rel="icon" href="/favicon.ico" sizes="any">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Next.js

Place in /app: favicon.ico, icon.png, apple-icon.png. Next.js auto-generates tags.

PWA Manifest

Include icons array in manifest.json with 192x192 and 512x512 for maskable icons.

Best Practices

  • Simplicity: At 16x16, complex details are illegible; use simplified logo mark; design for brand recognition in SERPs
  • Consistency: Favicon should match logo/brand (logo-generator, brand-visual-generator)
  • Cache: Use long cache; version for updates (e.g. /favicon.ico?v=2)
  • Tools: RealFaviconGenerator, favicon.io, or favicons npm package for automation
  • Test: Check across browsers, dark mode, and Search Console (favicon may take days to weeks to appear)

Output Format

  • Size checklist (16, 32, 180, 192, 512; >48x48 for Google Search)
  • Format recommendations (SVG, PNG, ICO)
  • Implementation notes per tech stack (homepage header placement)
  • Google Search checklist (crawlability, stable URL, appropriate content)
  • Manifest (if PWA)

Related Skills

  • logo-generator: Favicon typically derived from logo; consistent branding
  • media-kit-page-generator: Media kit should include favicon or link to brand assets
  • brand-visual-generator: Visual identity; favicon aligns with brand colors and mark
  • indexing: Favicon requires crawlable homepage; URL Inspection for indexing
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

frontend-design
3/3

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design

Verified authoranthropics
SKILLS.SH
422K139K
2026-05-22
web-design-guidelines
2/3

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

Verified authorvercel-labs
SKILLS.SH
318K26.9K
2026-05-22
vercel-composition-patterns
3/3

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Verified authorvercel-labs
SKILLS.SH
172K26.9K
2026-05-22
ui-ux-pro-max
2/3

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

nextlevelbuilder
SKILLS.SH
158K81.3K
2026-05-22

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card