To get a website’s favicon URL with JavaScript, hand the domain to a public favicon service — Google’s, DuckDuckGo’s, or one of the alternatives. They return a ready-to-use image URL you can drop straight into <img src>. Parsing the site’s own HTML works in theory but is blocked by CORS in practice.
Last verified: 2026-05-17. Originally published 2022-07-21, rewritten and updated 2026-05-17.
Google favicon service
// 16px (legacy s2 endpoint, still works)
https://www.google.com/s2/favicons?domain=https://www.how7o.com
// faviconV2 — supports a size param
https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.how7o.com&size=32function googleFavicon(url, size = 32) {
const u = encodeURIComponent(url);
return `https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${u}&size=${size}`;
}
// Usage in an ![]()
img.src = googleFavicon('https://www.how7o.com', 32);
DuckDuckGo favicon service
function ddgFavicon(url) {
const { hostname } = new URL(url);
return `https://icons.duckduckgo.com/ip3/${hostname}.ico`;
}
img.src = ddgFavicon('https://www.how7o.com');DuckDuckGo’s service returns a 16×16 favicon for the bare hostname. Simpler API, no query string, and less likely to be blocked by privacy-focused extensions.
Direct /favicon.ico fallback
function bareFavicon(url) {
const { origin } = new URL(url);
return `${origin}/favicon.ico`;
}The original favicon convention is just {origin}/favicon.ico. Many sites still serve it there (browsers fall back to this if no <link rel="icon"> is declared). Loading it directly from a browser bypasses any service entirely, but it 404s on sites that use modern <link rel="icon"> with a non-default path.
Graceful fallback chain
function setFavicon(imgEl, siteUrl) {
const tries = [
googleFavicon(siteUrl, 32),
ddgFavicon(siteUrl),
bareFavicon(siteUrl),
'/default-icon.png',
];
let i = 0;
imgEl.onerror = () => { if (i < tries.length - 1) imgEl.src = tries[++i]; };
imgEl.src = tries[0];
}Each fallback only kicks in if the previous one errors. The last entry is a local default so users always see something even when every external service is unreachable.
Frequently asked questions
<link rel="icon"> tag? You can, but it usually fails — fetching another origin’s HTML from JavaScript is blocked by CORS unless that site explicitly opted in. Even when it works, the page may declare its favicon with a relative URL, multiple sizes, or none at all (in which case the browser falls back to /favicon.ico). The third-party services below sidestep all of that.
Yes — https://www.google.com/s2/favicons?domain=... still serves 16px favicons, and the newer faviconV2 endpoint at t3.gstatic.com supports a size parameter. Google has rate limits and may return a default globe icon when the target site is unreachable or doesn’t have a favicon. It’s not a documented public API, so don’t build mission-critical features on it.
DuckDuckGo’s icon service is the most-cited public alternative: https://icons.duckduckgo.com/ip3/{domain}.ico. Other options include https://www.faviconkit.com/{domain}/{size} and self-hosting via something like the open-source favicon proxies on GitHub. For an extension that needs reliability, fetching once and caching the icon as a Blob in IndexedDB is the durable approach.
Some privacy-focused browsers and content blockers do block requests to s2.googleusercontent.com and similar trackers. In a Chrome extension that’s listing user bookmarks, this is rarely an issue (the user opted in by installing the extension). On a public website, prefer DuckDuckGo’s service or self-hosted icons to avoid setting third-party cookies on your visitors.
Related guides
- How to Check if a JavaScript String Is a Valid URL
- How to Convert an Image to a Base64 String in JavaScript
- How to Remove the “Other Favorites” Button in Microsoft Edge
References
MDN <link rel="icon">: developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/icon. URL Living Standard: url.spec.whatwg.org.
