Favicon Icon Generator Agent Skill

Favicon & Icon Generator Skill

Overview

A comprehensive skill for generating professional favicon and icon systems for web applications. This skill creates SVG-based icons optimized for browsers, search engines, PWAs, and mobile devices, with automated validation and testing tools.

When to Use This Skill

• Setting up icons for a new website or web application
• Fixing missing or broken favicon/icon configurations
• Improving SEO with proper icon display in search results
• Implementing PWA (Progressive Web App) icon requirements
• Creating a complete icon system for multi-platform support

What This Skill Does

1. Icon Design & Creation

• Creates professional SVG icons optimized for web use
• Designs icons that represent the core theme/purpose of the application
• Generates multiple sizes: high-resolution (512x512) and favicon (32x32)
• Uses modern design principles: gradients, proper contrast, recognizable shapes
• Ensures icons are clear and visible at small sizes

2. Configuration Setup

• Updates Next.js layout.tsx with proper metadata configuration
• Configures PWA manifest.json with correct icon references
• Sets up HTML head tags for maximum browser compatibility
• Implements proper icon fallbacks and alternatives

3. Automation Tools

• Creates verification script to check icon configuration
• Generates PNG conversion script (optional, requires sharp library)
• Sets up prebuild hooks for automatic validation
• Provides testing pages for visual verification

4. Documentation

• Generates comprehensive setup guides
• Creates quick reference documentation
• Provides deployment checklists
• Includes troubleshooting guides

Icon Design Principles

Visual Elements

• Primary Symbol: Main icon representing the app's core purpose
• Should be simple and recognizable
• Works well at small sizes (16x16 to 512x512)
• Uses clear, bold shapes

• Color Scheme
• Uses brand colors or theme colors
• Provides good contrast against backgrounds
• Implements gradients for depth and professionalism
• Dark background for dark-themed sites, light for light-themed

• Accent Elements
• Secondary symbols or indicators
• Subtle details that don't clutter small sizes
• Complementary colors for visual interest

Technical Requirements

• Format: SVG (Scalable Vector Graphics) for main icons
• Sizes:
• 512x512 (high-resolution, PWA)
• 32x32 (favicon, browser tabs)
• 180x180 (Apple Touch Icon, PNG)
• Optimization: Clean code, minimal file size (< 5KB)
• Compatibility: Works in all modern browsers

File Structure

project/
├── public/
│   ├── icon.svg              # Main icon (512x512)
│   ├── favicon.svg           # Favicon (32x32)
│   ├── manifest.json         # PWA manifest
│   ├── icon-test.html        # Testing page
│   └── icon-comparison.html  # Before/after comparison
├── src/app/
│   ├── layout.tsx            # Next.js metadata config
│   └── apple-icon.png        # iOS home screen icon
├── scripts/
│   ├── verify-icons.js       # Validation script
│   └── generate-icons.js     # PNG generation script
└── docs/
    ├── ICON_SETUP.md         # Detailed guide
    └── ICON_QUICK_REFERENCE.md # Quick reference

Implementation Steps

Step 1: Analyze the Application

• Identify the core theme/purpose
• Review existing branding (colors, style)
• Determine key visual elements to represent
• Check current icon configuration (if any)

Step 2: Design the Icon

• Create main SVG icon (512x512)
• Primary symbol representing the app
• Brand colors and gradients
• Accent elements for distinction
• Proper viewBox and dimensions

• Create favicon version (32x32)
• Simplified version of main icon
• Optimized for small size visibility
• Same color scheme and theme

Step 3: Configure Files

Next.js layout.tsx

export async function generateMetadata(): Promise<Metadata> {
  return {
    icons: {
      icon: [
        { url: "/icon.svg", type: "image/svg+xml" },
        { url: "/favicon.svg", type: "image/svg+xml" },
      ],
      shortcut: "/icon.svg",
      apple: [
        { url: "/apple-icon.png", sizes: "180x180", type: "image/png" },
      ],
      other: [
        {
          rel: "mask-icon",
          url: "/icon.svg",
        },
      ],
    },
    // ... other metadata
  };
}

