YAML
---
name: creating-favicons
description: Creates favicon sets that match website themes and logos. Use when building web apps or mobile apps that need branded favicon packages.
---

Creating Favicons

HTML
<!-- Basic favicon set for most websites -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Progress:

• Analyze logo/brand colors and extract key visual elements
• Create master 512x512px PNG with transparent background
• Generate complete favicon package with all required sizes
• Test favicon visibility across different backgrounds
• Implement HTML meta tags and manifest file

Step 1: Logo Analysis

Extract the most recognizable element from your logo:

• Single letter/monogram for text-heavy logos
• Simplified icon version for complex logos
• Key shape or symbol that represents the brand

Step 2: Master Design (512x512px)

• Use transparent PNG background
• Ensure design works at 16x16px (test by scaling down)
• Use high contrast colors
• Avoid fine details that disappear when small

Step 3: Generate Required Sizes

Essential sizes:

• favicon.ico (16x16, 32x32, 48x48 multi-size)
• favicon-16x16.png
• favicon-32x32.png
• apple-touch-icon.png (180x180)
• android-chrome-192x192.png
• android-chrome-512x512.png

Step 4: Create Manifest

JSON
{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png", 
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Example 1: Input: E-commerce site with blue circular logo containing white "S" Output:

• 512x512 blue circle with white "S"
• High contrast maintained at 16px
• Theme color: #1e40af
• All standard sizes generated

Example 2: Input: Minimalist photography portfolio with thin serif font Output:

• Simplified camera aperture icon (replaces complex text)
• Monochrome design for versatility
• Clean geometric shape readable at small sizes

Example 3: Input: Food delivery app with red and yellow brand colors Output:

• Simplified fork/spoon icon in red
• Yellow background for mobile app icon
• Transparent version for web favicon

• Test at actual size - Always view favicon at 16x16px during design
• Use brand colors but ensure sufficient contrast with common backgrounds
• Keep it simple - Complex logos need simplified icon versions
• SVG for modern browsers - Include <link rel="icon" type="image/svg+xml" href="/favicon.svg">
• Maintain aspect ratio - Square designs work best across all platforms
• Consider dark mode - Test favicon visibility on both light and dark browser themes

• Using full logo instead of creating simplified icon version
• Poor contrast making favicon invisible on certain backgrounds
• Forgetting mobile sizes (apple-touch-icon, android-chrome variants)
• Missing manifest file causing poor PWA experience
• Not testing small sizes - details that look good at 512px may disappear at 16px
• Wrong file formats - ICO still needed for IE compatibility
• Inconsistent branding between web favicon and mobile app icon