Favicon Gen

Favicon Generator

Generate a complete favicon package from a logo, initials, or brand colours. Produces all required formats and HTML integration code.

Workflow

Step 1: Choose Your Approach

Have a logo with an icon element?
 YES -> Extract icon from logo
 NO  -> Have text/initials?
         YES -> Create monogram favicon
         NO  -> Use branded shape

Step 2: Create Source SVG

Extracted icon — copy icon paths from logo, centre in 32x32 viewBox, simplify for small sizes.

Monogram — use a template from assets/:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#0066cc"/>
  <text x="16" y="21" font-size="16" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="sans-serif">AC</text>
</svg>

Branded shape — circle (universal), rounded square (modern), shield (security), hexagon (tech).

SVG templates available in assets/ directory.

Step 3: Generate All Formats

Requires ImageMagick (convert command). Install if needed: brew install imagemagick (macOS) or apt install imagemagick (Linux).

# ICO (16x16 + 32x32)
convert favicon.svg -define icon:auto-resize=16,32 favicon.ico

# Apple Touch Icon (180x180, SOLID background — transparent = black on iOS)
convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png

# Android/PWA icons
convert favicon.svg -resize 192x192 icon-192.png
convert favicon.svg -resize 512x512 icon-512.png

No ImageMagick? Use https://favicon.io to convert from the SVG instead.

Step 4: Create Web Manifest

Copy and customise assets/manifest.webmanifest:

{
  "name": "Your Business Name",
  "short_name": "Business",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0066cc",
  "background_color": "#ffffff",
  "display": "standalone"
}

Step 5: Add HTML Tags

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0066cc">

Place all files in site root (/public/ in Vite/React).

---

Critical Rules

• Always generate ALL formats — SVG, ICO, apple-touch-icon, 192, 512, manifest
• iOS icons MUST have solid backgrounds — transparent = black square
• Always use bold font weight for monogram text (regular disappears at 16x16)
• Test at 16x16 — if it's not legible, simplify
• Never launch with CMS defaults (WordPress "W", etc.)

Format Quick Reference

Asset Files

• assets/favicon-svg-circle.svg — Circle monogram template
• assets/favicon-svg-square.svg — Rounded square template
• assets/favicon-svg-shield.svg — Shield template
• assets/manifest.webmanifest — Web manifest template

Reference Files

• references/format-guide.md — Complete format specifications
• references/extraction-methods.md — Logo icon extraction steps
• references/monogram-patterns.md — Advanced monogram design
• references/shape-templates.md — Industry-specific shapes with SVG code

Logo to Favicon Extraction Methods

Detailed techniques for extracting and simplifying logo icons into favicons.

---

Overview: When to Extract vs Create New

Extract from Logo ✅

• Logo has standalone icon element (symbol, mark, shape)
• Icon is recognizable without accompanying text
• Icon works at small sizes (simple enough)
• Client has brand guidelines requiring logo consistency

Create New Icon ❌

• Logo is text-only (no graphic element)
• Logo icon is too complex to simplify
• Icon requires text to make sense
• Temporary favicon needed before logo finalized

---

Step 1: Identify Extractable Elements

Icon Types in Logos

1. Standalone Symbol

• Geometric shapes (stars, circles, triangles)
• Objects (rocket, leaf, house, gear)
• Abstract marks (swooshes, curves, unique shapes)

Examples:

• Twitter bird (without text)
• Apple apple (bitten apple silhouette)
• Nike swoosh (without text)

2. Lettermark/Monogram

• Single letter styled uniquely
• Multiple letters forming a mark
• Ligature (connected letters)

Examples:

• McDonald's "M" golden arches
• Facebook "f" (old logo)
• HBO interconnected letters

3. Pictorial Icon

• Recognizable real-world object
• Simplified illustration
• Industry-specific symbol

Examples:

• Starbucks mermaid
• Shell shell
• Target bullseye

4. Geometric Pattern

• Repeating shapes
• Grid-based designs
• Sacred geometry

Examples:

• Microsoft window grid
• Adidas three stripes
• Olympics rings

What to Look For

Open your logo file (SVG preferred) and identify:

1. Bounded element - Shape/group that's self-contained 2. Balanced composition - Works without surrounding text 3. Clear silhouette - Recognizable from shape alone 4. Simple geometry - Made of basic shapes (circles, paths, polygons)

Red Flags (Hard to Extract)

• Icon only makes sense with text
• Highly asymmetrical (hard to center)
• Too many fine details (line art, cross-hatching)
• Gradients with many stops
• Photographic elements

---

Step 2: Extract the Icon Element

Method 1: SVG Source File (Preferred)

If you have the logo as SVG:

1. Open in code editor (VS Code, Sublime)

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
     <!-- Logo content -->
     <g id="icon-group">
       <!-- These are the icon paths -->
       <circle cx="30" cy="30" r="20" fill="#0066cc"/>
       <path d="M30,15 L35,25 L25,25 Z" fill="#ffffff"/>
     </g>
     <text x="60" y="40">Company Name</text>
   </svg>

2. Identify icon group (look for <g> with id, or grouped shapes)

3. Copy icon paths only

   <!-- Extract just these -->
   <circle cx="30" cy="30" r="20" fill="#0066cc"/>
   <path d="M30,15 L35,25 L25,25 Z" fill="#ffffff"/>

4. Create new SVG with 32x32 viewBox

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
     <!-- Paste icon paths, adjust coordinates -->
     <circle cx="16" cy="16" r="14" fill="#0066cc"/>
     <path d="M16,8 L19,14 L13,14 Z" fill="#ffffff"/>
   </svg>

5. Adjust coordinates to center in 32x32 viewBox

Method 2: Design Tool (Figma, Illustrator, Inkscape)

For non-SVG logos (PNG, JPEG, AI, PDF):

1. Open logo in design tool

2. Select icon element

• Figma: Click icon, Cmd+C (copy)
• Illustrator: Select with Direct Selection tool
• Inkscape: Select, Edit → Copy

3. Create new 32x32 artboard

• Figma: Frame (F) → 32x32
• Illustrator: New artboard, 32px × 32px
• Inkscape: File → Document Properties → 32x32

4. Paste icon (Cmd+V)

5. Center and scale

• Use alignment tools (center vertically + horizontally)
• Scale to fill ~80% of canvas (leave padding)

