domains / design / favicon-implementation / favicon

favicon

Skill card

combined

The two skills cover the same task but from different angles. The first is a comprehensive guide covering brand consistency, required sizes, formats, Google Search (SERP) requirements, and implementation patterns for various tech stacks. The second is a specific, executable procedure that uses ImageMagick to generate the actual files, detect the project framework, and update the HTML/manifest. The first lacks the specific generation commands and framework detection logic, while the second lacks the SERP optimization details and broader brand context. Combining them provides a complete workflow from generation to optimization.

Repositories

Other copies

Combined skill

---
name: favicon
description: Generate, implement, and optimize favicons and app icons for brand consistency and search visibility.
---

# Favicon Generator & Optimizer

## 1. Assessment
1. **Context**: Read `contextus.md` or project files to understand the tech stack and brand identity.
2. **Source**: Identify a source image (logo) or create one.
3. **Search Visibility**: Note that favicons appear in Google Search results. Ensure the homepage is crawlable and the favicon URL is stable.

## 2. Generation (ImageMagick)
If generating from a source image:
1. **Prerequisites**: Ensure `magick` (ImageMagick v7+) is installed.
2. **Detect Framework**: Identify the static assets directory (e.g., `public/` for Next.js, `static/` for Gatsby).
3. **Generate Files**:
   - `favicon.ico` (16x16, 32x32, 48x48)
   - `favicon-96x96.png`
   - `apple-touch-icon.png` (180x180)
   - `web-app-manifest-192x192.png`
   - `web-app-manifest-512x512.png`
   - `favicon.svg` (if source is SVG)
   *Note: Use `-background none` before the input file to preserve transparency.*

## 3. Implementation
1. **HTML Tags**: Add `<link>` tags for `icon`, `apple-touch-icon`, and `manifest`.
2. **PWA Manifest**: Create/update `site.webmanifest` with 192x192 and 512x512 icons (purpose: maskable).
3. **Framework Specifics**: 
   - **Next.js**: Place `favicon.ico`, `icon.png`, `apple-icon.png` in `/app`.
   - **Static**: Place in root or `public/`.

## 4. Optimization & Best Practices
- **Simplicity**: Design for 16x16 legibility.
- **SERP**: Ensure the favicon is square, >48x48px, and hosted at a stable URL on the homepage.
- **Caching**: Use versioning (e.g., `?v=2`) for updates.
- **Testing**: Check across browsers, dark mode, and Google Search Console.