Web Assets & Favicons Guide

Why Web Assets Matter

Favicons, app icons, Open Graph images, and placeholder graphics are the small details that make a site feel polished and professional. Getting them wrong means broken thumbnails, blurry icons, or missing social previews, getting them right makes your brand instantly recognizable.

Favicons: The Complete Picture

A modern favicon setup needs multiple sizes for different contexts:

<!-- Minimum viable favicon setup -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

<!-- site.webmanifest -->
{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Use SVG favicons when possible, they scale perfectly and support dark mode via prefers-color-scheme media queries inside the SVG.

Required Icon Sizes

Size        Purpose                    Format
───────────────────────────────────────────────
16×16       Browser tab                ICO/PNG
32×32       Browser tab (HiDPI)        ICO/PNG
180×180     Apple Touch Icon           PNG
192×192     Android / PWA              PNG
512×512     PWA splash / install       PNG
Any         Modern browsers            SVG

Check your sizes with the Favicon Size Checker or generate all sizes at once with the Favicon Generator.

Open Graph & Social Images

When someone shares your link on social media, the platform fetches your OG image. Getting this right has a big impact on click-through rates:

<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">

<!-- Twitter-specific (optional override) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/twitter.png">

• Recommended size: 1200×630 pixels
• Max file size: Under 5MB (aim for <300KB)
• Format: PNG or JPEG
• Safe zone: Keep text in the center 80%, platforms crop edges

Preview your OG tags with the OG Preview Tool and generate meta tags with the Meta Tag Generator.

Placeholder Images

During development, placeholder images help test layouts without waiting for real content. Common approaches:

• Solid color blocks: fastest, works offline
• SVG placeholders: lightweight, can include text labels
• BlurHash / LQIP: low-quality image previews for progressive loading
• External services: placeholder.com, picsum.photos

Generate custom placeholders with the Image Placeholder Generator.

Image Optimization Tips

• Use WebP or AVIF for photos (30–50% smaller than JPEG)
• Use SVG for logos, icons, and illustrations
• Add loading="lazy" to below-the-fold images
• Set explicit width and height to prevent layout shift
• Use responsive srcset for different screen sizes
• Inline critical SVGs, lazy-load the rest

Color Extraction

Extracting dominant colors from images helps create cohesive designs, matching backgrounds to hero images, generating palettes from brand photos, or creating dynamic themes:

Try the Image Color Extractor to pull colors from any image instantly.