6. Export as SVG

• Figma: Export → SVG → Export
• Illustrator: File → Export → Export As → SVG
• Inkscape: File → Save As → Optimized SVG

Method 3: Trace from Raster (Last Resort)

If only have PNG/JPG logo:

1. Use image tracing (Illustrator's Image Trace, Inkscape's Trace Bitmap)

2. Extract icon portion after tracing

3. Simplify paths (reduce anchor points)

4. Follow Method 2 steps above

Warning: Tracing quality depends on source image resolution. Prefer vector sources when possible.

---

Step 3: Simplify for Small Sizes

Icons that work at 200px often fail at 16px. Simplification is critical.

Simplification Rules

Rule 1: Minimum Feature Size

At 16x16, one pixel = 6% of canvas

• Features < 2px wide become invisible
• Gaps < 2px merge into solid
• Details < 3×3px are illegible

Action: Remove or merge features smaller than 2-3px

Rule 2: Reduce Shape Count

Too many shapes = muddy appearance

• Aim for 3-5 major shapes
• Merge adjacent shapes where possible
• Remove decorative elements

Example:

• Detailed rocket (10 shapes) → Simple rocket (4 shapes: body, window, fins, flame)

Rule 3: Increase Stroke Width

Thin lines vanish at small sizes

• Minimum stroke: 2px (preferably 3px)
• Consider converting strokes to fills
• Simplify path details

Before: 0.5px hairline → After: 3px bold stroke

Rule 4: Reduce Color Count

Too many colors = visual noise

• 2-3 colors maximum
• High contrast between colors (4.5:1 minimum)
• Consider monochrome (1-2 colors)

Example: 6-color gradient logo → 2-color favicon (primary + white)

Rule 5: Remove Text

Text is illegible below 8-10px font size

• Remove all text elements from icon
• If text is core identity, use monogram instead (see monogram-patterns.md)

Rule 6: Increase Negative Space

Crowded icons are unreadable

• Add 10-20% padding around icon edges
• Increase gaps between elements
• Simplify internal details

Simplification Checklist

• [ ] All features ≥ 2px (minimum visible size)
• [ ] 3-5 shapes total (reduced from original)
• [ ] Strokes ≥ 2-3px width
• [ ] 2-3 colors only
• [ ] No text elements
• [ ] Adequate negative space (padding)
• [ ] Tested at 16x16 zoom (still recognizable)

---

Step 4: Center and Scale

Centering Techniques

Manual Method (design tool): 1. Select icon shapes 2. Use align tools: "Align center" + "Align middle" 3. Verify equal padding on all sides

SVG Method (code): 1. Calculate bounding box of icon paths 2. Apply transform to center:

   <g transform="translate(dx, dy)">
     <!-- Icon paths -->
   </g>

3. Where dx = (32 - width) / 2, dy = (32 - height) / 2

Scaling Guidelines

Target fill: 70-85% of canvas

• Too small: Icon lost in padding, hard to see
• Too large: Touches edges, feels cramped

Test at extremes:

• 16x16 (minimum display)
• 512x512 (maximum display)

Should be recognizable at both scales.

Padding Standards

---

Step 5: Optimize Paths

Path Optimization Techniques

1. Reduce Anchor Points

• Fewer points = cleaner render, smaller file
• Use tool: Illustrator's Simplify, Figma's Flatten, Inkscape's Simplify

2. Convert Curves to Straight Lines (where appropriate)

• Curves with tiny variation → straight line
• Reduces complexity without visual loss

3. Merge Overlapping Paths

• Union operation on adjacent shapes
• Reduces layer count

4. Round Coordinates

• Round x/y to nearest 0.5 or 1.0
• Cleaner SVG code, better rendering

5. Remove Unnecessary Attributes

• Strip metadata, comments
• Remove unused definitions
• Use SVGO tool for automated optimization

SVGO (Command Line Optimizer)

# Install SVGO
npm install -g svgo

# Optimize SVG
svgo favicon.svg

# Before: 3,245 bytes, After: 892 bytes (typical savings)

Configuration (preserve viewBox, colors):

{
  "plugins": [
    { "removeViewBox": false },
    { "convertColors": { "currentColor": false } }
  ]
}

---

Real-World Examples

Example 1: Extracting Twitter Bird

Original: Twitter logo with bird + text

Extraction Steps: 1. Identified bird shape (single path element in SVG) 2. Copied bird path 3. Created 32×32 viewBox 4. Centered bird, scaled to 24px height 5. Changed color from #1DA1F2 to solid blue 6. Removed fine feather details (merged into solid shape)

Result: Clean bird silhouette, recognizable at 16×16

Simplifications:

• 15 anchor points → 8 anchor points
• 3 separate shapes → 1 merged shape
• Gradient → solid color

Example 2: Extracting Starbucks Mermaid

Original: Detailed mermaid illustration in circle

Extraction Steps: 1. Identified circular boundary + mermaid figure 2. Removed outer ring text 3. Simplified mermaid (removed hair details, crown details) 4. Increased stroke width on key elements (face, tail) 5. Merged adjacent shapes 6. Converted to 2-color (green circle + white mermaid)

Result: Recognizable mermaid silhouette

Simplifications:

• 50+ shapes → 12 shapes
• 4 colors → 2 colors
• Complex hair → simple crown + outline

Example 3: Extracting Nike Swoosh

Original: Swoosh + text

Extraction Steps: 1. Copied swoosh path (single shape) 2. Centered in 32×32 canvas 3. Scaled to fill 75% (swoosh is horizontal, needs more width) 4. No simplification needed (already simple)

Result: Perfect favicon (swoosh is inherently simple)

Simplifications: None needed (already minimal)

---

Testing Extracted Icons

Visual Tests

1. Zoom test: View at 16×16, 32×32, 64×64, 512×512

• Should be recognizable at all sizes
• No pixelation or artifacts

2. Contrast test: View on light and dark backgrounds

• If using transparency, test both contexts
• Ensure adequate contrast (4.5:1 minimum)

3. Context test: Place in browser tab bar

• Compare to other site favicons
• Should stand out, not blend in

4. Recognition test: Show to colleague (A/B test)

• Can they identify the brand from icon alone?
• Does it match logo personality?

Technical Tests

