Favicon trick for bookmark-style UIs

When building bookmark managers, link grids, speed-dial pages, dashboard link sections, or any UI that shows a collection of website links, you need icons for each site. Options: (1) Manually download and host icons — tedious, doesn't scale. (2) Use a big icon library like FontAwesome — doesn't have website-specific logos. (3) Use each site's /favicon.ico — unreliable, CORS blocked, inconsistent sizes, some sites use .png or .svg. (4) Use a favicon proxy service — the right answer. Without icons, link grids look bland and are hard to scan visually. Users rely heavily on favicon recognition for quick navigation.

Use a free favicon proxy service to get consistent, CORS-friendly favicons for any domain:

OPTION 1 — Google's Favicon Service (most reliable, all sizes):
https://www.google.com/s2/favicons?domain=github.com&sz=32
Supports sz parameter: 16, 32, 64, 128, 256
For retina/HiDPI displays, use sz=64 for 32px display size

OPTION 2 — DuckDuckGo (privacy-friendly):
https://icons.duckduckgo.com/ip3/github.com.ico
Single size, but doesn't log requests

IMPLEMENTATION in HTML:
<img src="https://www.google.com/s2/favicons?domain=github.com&sz=32"
alt="" width="16" height="16"
onerror="this.src='fallback-icon.svg'" />

IMPLEMENTATION in JavaScript with fallback:
function getFaviconUrl(domain, size = 32) {
return https://www.google.com/s2/favicons?domain=${domain}&sz=${size};
}

function getFallbackIcon(domain) {
const letter = domain.replace(/^www\./, '')[0].toUpperCase();
const hue = [...domain].reduce((h, c) => h + c.charCodeAt(0), 0) % 360;
// Returns a colored SVG with the first letter
return data:image/svg+xml,...;
}

CSS for consistent display:
.favicon { width: 16px; height: 16px; border-radius: 2px; object-fit: contain; }

Every major website has a favicon. Proxy services cache and normalize them at consistent sizes, avoiding CORS issues (direct requests to other domains' /favicon.ico are blocked by browsers), mixed-content warnings (http favicons on https pages), and size inconsistencies (some sites have 16x16, others have 256x256, some have only .ico). The proxy handles all the messy parsing of <link rel='icon'> tags, ICO files with multiple sizes, SVG favicons, and Apple touch icons.

Building bookmark managers, link grids, dashboards