// In the HTML head
<head>
  <link rel="icon" href="/icon.svg" type="image/svg+xml" />
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-icon.png" sizes="180x180" />
</head>

manifest.json

{
  "icons": [
    {
      "src": "/icon.svg",
      "sizes": "any",
      "type": "image/svg+xml",
      "purpose": "any"
    },
    {
      "src": "/favicon.svg",
      "sizes": "32x32",
      "type": "image/svg+xml",
      "purpose": "any"
    },
    {
      "src": "/apple-icon.png",
      "sizes": "180x180",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

Step 4: Create Automation Tools

Verification Script (verify-icons.js)

• Checks all required files exist
• Validates configuration in layout.tsx and manifest.json
• Reports missing or misconfigured files
• Runs automatically before build (prebuild hook)

Generation Script (generate-icons.js)

• Converts SVG to PNG using sharp library
• Generates multiple sizes (180x180, 192x192, 512x512)
• Optional tool for better compatibility

Testing Pages

• Visual preview of all icons
• Browser tab icon testing
• Before/after comparison
• Deployment checklist

Step 5: Documentation

• Create detailed setup guide (ICON_SETUP.md)
• Create quick reference (ICON_QUICK_REFERENCE.md)
• Create deployment checklist
• Document troubleshooting steps

Step 6: Testing & Validation

• Run verification script
• Test in development environment
• Check browser tab display
• Test on mobile devices
• Validate PWA installation
• Clear cache and retest

SVG Icon Template

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- Gradients for depth -->
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#1e293b;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#0f172a;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="primary" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#60a5fa;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
    </linearGradient>
  </defs>
  
  <!-- Background -->
  <rect width="512" height="512" rx="80" fill="url(#bg)"/>
  
  <!-- Main symbol -->
  <!-- Add your primary icon element here -->
  
  <!-- Accent elements -->
  <!-- Add secondary elements here -->
  
  <!-- Subtle effects -->
  <!-- Add glow, shadow, or other effects -->
</svg>

Verification Checklist

Pre-Deployment

• [ ] All icon files created (icon.svg, favicon.svg)
• [ ] Configuration files updated (layout.tsx, manifest.json)
• [ ] Verification script passes
• [ ] Icons display correctly in browser tabs
• [ ] Testing pages work correctly
• [ ] Build completes without errors

Post-Deployment

• [ ] Browser tab icon displays (Chrome, Firefox, Safari, Edge)
• [ ] Mobile browser icon displays (iOS Safari, Android Chrome)
• [ ] PWA installation works correctly
• [ ] Bookmarks show icon
• [ ] Google Search Console indexed (wait 24-48 hours)
• [ ] Search results show icon (wait 24-48 hours)

Expected Impact

Immediate Benefits

• ✅ Professional appearance in browser tabs
• ✅ Better user experience (easier to find tabs)
• ✅ Proper PWA support
• ✅ Mobile home screen icons

SEO Benefits (24-48 hours)

• ✅ Icon display in Google search results
• ✅ Increased click-through rate (5-15%)
• ✅ Improved brand recognition
• ✅ Enhanced professional credibility

Long-term Benefits

• ✅ Better user retention
• ✅ Stronger brand identity
• ✅ Improved user trust
• ✅ Higher engagement rates

Troubleshooting

Icon Not Displaying in Browser

• Clear browser cache (Ctrl+Shift+Delete)
• Hard refresh (Ctrl+F5)
• Check file paths are correct
• Verify SVG syntax is valid
• Check browser console for errors

Icon Not in Google Search Results

• Ensure deployed to production
• Wait 24-48 hours for re-crawl
• Request re-index in Google Search Console
• Check robots.txt doesn't block icons
• Verify icon files are publicly accessible

PWA Installation Issues

• Verify manifest.json is valid JSON
• Check icon sizes are correct
• Ensure HTTPS is enabled
• Test on different devices
• Check browser console for PWA errors

Commands Reference

# Verify icon configuration
npm run verify-icons

# Generate PNG versions (requires sharp)
npm install --save-dev sharp
npm run generate-icons

# Build with automatic verification
npm run build

# Test locally
npm run dev
# Visit http://localhost:3000/icon-test.html

Best Practices

Design

• Keep it simple - icons should be recognizable at 16x16
• Use brand colors consistently
• Ensure good contrast
• Test at multiple sizes
• Make it memorable and unique

Technical

• Use SVG for scalability
• Keep file sizes small (< 5KB)
• Validate configuration before deployment
• Test on multiple browsers and devices
• Document the icon system

Maintenance

• Version control all icon files
• Document design decisions
• Keep backup of original designs
• Test after any updates
• Monitor search result display

Integration with Other Tools

Next.js

• Automatic metadata generation
• App directory structure support
• Static export compatibility
• Image optimization integration

PWA

• Manifest.json configuration
• Service worker compatibility
• Install prompt support
• Home screen icon support

SEO Tools

• Google Search Console integration
• Structured data compatibility
• Social media preview support
• Favicon validation tools

Example Use Cases

1. Gaming Website

• Icon: Sword, controller, or game-specific symbol
• Colors: Vibrant, energetic (blue, red, purple)
• Style: Bold, dynamic, action-oriented

2. Calculator/Tool Website

• Icon: Calculator symbol, chart, or tool icon
• Colors: Professional (blue, green, gray)
• Style: Clean, modern, functional

3. E-commerce Site

• Icon: Shopping bag, cart, or product
• Colors: Trustworthy (blue, green, orange)
• Style: Friendly, approachable, clear

4. Blog/Content Site

• Icon: Letter, book, or pen
• Colors: Readable (black, blue, red)
• Style: Classic, elegant, simple

Resources

Design Tools

• Figma (free, web-based)
• Inkscape (free, desktop)
• Adobe Illustrator (paid)
• SVG editors online

Conversion Tools

• CloudConvert (SVG to PNG)
• Sharp library (Node.js)
• ImageMagick (command line)
• Online favicon generators

Testing Tools

• Browser DevTools
• Google Search Console
• Lighthouse (PWA audit)
• Real device testing

Documentation

• Next.js Metadata API
• Web App Manifest
• Favicon Best Practices

Skill Outputs

When this skill is applied, you will receive:

• Icon Files
• icon.svg (512x512)
• favicon.svg (32x32)
• Optional PNG versions

• Configuration Files
• Updated layout.tsx
• Updated manifest.json
• Updated package.json

• Automation Scripts
• verify-icons.js
• generate-icons.js
• Testing HTML pages

• Documentation
• Setup guide
• Quick reference
• Deployment checklist
• Troubleshooting guide

• Testing Tools
• Visual preview page
• Comparison page
• Verification script

Success Metrics

Technical Metrics

• ✅ All verification checks pass
• ✅ Icons display in all major browsers
• ✅ PWA installation works
• ✅ No console errors

Business Metrics

• 📈 Click-through rate increase (5-15%)
• 📈 Brand recognition improvement
• 📈 User retention increase
• 📈 Professional credibility boost

Maintenance Schedule

Immediate (After Implementation)

• Test on all target browsers
• Verify mobile display
• Check PWA installation
• Monitor for errors

Short-term (1-7 days)

• Check Google search results
• Monitor click-through rates
• Collect user feedback
• Fix any issues

Long-term (Monthly)

• Review analytics impact
• Update if branding changes
• Test on new browsers/devices
• Keep documentation current

Skill Version: 1.0

Last Updated: 2026-02-09

Compatibility: Next.js 13+, React 18+, Modern Browsers

Difficulty: Intermediate

Time to Implement: 1-2 hours