1. File size: Should be < 5KB for SVG 2. Valid XML: Validate at https://validator.w3.org/ 3. Render test: Open SVG directly in browser (drag into tab) 4. Export test: Generate ICO and PNGs, verify quality

---

When Extraction Fails

Signs Extraction Won't Work

• Icon unrecognizable without text
• Too complex to simplify (would lose identity)
• Asymmetrical composition (can't center well)
• Requires color gradients to work
• Client brand guidelines prohibit simplification

Alternative Approaches

Option 1: Create Monogram (see monogram-patterns.md)

• Use initials or abbreviation
• Place in geometric shape
• Match logo colors

Option 2: Use Primary Brand Element

• Extract most recognizable shape
• May not be exact logo icon, but brand-consistent

Option 3: Consult Designer

• Request icon variation from brand designer
• Provide specifications (32×32, 2-3 colors, simple)

---

Extraction Workflow Summary

1. Identify extractable icon element in logo 2. Extract paths/shapes into new 32×32 SVG 3. Simplify reduce shapes, increase stroke width, remove details 4. Center and scale fill 70-85% of canvas 5. Optimize paths and file size 6. Test at 16×16 and in browser context 7. Generate all required formats (ICO, PNGs)

Average Time: 15-30 minutes for simple extraction, 45-60 minutes for complex logos

---

Tools Reference

---

Official References

• SVG Specification: https://www.w3.org/TR/SVG2/
• SVGO: https://github.com/svg/svgo
• Apple Icon Guidelines: https://developer.apple.com/design/human-interface-guidelines/app-icons
• Material Design Icons: https://material.io/design/iconography/ (simplification examples)

---

Last Updated: 2026-01-14 Maintained by: Jezweb (jeremy@jezweb.net)

Favicon Format Guide

Complete specification for all favicon formats required for modern web applications.

---

Overview: Required Files

A complete favicon implementation needs 6 files:

1. favicon.svg - Modern browsers (vector, scalable) 2. favicon.ico - Legacy browsers (raster, multi-size) 3. apple-touch-icon.png - iOS home screen (180x180, solid background) 4. icon-192.png - Android home screen (192x192, transparent) 5. icon-512.png - PWA/high-res displays (512x512, transparent) 6. site.webmanifest - Web app metadata (JSON)

---

Format 1: favicon.svg

Purpose

• Modern browsers (Chrome 80+, Firefox 41+, Safari 9+)
• Scalable vector format (crisp at any size)
• Preferred format (browsers try this first)

Specifications

• File name: favicon.svg (exact, case-sensitive)
• ViewBox: 0 0 32 32 (recommended standard)
• Namespace: xmlns="http://www.w3.org/2000/svg" (required)
• Transparency: Allowed (renders against browser UI)
• Colors: RGB or hex colors (#RRGGBB format)
• File size: Keep < 5KB (simpler is better)

Template

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <!-- Simple shapes only -->
  <!-- 3-5 elements maximum -->
  <!-- Brand colors -->
  <circle cx="16" cy="16" r="16" fill="#0066cc"/>
  <path d="M..." fill="#ffffff"/>
</svg>

Best Practices

• Keep design simple (3-5 shapes max)
• Use geometric primitives when possible (<circle>, <rect>, <polygon>)
• Avoid gradients (may not render well at small sizes)
• Test at 16x16 zoom level
• Ensure high contrast (4.5:1 minimum)

Browser Support

• ✅ Chrome 80+ (2020)
• ✅ Firefox 41+ (2015)
• ✅ Safari 9+ (2015)
• ✅ Edge 79+ (2020)
• ❌ IE 11 (needs ICO fallback)

---

Format 2: favicon.ico

Purpose

• Legacy browser support (IE 11, old mobile browsers)
• Fallback when SVG not supported
• Tab icons in Windows taskbar

Specifications

• File name: favicon.ico (exact, case-sensitive)
• Sizes: MUST include both 16x16 and 32x32
• Format: Microsoft ICO container format
• Color depth: 32-bit (24-bit color + 8-bit alpha)
• Transparency: Supported (alpha channel)
• File size: Typically 1-15KB (depends on complexity)

Multi-Size Requirement

Critical: ICO must contain BOTH sizes in one file:

• 16x16 - Browser tab display
• 32x32 - Retina displays, taskbar

Why both? Browser selects appropriate size based on context. Single-size ICO appears blurry in some contexts.

Generation Methods

Method 1: ImageMagick (command line)

convert favicon.svg -define icon:auto-resize=16,32 favicon.ico

Method 2: Online Converters

• https://favicon.io (simple, free)
• https://realfavicongenerator.net (comprehensive)
• https://cloudconvert.com/svg-to-ico (batch processing)

Method 3: Figma/Illustrator

• Export 16x16 PNG
• Export 32x32 PNG
• Combine using online ICO creator

Validation

Check ICO contains both sizes:

identify favicon.ico

# Expected output:
# favicon.ico[0] ICO 16x16 16x16+0+0 32-bit sRGB
# favicon.ico[1] ICO 32x32 32x32+0+0 32-bit sRGB

Best Practices

• Generate from SVG (consistent with other formats)
• Test in IE 11 if legacy support needed
• Verify both 16x16 and 32x32 present
• Keep file size under 15KB

---

Format 3: apple-touch-icon.png

Purpose

• iOS home screen icon
• iPadOS home screen icon
• macOS Safari pinned tabs
• iOS Shortcuts app

Specifications

• File name: apple-touch-icon.png (exact, case-sensitive)
• Size: 180x180 pixels (standard since iPhone 6)
• Format: PNG (24-bit color, lossless)
• Transparency: ❌ NOT ALLOWED (use solid background)
• Corners: System applies rounded corners (don't pre-round)
• File size: 10-50KB typical

Critical: Solid Background Required

Why? iOS renders transparent PNGs with black fill, resulting in black square icon.

Wrong (appears as black square):

convert favicon.svg -resize 180x180 apple-touch-icon.png  # ❌ Transparent

Correct (solid background):

convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png  # ✅

Design Guidelines

• Background: Use primary brand color (solid, opaque)
• Icon size: Scale icon to ~120x120, center on 180x180 canvas
• Padding: 30px on all sides (avoid edge cropping)
• Corners: Don't pre-round (iOS applies 18% corner radius automatically)
• Text: Use bold weight (regular weight too thin)

Size History

• 57x57 - iPhone (2007)
• 72x72 - iPad (2010)
• 114x114 - iPhone 4 Retina (2010)
• 144x144 - iPad 3 Retina (2012)
• 180x180 - iPhone 6+ (2014) ← Current standard

Note: Only 180x180 needed now. iOS scales for older devices.

Validation

• Open PNG in image viewer
• Check dimensions: 180x180
• Verify background is opaque (no transparency)
• Check icon centered with adequate padding
• Test on iOS device (Add to Home Screen)

---

Format 4: icon-192.png

Purpose

• Android home screen icon
• Chrome "Add to Home Screen" on Android
• Referenced in web app manifest

Specifications

• File name: icon-192.png (common convention)
• Size: 192x192 pixels (Android standard)
• Format: PNG (24-bit color + alpha)
• Transparency: ✅ Allowed and recommended
• File size: 5-20KB typical

Design Guidelines

• Background: Transparent OR brand color (transparent preferred for Android)
• Icon size: Full 192x192 canvas (Android doesn't apply padding)
• Shape: Can be any shape (circle, square, custom)
• Corners: Android applies "adaptive icon" mask on Android 8+

Generation

# With transparency (recommended for Android)
convert favicon.svg -resize 192x192 icon-192.png

# With solid background (if brand guidelines require)
convert favicon.svg -resize 192x192 -background "#0066cc" -alpha remove icon-192.png

Adaptive Icons (Android 8+)

Modern Android uses "adaptive icons" with separate foreground and background layers. For simplicity, we generate a single 192x192 PNG that works everywhere.

Advanced: For better Android 8+ support, provide separate foreground/background in manifest (out of scope for quick favicons).

---

Format 5: icon-512.png

Purpose

• Progressive Web App (PWA) splash screens
• High-resolution displays (4K, Retina)
• Android TV, Chrome OS
• "Install App" dialog

Specifications

• File name: icon-512.png (common convention)
• Size: 512x512 pixels (PWA standard)
• Format: PNG (24-bit color + alpha)
• Transparency: ✅ Allowed and recommended
• File size: 20-80KB typical

Design Guidelines

• Same as icon-192.png, just higher resolution
• Export from vector source (SVG) for crisp quality
• Test appearance on high-DPI displays

Generation

convert favicon.svg -resize 512x512 icon-512.png

---

Format 6: site.webmanifest

Purpose

• Progressive Web App metadata
• Links to icon files
• Defines app name, colors, display mode
• Required for "Add to Home Screen" on Android

Specifications

• File name: site.webmanifest or manifest.json (either works)
• Format: JSON
• Location: Site root (e.g., /public/site.webmanifest)
• MIME type: application/manifest+json

Template

{
  "name": "Your Business Name",
  "short_name": "Business",
  "description": "Brief description of your web app",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#0066cc",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Field Descriptions

Icons Array Requirements

Each icon object needs:

• src - Path to PNG file
• sizes - Dimensions (e.g., "192x192")
• type - MIME type ("image/png")
• purpose - "any maskable" (supports adaptive icons)

Minimum: 192x192 and 512x512

Validation

Test manifest at: Chrome DevTools → Application → Manifest (the validator service is gone)

---

HTML Integration

Complete <head> Tags

<!-- Modern browsers (SVG, preferred) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Legacy fallback (ICO) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Apple Touch Icon (iOS, iPadOS, macOS) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Web App Manifest (Android, PWA) -->
<link rel="manifest" href="/site.webmanifest">

<!-- Theme Color (browser UI) -->
<meta name="theme-color" content="#0066cc">

Tag Order Matters

1. SVG first (modern browsers try this) 2. ICO second (fallback for legacy) 3. Apple touch icon (iOS-specific) 4. Manifest (Android/PWA)

File Locations

All files should be in site root:

• Vite/React: /public/ directory
• Next.js: /public/ directory
• Static sites: Root directory
• WordPress: Theme root or upload to /wp-content/uploads/

---

Browser/Platform Support Matrix

Key Insight: You need ALL formats to support all platforms. No single format works everywhere.

---

File Size Guidelines

Why size matters: Favicons load on every page, before render. Smaller = faster initial load.

---

Testing Checklist

Visual Tests

• [ ] Browser tab at 100% zoom (16x16 display)
• [ ] Browser tab at 200% zoom (32x32 display)
• [ ] Bookmarks bar
• [ ] iOS "Add to Home Screen"
• [ ] Android "Add to Home Screen"
• [ ] PWA install dialog
• [ ] Light mode AND dark mode (if using transparency)

Technical Tests

• [ ] All 6 files generated
• [ ] Files in correct locations (site root)
• [ ] HTML <link> tags present in <head>
• [ ] ICO contains both 16x16 and 32x32
• [ ] apple-touch-icon has solid background (no transparency)
• [ ] Manifest JSON is valid
• [ ] Hard refresh browser (Ctrl+Shift+R)
• [ ] Test in incognito window (no cache)

Validation Tools

• Favicon test: https://realfavicongenerator.net/favicon_checker
• Manifest validator: Chrome DevTools → Application → Manifest (the validator service is gone)
• ICO inspection: identify favicon.ico (ImageMagick)
• SVG validation: https://validator.w3.org/

---

Common Mistakes

---

Quick Reference Card

6 Required Files:

favicon.svg         # Modern browsers (vector)
favicon.ico         # Legacy (16+32px raster)
apple-touch-icon.png  # iOS (180x180, solid background)
icon-192.png        # Android (192x192)
icon-512.png        # PWA (512x512)
site.webmanifest    # Metadata (JSON)

HTML Tags:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0066cc">

Generation Commands:

# ICO with both sizes
convert favicon.svg -define icon:auto-resize=16,32 favicon.ico

# iOS icon (solid background)
convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png

# Android/PWA icons (transparent)
convert favicon.svg -resize 192x192 icon-192.png
convert favicon.svg -resize 512x512 icon-512.png

---

Official References

• MDN Favicon: https://developer.mozilla.org/en-US/docs/Glossary/Favicon
• Apple Touch Icon: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
• Web App Manifest: https://w3c.github.io/manifest/
• ICO Format: https://en.wikipedia.org/wiki/ICO_(file_format)
• SVG Support: https://caniuse.com/link-icon-svg
• PWA Icons: https://web.dev/add-manifest/#icons

---

Last Updated: 2026-01-14 Maintained by: Jezweb (jeremy@jezweb.net)

Monogram Favicon Patterns

Comprehensive guide for creating text-based favicons when no logo icon exists.

---

When to Use Monograms

✅ Use Monogram Favicons When:

• Business has text-only logo (no icon element)
• Logo is too complex to simplify into 16×16 favicon
• Need temporary favicon before logo finalized
• Brand identity is strongly tied to initials/acronym
• Industry standard uses lettermarks (law firms, consulting)

❌ Don't Use Monograms When:

• Logo has extractable icon element (use extraction-methods.md)
• Business name is single generic word ("Solutions", "Services")
• Initials are confusing (e.g., "XYZ Corp" → "XC" not "XYZ")
• Client has strong preference against lettermarks

---

Letter Selection Rules

Choosing the right letters makes or breaks monogram readability.

Single-Word Business Names

Rule: For single words, use first letter UNLESS:

• First letter is too common (A, S, M) → add second letter
• Acronym is well-known (FBI, NASA) → use full acronym

Two-Word Business Names

Rule: Use both initials (first letter of each word) for two-word names.

Three-Word Business Names

Rule: Use first two initials (drop third) OR use all three if each is critical to identity.

Exception: If three-letter acronym is established (FBI, BMW, IBM), use all three.

Acronym Business Names

Rule: If business commonly uses acronym, use full acronym as monogram.

Special Cases

Ampersand names ("Smith & Jones"):

• Use initials only: SJ
• Omit the "&" (too detailed for small sizes)

Names with "The" ("The Agency"):

• Omit "The", use remaining initials: A or AG

Hyphenated names ("Blue-Green Design"):

• Treat as two words: BG or BGD

Numbers in name ("7 Eleven", "22 Designs"):

• Use number + letter: 7E, 22D
• OR omit number, use letters only: E, D

---

Font Selection

Web-Safe Font Recommendations

Rule: Always use font-weight="bold" (700). Regular (400) weight disappears at 16×16.

Font Size by Letter Count

Rule: Maximum 3 letters. More = illegible at 16×16.

Letter Spacing (Kerning)

For 2-3 letter monograms, adjust spacing:

<!-- Too tight (default) -->
<text x="16" y="21" font-size="16" text-anchor="middle">BS</text>

<!-- Better (add letter-spacing) -->
<text x="16" y="21" font-size="16" text-anchor="middle" letter-spacing="1">BS</text>

Guideline: 0.5-2px letter-spacing for 2-3 letters (test visually)

Uppercase vs Lowercase

Rule: Uppercase is default for professional contexts. Lowercase for casual/modern brands.

---

Shape Templates

Monograms need containing shapes for definition.

Circle (Universal)

Use for: Any industry, safe default

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#0066cc"/>
  <text x="16" y="21" font-size="18" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif">A</text>
</svg>

Characteristics:

• Most versatile shape
• Works on any background
• Universally recognized
• iOS rounds corners anyway

Rounded Square

Use for: Modern, tech, apps

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect x="0" y="0" width="32" height="32" rx="6" fill="#0066cc"/>
  <text x="16" y="21" font-size="18" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif">A</text>
</svg>

Characteristics:

• Matches iOS icon style
• Modern, app-like
• rx="6" = 18.75% corner radius (standard)

Shield

Use for: Security, trust, protection, legal

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path d="M16,2 L28,8 L28,16 C28,24 16,30 16,30 C16,30 4,24 4,16 L4,8 Z"
        fill="#0066cc"/>
  <text x="16" y="20" font-size="16" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif">S</text>
</svg>

Characteristics:

• Implies security/protection
• Good for legal, finance, security industries
• More complex shape (test at 16×16)

Hexagon

Use for: Tech, engineering, data, science

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <polygon points="16,2 28,9 28,23 16,30 4,23 4,9"
           fill="#0066cc"/>
  <text x="16" y="21" font-size="18" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif">H</text>
</svg>

Characteristics:

• Technical, geometric feel
• Popular in tech/SaaS
• Six-sided symmetry

Diamond/Rhombus

Use for: Luxury, premium, jewelry

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <polygon points="16,2 30,16 16,30 2,16"
           fill="#0066cc"/>
  <text x="16" y="21" font-size="18" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif">D</text>
</svg>

Characteristics:

• Elegant, premium
• Diamond/gem association
• Good for luxury brands

---

Color Patterns

High-Contrast Combinations (Recommended)

Rule: Minimum 4.5:1 contrast ratio (WCAG AA). Test at https://webaim.org/resources/contrastchecker/

Brand-Matched Colors

Match favicon to existing brand palette:

Primary brand color → Background White or contrasting brand color → Text

Example:

• Brand: Navy (#003366) + Gold (#c5a778)
• Favicon: Navy background, gold text
• Alternative: Gold background, navy text (test contrast)

Gradient Backgrounds (Use Sparingly)

Gradients can look muddy at small sizes. If using:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#0066cc;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#003366;stop-opacity:1" />
    </linearGradient>
  </defs>
  <circle cx="16" cy="16" r="16" fill="url(#grad)"/>
  <text x="16" y="21" font-size="18" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif">A</text>
</svg>

Guidelines:

• Use 2-stop gradients only (more = muddy)
• Similar colors (same hue family)
• Test at 16×16 (gradient may be invisible)
• Prefer solid colors when in doubt

---

Industry-Specific Recommendations

Technology / SaaS

• Shape: Hexagon or rounded square
• Colors: Blues (#0066cc, #4a90e2), teals (#00a896)
• Letters: 1-2 max
• Font: Helvetica, Arial (clean, modern)

Finance / Legal

• Shape: Square or shield
• Colors: Navy (#003366), dark blue (#1a237e), gold (#c5a778)
• Letters: 2-3 (firm initials)
• Font: Georgia (serif, traditional)

Healthcare / Medical

• Shape: Circle or rounded square
• Colors: Medical blue (#0077c8), green (#00a651)
• Letters: 1-2
• Font: Arial, Helvetica (clean, trustworthy)

Creative / Agency

• Shape: Circle, diamond, or custom
• Colors: Bold colors (purple #7209b7, pink #f72585, orange #ff6b35)
• Letters: 1-2
• Font: Trebuchet MS, Helvetica (modern)

Real Estate / Property

• Shape: Square or house outline (custom)
• Colors: Earth tones (#8b4513), blues (#4a90e2)
• Letters: 1-2
• Font: Arial (approachable)

Food / Restaurant

• Shape: Circle or rounded square
• Colors: Warm colors (red #d62828, orange #ff6b35, yellow #ffd60a)
• Letters: 1-2
• Font: Verdana, Arial (friendly, readable)

Education

• Shape: Circle or square
• Colors: Blue (#1976d2), green (#388e3c)
• Letters: 1-3 (school initials)
• Font: Arial, Georgia (traditional)

Retail / E-commerce

• Shape: Rounded square or circle
• Colors: Brand-specific (match packaging)
• Letters: 1-2
• Font: Arial, Trebuchet MS

---

Advanced Monogram Techniques

Ligature Monograms

Connecting multiple letters into single shape:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#0066cc"/>
  <!-- Custom paths forming connected AB -->
  <path d="M8,20 L8,12 L12,12 Q14,12 14,14 Q14,16 12,16 L8,16 M12,16 Q14,16 14,18 Q14,20 12,20 L8,20 M14,20 L14,12 Q14,10 18,10 Q22,10 22,14 L22,20" fill="#ffffff" stroke="#ffffff" stroke-width="1.5"/>
</svg>

When to use:

• Brand has established ligature logo
• Professional designer available
• 2-letter combination only (3+ too complex)

Complexity warning: Custom paths harder to maintain than text elements.

Negative Space Monograms

Letter cut out of solid shape:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <defs>
    <mask id="cutout">
      <rect width="32" height="32" fill="#ffffff"/>
      <text x="16" y="21" font-size="18" font-weight="bold"
            text-anchor="middle" fill="#000000" font-family="Arial, sans-serif">A</text>
    </mask>
  </defs>
  <circle cx="16" cy="16" r="16" fill="#0066cc" mask="url(#cutout)"/>
</svg>

Effect: Letter appears as transparent/cutout of shape

Use case: Modern, minimal designs

Two-Color Letter Treatment

Split letter into two colors:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" fill="#0066cc"/>
  <!-- Top half of letter -->
  <text x="16" y="21" font-size="20" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif"
        clip-path="polygon(0 0, 100% 0, 100% 50%, 0 50%)">A</text>
  <!-- Bottom half of letter (different color) -->
  <text x="16" y="21" font-size="20" font-weight="bold"
        text-anchor="middle" fill="#ffcc00" font-family="Arial, sans-serif"
        clip-path="polygon(0 50%, 100% 50%, 100% 100%, 0 100%)">A</text>
</svg>

Effect: Letter split horizontally with two colors

Complexity: High, test at 16×16 carefully

---

Text Positioning

Vertical Centering

SVG <text> positions by baseline, not center. Adjust y coordinate:

<!-- For 32px viewBox -->
<text x="16" y="21" ...>  <!-- y = 16 (center) + 5 (offset) = 21 -->

<!-- For different font sizes -->
<!-- y ≈ 16 + (fontSize * 0.35) -->

Rule of thumb: y = viewBox height / 2 + font size * 0.35

Horizontal Centering

Use text-anchor="middle" and x at center:

<text x="16" y="21" text-anchor="middle" ...>

Always use text-anchor="middle" for centered monograms (default is start).

---

Testing Monograms

Visual Tests

1. 16×16 zoom: Can you read the letters? 2. 32×32 zoom: Do letters look crisp? 3. Light background: Does it have contrast? 4. Dark background: Does it stand out? 5. Colorblind test: Run through colorblind simulator

Technical Tests

1. Font render: Does font load in all browsers? 2. File size: SVG should be < 2KB for monograms 3. Export test: Generate ICO/PNGs, check quality

A/B Test with Colleagues

Show 3-5 options:

• Different shapes (circle vs square vs shield)
• Different letter counts (A vs AC vs ACM)
• Different colors (primary vs secondary brand colors)

Ask: Which is most recognizable? Which matches brand?

---

Common Mistakes

---

Monogram Template Library

Use these copy-paste templates as starting points:

Single Letter, Circle, Blue/White

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#0066cc"/>
  <text x="16" y="21" font-size="18" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif">A</text>
</svg>

Two Letters, Rounded Square, Dark/White

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#1a1a1a"/>
  <text x="16" y="21" font-size="16" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif"
        letter-spacing="1">AB</text>
</svg>

Three Letters, Shield, Navy/Gold

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path d="M16,2 L28,8 L28,16 C28,24 16,30 16,30 C16,30 4,24 4,16 L4,8 Z"
        fill="#003366"/>
  <text x="16" y="20" font-size="12" font-weight="bold"
        text-anchor="middle" fill="#c5a778" font-family="Georgia, serif"
        letter-spacing="0.5">ABC</text>
</svg>

Usage: Copy template, change letters, colors, and shape as needed.

---

Quick Reference

Letter Selection:

• 1 word → 1 letter
• 2 words → 2 letters (both initials)
• 3 words → 2 letters (first two initials)
• Acronym → full acronym (FBI, BMW, IBM)

Font Sizes:

• 1 letter → 18-20px
• 2 letters → 14-16px
• 3 letters → 11-13px
• 4+ letters → ❌ Too many

Shapes:

• Circle → universal, safe
• Rounded square → modern, apps
• Shield → security, legal, trust
• Hexagon → tech, engineering

Colors:

• Minimum 4.5:1 contrast
• Match brand colors
• Default: Blue bg + white text

Font: Always font-weight="bold" or 700

---

Official References

• WCAG Contrast: https://webaim.org/resources/contrastchecker/
• SVG Text: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
• Google Fonts: https://fonts.google.com/ (for inspiration)
• Monogram Design Principles: https://www.smashingmagazine.com/2015/08/understanding-typography-monogram-design/

---

Last Updated: 2026-01-14 Maintained by: Jezweb (jeremy@jezweb.net)

Shape Templates for Favicons

Industry-specific shapes and custom favicon templates beyond basic circles and squares.

---

Overview

While circles and rounded squares work universally, industry-specific shapes can reinforce brand identity and improve recognition.

When to use custom shapes:

• Industry has visual conventions (house for real estate, shield for security)
• Brand personality calls for unique shape
• Client requests specific shape
• Differentiation needed in crowded market

When to use standard shapes:

• Unclear industry fit
• Risk of complexity at small sizes
• Budget/time constraints
• Client has no preference

---

Shape Selection by Industry

---

Template 1: Shield (Security, Legal, Protection)

Standard Shield

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <!-- Shield outline -->
  <path d="M16,2 L28,8 L28,16 C28,24 16,30 16,30 C16,30 4,24 4,16 L4,8 Z"
        fill="#0066cc"/>
  <!-- Optional: Add letter/icon inside -->
  <text x="16" y="20" font-size="16" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif">S</text>
</svg>

Characteristics:

• Top-heavy design (wider at top)
• Point at bottom
• Symmetrical

Use for: Security companies, legal firms, insurance, protection services

Badge Shield (Police/Authority Style)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path d="M16,2 L20,6 L26,6 L28,12 L28,18 L24,26 L16,30 L8,26 L4,18 L4,12 L6,6 L12,6 Z"
        fill="#1a237e" stroke="#ffd700" stroke-width="1"/>
  <text x="16" y="20" font-size="14" font-weight="bold"
        text-anchor="middle" fill="#ffd700" font-family="Arial, sans-serif">P</text>
</svg>

Use for: Law enforcement, security agencies, authority brands

---

Template 2: House (Real Estate, Home Services)

Simple House

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <!-- Roof -->
  <polygon points="16,4 30,16 26,16 26,28 6,28 6,16 2,16"
           fill="#4a90e2"/>
  <!-- Door -->
  <rect x="13" y="20" width="6" height="8" fill="#ffffff"/>
</svg>

Characteristics:

• Triangular roof
• Rectangular body
• Optional door/window details

Use for: Real estate agencies, home builders, property management, home services

Modern House (Minimalist)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path d="M2,16 L16,4 L30,16 L30,28 L2,28 Z"
        fill="#00a896"/>
  <circle cx="16" cy="20" r="3" fill="#ffffff"/>
</svg>

Simpler variant for cleaner look at small sizes.

---

Template 3: Medical Cross

Standard Cross

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#0077c8"/>
  <path d="M16,8 L16,24 M8,16 L24,16"
        stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
</svg>

Characteristics:

• Equal-length arms
• Centered
• Round or square ends

Use for: Healthcare, medical clinics, hospitals, first aid

Plus Icon (Modern Medical)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#00a651"/>
  <path d="M12,16 L20,16 M16,12 L16,20"
        stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
</svg>

Simpler, more modern variant.

---

Template 4: Hexagon (Tech, Engineering, Data)

Regular Hexagon

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <polygon points="16,2 28,9 28,23 16,30 4,23 4,9"
           fill="#7209b7"/>
  <text x="16" y="21" font-size="18" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif">H</text>
</svg>

Characteristics:

• Six equal sides
• Technical/geometric feel
• Popular in tech/SaaS

Use for: Software companies, data analytics, engineering firms, tech startups

Flat-Top Hexagon

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <polygon points="8,2 24,2 32,16 24,30 8,30 0,16"
           fill="#4a90e2"/>
  <text x="16" y="21" font-size="18" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif">T</text>
</svg>

Orientation: Flat top/bottom (vs pointy top in regular)

---

Template 5: Diamond (Luxury, Premium, Jewelry)

Standard Diamond

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <polygon points="16,2 30,16 16,30 2,16"
           fill="#c5a778"/>
  <text x="16" y="21" font-size="18" font-weight="bold"
        text-anchor="middle" fill="#1a1a1a" font-family="Georgia, serif">D</text>
</svg>

Characteristics:

• 45-degree rotated square
• Elegant, premium feel
• Point at top/bottom

Use for: Jewelry stores, luxury brands, premium services, high-end retail

Gem Diamond (Faceted)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <!-- Diamond outline -->
  <polygon points="16,2 30,16 16,30 2,16" fill="#e0e0e0"/>
  <!-- Facet lines -->
  <path d="M16,2 L16,30 M2,16 L30,16 M6,8 L26,24 M26,8 L6,24"
        stroke="#ffffff" stroke-width="1" opacity="0.3"/>
</svg>

More complex: Test at 16×16 carefully.

---

Template 6: Location Pin (Travel, Local Services)

Standard Pin

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#2a9d8f"/>
  <path d="M16,8 C12,8 10,10 10,13 C10,16 16,22 16,22 C16,22 22,16 22,13 C22,10 20,8 16,8 Z"
        fill="#ffffff"/>
  <circle cx="16" cy="13" r="2" fill="#2a9d8f"/>
</svg>

Characteristics:

• Teardrop shape with circle at top
• Point at bottom
• Iconic "map marker" design

Use for: Travel agencies, local services, mapping apps, delivery services

Simple Pin

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path d="M16,4 C11,4 8,7 8,11 C8,16 16,28 16,28 C16,28 24,16 24,11 C24,7 21,4 16,4 Z"
        fill="#e76f51"/>
  <circle cx="16" cy="11" r="3" fill="#ffffff"/>
</svg>

Simpler variant with no background circle.

---

Template 7: Lightbulb (Ideas, Innovation, Consulting)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#ffd60a"/>
  <!-- Bulb -->
  <circle cx="16" cy="14" r="5" fill="#1a1a1a"/>
  <!-- Base -->
  <rect x="14" y="19" width="4" height="4" rx="1" fill="#1a1a1a"/>
  <!-- Rays (optional, test at 16x16) -->
  <path d="M16,5 L16,8 M11,8 L12,10 M8,11 L10,12 M24,11 L22,12 M21,8 L20,10"
        stroke="#1a1a1a" stroke-width="1.5" stroke-linecap="round"/>
</svg>

Use for: Consulting, creative agencies, innovation labs, idea platforms

Complexity warning: Rays may be too detailed at 16×16. Test and simplify if needed.

---

Template 8: Gear/Cog (Manufacturing, Engineering, Services)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#003366"/>
  <!-- Simplified gear (8 teeth) -->
  <path d="M16,6 L18,10 L22,10 L18,14 L20,18 L16,16 L12,18 L14,14 L10,10 L14,10 Z"
        fill="#ffffff"/>
  <circle cx="16" cy="16" r="3" fill="#003366"/>
</svg>

Use for: Manufacturing, engineering firms, maintenance services, automation

Simplification critical: Real gears have 12-20 teeth; use 6-8 for favicons.

---

Template 9: Book (Education, Publishing, Libraries)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#1976d2"/>
  <!-- Book cover -->
  <rect x="10" y="8" width="12" height="16" rx="1" fill="#ffffff"/>
  <!-- Pages -->
  <path d="M12,10 L12,22 M14,10 L14,22"
        stroke="#1976d2" stroke-width="0.5"/>
</svg>

Use for: Schools, libraries, publishers, educational platforms, online courses

---

Template 10: Shopping Bag (Retail, E-commerce)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#d62828"/>
  <!-- Bag body -->
  <rect x="9" y="12" width="14" height="12" rx="1" fill="#ffffff"/>
  <!-- Handles -->
  <path d="M12,12 C12,9 14,8 16,8 C18,8 20,9 20,12"
        stroke="#ffffff" stroke-width="2" fill="none"/>
</svg>

Use for: Retail stores, e-commerce sites, shopping platforms, marketplaces

---

Template 11: Envelope (Email Services, Communication)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#4a90e2"/>
  <!-- Envelope -->
  <rect x="6" y="11" width="20" height="14" rx="1" fill="#ffffff"/>
  <!-- Flap -->
  <path d="M6,11 L16,18 L26,11" stroke="#4a90e2" stroke-width="2" fill="none"/>
</svg>

Use for: Email services, communication platforms, messaging apps, mail services

---

Template 12: Chart/Graph (Analytics, Finance, Data)

Bar Chart

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#00a896"/>
  <!-- 3 bars of different heights -->
  <rect x="8" y="18" width="4" height="8" fill="#ffffff" rx="1"/>
  <rect x="14" y="12" width="4" height="14" fill="#ffffff" rx="1"/>
  <rect x="20" y="15" width="4" height="11" fill="#ffffff" rx="1"/>
</svg>

Use for: Analytics platforms, finance apps, data visualization, business intelligence

Line Chart

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#7209b7"/>
  <!-- Simplified line graph -->
  <path d="M6,22 L12,18 L18,20 L24,12"
        stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
  <!-- Data points -->
  <circle cx="6" cy="22" r="2" fill="#ffffff"/>
  <circle cx="12" cy="18" r="2" fill="#ffffff"/>
  <circle cx="18" cy="20" r="2" fill="#ffffff"/>
  <circle cx="24" cy="12" r="2" fill="#ffffff"/>
</svg>

---

Custom Shape Creation Guidelines

When Creating New Shapes

1. Start with basic geometric primitives

• Circles, rectangles, triangles, polygons
• Combine 2-4 shapes maximum

2. Test at 16×16 early and often

• Details disappear at small sizes
• Simplify aggressively

3. Ensure symmetry when possible

• Symmetrical shapes are easier to recognize
• Better visual balance

4. High contrast required

• Foreground vs background: 4.5:1 minimum
• Test on both light and dark browser UIs

5. Keep paths simple

• Minimize anchor points
• Use straight lines over curves when possible
• Avoid complex bezier curves

Shape Complexity Guidelines

Rule: Simpler is always better at favicon sizes. If unsure, simplify more.

---

Combining Shapes with Text

Icon + Letter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <!-- Shield background -->
  <path d="M16,2 L28,8 L28,16 C28,24 16,30 16,30 C16,30 4,24 4,16 L4,8 Z"
        fill="#003366"/>
  <!-- Letter inside -->
  <text x="16" y="20" font-size="16" font-weight="bold"
        text-anchor="middle" fill="#c5a778" font-family="Arial, sans-serif">L</text>
</svg>

Use for: Professional services that need letter + industry shape (e.g., "Smith Legal" → "S" in shield)

Icon + Monogram

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <!-- House shape -->
  <polygon points="16,4 30,16 26,16 26,28 6,28 6,16 2,16" fill="#4a90e2"/>
  <!-- Initials -->
  <text x="16" y="24" font-size="10" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif"
        letter-spacing="0.5">RG</text>
</svg>

Use for: "Realtor Group" → "RG" initials in house

Font size critical: 10-12px max when combining with detailed shape.

---

Testing Custom Shapes

Visual Test Checklist

• [ ] Recognizable at 16×16 pixels
• [ ] Still recognizable at 512×512 (scales well)
• [ ] Works on light browser UI (Chrome light mode)
• [ ] Works on dark browser UI (dark mode)
• [ ] High contrast (4.5:1 minimum)
• [ ] Symmetrical or balanced composition
• [ ] No fine details lost at small size
• [ ] Matches industry conventions (if applicable)

A/B Testing

Show colleagues 3 options: 1. Custom shape (e.g., house for real estate) 2. Standard circle with letter 3. Standard rounded square with letter

Ask: Which is most recognizable? Which do you prefer?

Decision: If custom shape isn't significantly better, use standard.

---

When to Avoid Custom Shapes

Use Standard Shapes If:

• Custom shape is too complex to simplify
• Industry doesn't have clear visual convention
• Testing shows standard shapes perform better
• Budget/time is limited
• Client has no strong preference

Remember: A simple circle with good color and letter is better than a complex custom shape that's illegible.

---

Quick Reference: Shape Selection

Circle → Universal, safe default Rounded Square → Modern, apps, iOS-style Shield → Security, legal, protection House → Real estate, home services Hexagon → Tech, engineering, data Diamond → Luxury, premium, jewelry Cross → Medical, healthcare, first aid Location Pin → Travel, local services, maps Lightbulb → Innovation, consulting, ideas Gear → Manufacturing, engineering, services Book → Education, publishing, libraries Shopping Bag → Retail, e-commerce Envelope → Email, communication Chart → Analytics, finance, data

---

Official References

• MDN SVG Shapes: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes
• Material Design Icons: https://material.io/design/iconography/system-icons.html (simplification examples)
• Heroicons: https://heroicons.com/ (shape inspiration)
• Lucide Icons: https://lucide.dev/ (shape inspiration)

---

Last Updated: 2026-01-14 Maintained by: Jezweb (jeremy@jezweb.net)