why does adobe.com (or would any website) use `<link rel="icon" href="data:,">`?
Zach Leatherman 5252 replies 1313 likes11 repost Original on BlueskyOriginal on MastodonAlso posted to Mastodon.
52 replies
@zachleat as someone who knows the website, I can only guess that it's one of the many measures to make the user experience as shitty as possible.
@matuzo oh no.
@zachleat to avoid the /favicon.ico request and 404 response, I guess?
@sstephenson ah, hmm. I still see favicon.ico requests in the network panel though.
…the plot thickens: https://www.adobe.com/libs/utils/favicon.js
@zachleat Is there a whole dataURI there?
@andydavies no, that’s all of the code
I… uh… think they might be loading a favicon with JavaScript? www.adobe.com/libs/utils/f...
-
*arms wave wildly*
They do a lot of rubbish like this as a part of their new framework sadly.
The initial html the LCP image likely has loading='lazy' and in JavaScript they will change it to loading eager to make lighthouse "happy".
Adobe is just a perfect example of what not to do.n
For as long as we've had web technology some people have been desperate to use something, anything else
I mean, it *is* Adobe. Everything they do is slightly awkward, kinda weird...
Correcto, el script inserta dinámicamente un `<link rel="icon">`. Si solo necesitas un favicon estático, usar la etiqueta en el HTML evita esa carga extra. Para cambiarlo en runtime, crea o actualiza el `<link>` con un nuevo href (añadiendo un cache‑bust). #frontend
-
objection!! 😅
All I can think of is that it allows for a unit test
what are we testing there
ah, so I hadn’t realized that adobe.com was client-rendered www.speedlify.dev/site/www-ado...
I added a warning in speedlify2 for that.
Yeah it looks to be what Adobe claim is the "future of frontend" called EDS, which is a client side render, for pages that could be static generated.
They talk a lot about perfect lighthouse score, at what seems like a cost to real users. The header is a tell they load that last for some reason.
Huh. 😬
-
well, seems like they’re using JavaScript to load their favicon, for some reason: https://www.adobe.com/libs/utils/favicon.js
-
-
@zachleat this is when using JavaScript is not needed. Seems to be a “dynamic” way to get the “correct” favicon maybe based on page, product, etc?
-
@zachleat Maybe your creative cloud plan doesn't include Adobe Favicon
@zachleat my guess is they either once had a dynamic favicon generator (for product variations, status or something), or their CMS doesn’t have a favicon set, so the default is empty data URI
Would this count?
css-tricks.com/emoji-as-a-f...
It's nice to have it as a one liner rather than dealing with an extra file!
Supported almost everywhere that matters except on google search results I thinkto be clear adobe is using an empty data URI: not any value there at all!
very fair I was just checking! I thought maybe we were disavowing all data urls so just wanted to share my fav usage
ah, right on! yeah I have no qualms with that!
So what this does is prevent chromium from auto-fetching <url>/favicon.ico on page parse.
`data:,` is the smallest valid URL.
yeah! then I went deeper and found they were loading their favicon with JS — still left wondering why though 😅
perhaps to account for light / dark mode?
maybe! that JS file doesn’t seem to indicate that’s happening on first glance
Yeh, but what’s the point in doing that?
Preventing a bunch of (presumably) 404-returning http requests on the server
I think my very specific question might be: why the empty favicon instead of a branded favicon.ico. It makes me wonder if it’s still requested when a higher quality favicon is available?
well, they're a bigcorp so i assume:
- they needed a way to dynamically serve different favicons (time, locale, events) & it was just easier (for the team, for access mgmt) to build those rules in a js file than elsewhere
- 'under no circumstance should you show a stale favicon' success criterion.yeah, that seems logical (though I disagree with their conclusion 🤔)
Unless they’ve actually got a favicon in the root they’ll still get a bunch of 404s as plenty of services on the web go looking for it
But doesn't the null value of data stop the second request for the favicon? The page pops up a where to go choice, USA or UK in my case, and when you make a choice the url has a parameter appended and also an actual favicon in the html. It's a a messy solution and i bet the brand teams don't know.
Only in a browser… there are many other things that request the default favicon.ico
And if a site doesn’t have one it’s no that unusual to see them serve a custom 404 page in response!
Adobe actually has a default favicon.ico
Yes. But looks like someone made a decision to only load it after that initial page. I can’t think of a good tech reason other than size of log files and reducing number of times a year a full log brings down servers
or they are hedging in case they need to split the company and change logos - nothing that a cache purge would not sort out though!
First came across it sometime around 2012 Ecotricity has a pair of load balanced servers — one had a favicon and one didn’t
Don’t come across it as much now but haven’t looked for a while
That I did not know and need to read up on! Ta!
I imagine at Adobe scale it matters in terms of pure bandwidth costs even if there are other services also auto fetching.
To prevent the browser from picking the one in the root by default?