Building a Favicon Finder: Why It's Harder Than You Think

How hard can it be to get a website's favicon? Just fetch /favicon.ico , right? Wrong. I tried building a reliable favicon finder and fell down a rabbit hole of legacy standards, broken markup, and bizarre edge cases. Here's everything I learned. The Naive Approach const faviconUrl = new URL ( ' /favicon.ico ' , siteUrl ). href ; This works for maybe 70% of sites. For the rest, you'll get a 404, a redirect to the homepage, or a 1x1 transparent pixel. The Problem: There's No Single Standard Over the years, multiple ways to specify favicons have emerged: 1. The Original: /favicon.ico From the late 1990s. Browsers would automatically look for /favicon.ico at the root of every domain. No HTML tag needed. https://example.com/favicon.ico Problem: Many modern sites don't have a file at this path anymore. 2. HTML Link Tags (Many Variants) <!-- Standard --> <link rel= "icon" href= "/favicon.png" > <!-- With type --> <link rel= "icon" type= "image/png" href= "/favicon-32x32.png" > <!-- Legacy IE