How7o
  • Home
  • Tools
  • Prank Screens
  • Learn
  • Blog
  • Contact
Reading: How to Get a Website’s Favicon URL with JavaScript
Share
How7oHow7o
Font ResizerAa
  • OS
Search
  • Home
  • Tools
  • Prank Screens
  • Learn
  • Blog
  • Contact
Follow US
© 2024–2026 How7o. All rights reserved.
How7o > Free Laravel, PHP, WordPress & Server Tutorials > Web Development > How to Get a Website’s Favicon URL with JavaScript
Web Development

How to Get a Website’s Favicon URL with JavaScript

how7o
By how7o
Last updated: May 22, 2026
4 Min Read
Get a favicon URL with JavaScript
SHARE

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.

Contents
  • Google favicon service
  • DuckDuckGo favicon service
  • Direct /favicon.ico fallback
  • Graceful fallback chain
  • Frequently asked questions
  • Related guides
  • References

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=32
function 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);
Get favicon URL with JavaScript — Google service, DuckDuckGo, parse rel=icon

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

Why not just fetch the page HTML and parse the <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.

Is Google’s favicon service still working in 2026?

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.

Are there documented alternatives?

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.

Will browsers block requests to these services as a privacy issue?

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.

TAGGED:browser-extensiondomJavaScript

Sign Up For Daily Newsletter

Be keep up! Get the latest breaking news delivered straight to your inbox.
[mc4wp_form]
By signing up, you agree to our Terms of Use and acknowledge the data practices in our Privacy Policy. You may unsubscribe at any time.
Share This Article
Facebook Copy Link Print
Previous Article Format a PHP number with leading zeros — sprintf and str_pad How to Format a Number with Leading Zeros in PHP
Next Article Get the current year in PHP, Laravel and JavaScript How to Get the Current Year in PHP (and Laravel and JS)
Leave a Comment

Leave a Reply Cancel reply

You must be logged in to post a comment.

FacebookLike
XFollow
PinterestPin
InstagramFollow
Most Popular
Set vi as the default editor in Ubuntu — a terminal opening the vim editor
How to Set vi (Vim) as the Default Editor in Ubuntu
June 8, 2026
rsync says ALL DONE but files are missing — a terminal showing ALL DONE next to an empty folder
rsync Says “ALL DONE” but Files Are Missing: How to Verify
June 8, 2026
Migrate a website to a new server with rsync — files copying from an old server to a new one over SSH
How to Migrate a Website to a New Server With rsync
June 8, 2026
Bun runtime — faster JS toolkit replacing npm in Laravel projects
How to Install Bun Runtime on Ubuntu (And Use It in a Laravel Project)
May 24, 2026
Tailscale mesh — peer-to-peer connections between devices, coordination server
How to Install Tailscale on Ubuntu (Zero-Config Mesh VPN for Self-Hosters)
May 24, 2026

You Might Also Like

Get the index in a jQuery each loop
Web Development

How to Get the Index in a jQuery .each() Loop

4 Min Read
CSS page break for printing shown in a print preview layout
Web Development

CSS Page Break for Printing: How to Split a Web Page Into Multiple Printed Pages

6 Min Read
Laravel 403 forbidden on shared hosting — root htaccess rewrite into public folder
Web Development

Fix “403 Forbidden” on Laravel Shared Hosting

8 Min Read
Enforce a minimum phone-number length in WooCommerce checkout
Web Development

How to Set a Minimum Length for Phone Numbers in WooCommerce

6 Min Read
How7o

We provide tips, tricks, and advice for improving websites and doing better search.

Tools

  • Age Calculator
  • Word Counter
  • Image Upscaler
  • Password Generator
  • QR Code Generator
  • See all tools→

Pranks

  • Fake Blue Screen Prank
  • Hacker Typer
  • Fake iMessage Generator
  • Windows XP Crash Prank
  • Windows 11 Update Prank
  • See all prank screens →

Company

  • About Us
  • Blog
  • Contact
  • Privacy Policy
  • Terms of Service
  • Sitemap
© 2024–2026 How7o. All rights reserved.
Welcome Back!

Sign in to your account

Username or Email Address
Password

Lost your password?