Downloading that little icon you see in you browser tabs should be a simple exercise. It turned out to be a lot more complicated than I thought. Be vigilant that you are not shaving a Yak. This is my story...
That's so funny, I've never seen one moving. Do browsers just convert the first frame into a static icon on the fly when they're downloaded or have I just never noticed one moving?
You can use an animated png too! A fun edge I found back in the day was apng allows you to have a static frame for viewers that don't understand apngs. Firefox understood apng, but if you bookmarked the page it would show the first frame of the animation rather than the static frame. The bug I opened for that is now 10 years old. :)
They’re just not common, that’s all. Most browsers support them (not sure about Chrome, but I believe all the rest do), and even if the browser nominally doesn’t, you can change the favicon dynamically in JavaScript to achieve the same effect (think how some services change their favicon to show an unread count or “new message” indicator, and then start doing that repeatedly—though when the tab is in the background, that’ll probably only net you 1fps).
I glanced over it quickly. A lot of the code files are really small, a couple of lines each. The rest is a mixture of actual logic, boilerplate and integration overhead (mostly due to a lot of event based asynchronous task handling). The overhead comes with the territory when integrating something into a big codebase such as a browser. The business rules are still a few 100 lines, though.
Funny how google keeps this service around indefinitely but will kill off any number of other services :-) Though, I'm sure this is much cheaper to keep the lights on vs. something like Wave (RIP) or Plus.
Another recent complication is serving different favicons for browsers running a dark mode. For example, somehow nytimes.com inverts theirs on my browser and it actually looks great. Sites need to be aware that a dark icon over a transparent background will be invisible in dark mode.
This is an annoying downside of dark mode, which I tend to have enabled on everything all the time: Favicons often don't look good (github, circleci...). Also many slack emoji don't show up.
I don't know if there's a good solution to this. It's unfeasible to require developers to provide two icons, particularly in places that are mothballed. Should browsers always render favicons against a light/white background?
It's not really a problem of dark vs. light, it's the fact that transparency in a generic logo is a pretty bad idea. I'm not sure what transparency is supposed to solve that an explicitly designed color wouldn't.
Favicons are also not always defined in <head>, they are automatically requested by the browser whether you have the <link> tag or not. The <link> tag mainly allows you to specify locations and file types other than the default /favicon.ico.
I always try to squash as much of the complexity as I can with some well tested tools or libraries.
In this case I'd use imagemagick's convert to resize and convert any of the possible file formats to the type of image I need. Solves a lot of points on this list.
For the download part, curl would also solve a few points (ssl, redirects).
Of course it depends if you're writing this for a SaaS product, a desktop or mobile Application.
This article on how ridiculous it is trying to sort favicons out from the end user perspective reminded me of how difficult it was to get right as a creator.
I've used https://www.ionos.ca/tools/favicon-generator in the past. It has the image upload ability as well as the ability to quickly draw something on a 16x16 pad for when you just want an absurdly simply icon.
(in no way affiliated with the site)
Favicons can be TIFF? Browsers don't have support for TIFF—for one, libtiff has historically been a huge source of security vulnerabilities. What pages have TIFF favicons?
I had a list of 500 domains that I used for testing when originally developing. To be clear I don't recall seeing tiff files loaded in browsers, but I definitely remember seeing them downloaded and crashing my code.
I wrote favicon-getter just as a means to populate an icon next to a list of links in another project. Hence, all the references to Yak-shaving.
In the end I just assumed that I would "almost" never see a tiff used as favicon and move on.
38 comments
[ 3.6 ms ] story [ 74.7 ms ] threadThat's so funny, I've never seen one moving. Do browsers just convert the first frame into a static icon on the fly when they're downloaded or have I just never noticed one moving?
http://www.p01.org/defender_of_the_favicon/
(Press N to start, the arrow keys to move.)
EDIT: Found it! https://www.google.com/s2/favicons?domain=
(simply add a domain name after '=' and it will return the website favicon)
"<img src="https://www.google.com/s2/favicons?domain=news.ycombinator.c... />"
18: sometimes favicons are not square
19: sometimes favicons have transparent pixels (GIF) or an alpha channel (PNG)
May I add those with credit to you?
I don't know if there's a good solution to this. It's unfeasible to require developers to provide two icons, particularly in places that are mothballed. Should browsers always render favicons against a light/white background?
I use this tool: https://realfavicongenerator.net/
Rather than make everything simple it makes everything easy.
Thanks to the Sam for immersing in that subject so others can reap the benefit.
Some issues we have seen:
- Pages that say they are one encoding but are actually another
- Redirects to other sites
- invalid contents or malformed content. How hard should we try to interpret what they meant? For example, an html page that looks like a valid CSV.
- Page too long or extremely slow
- Invalid certs
I wrote favicon-getter just as a means to populate an icon next to a list of links in another project. Hence, all the references to Yak-shaving.
In the end I just assumed that I would "almost" never see a tiff used as favicon and move on.
The consistent problem for me is that cloudflare doesnt like (some/certain/it seems random) ip ranges or user agents and pops up a captcha immediately
https://scrapinghub.com/crawlera