I briefly considered adding this to my site as it seemed fun, but in practice:
The different favicon sizes (especially compared to the vanilla cursor size) making interactions feel jarring
It feels weird to not have the cursor be some sort of pointer (most favicons are circular or square)
This can be neatly solved if there was a way to anchor an image to the cursor (without Javascript), but I have no idea how that should work (in terms of CSS syntax).
I’m not sure how much it interrupts reading on your site, but the trade off is that your approach works on touch screens, which have no hover event. As it’s extra information, that’s probably fine. This approach also won’t work with screen readers, whereas yours might if you put something sensible in alt text.
Gwern’s website uses custom, size-adjusted, monochrome icons for certain external links, which mitigates the “reading flow” issue to an extent.
For link-dense text like boehs’ linked article whereeverywordisadifferentlink though the readability issue remains… I’m not sure what the optimal balance would look like.
Aside: Link-dense text in itself has a different problem where with certain link styles (eg. only color, no underline), it can be completely non-obvious that each word links to a different site, so maybe the method of emphasis is flawed by default.
Means that DuckDuckGo (or whatever favicon service you are using) is getting user statistics about how many people visit your site and hover on links though.
I briefly considered adding this to my site as it seemed fun, but in practice:
This can be neatly solved if there was a way to anchor an image to the cursor (without Javascript), but I have no idea how that should work (in terms of CSS syntax).
I think you can rely on some public image service (such as https://images.weserv.nl/) to resize it, there could be some service to add a cursor there.
On my blog, I put the icons inline. I sorta like this one more, might try it out.
I’m not sure how much it interrupts reading on your site, but the trade off is that your approach works on touch screens, which have no hover event. As it’s extra information, that’s probably fine. This approach also won’t work with screen readers, whereas yours might if you put something sensible in alt text.
I did consider doing that - but it makes it rather hard to read the text.
I like the use of IndieWeb Avatar though!
Gwern’s website uses custom, size-adjusted, monochrome icons for certain external links, which mitigates the “reading flow” issue to an extent.
For link-dense text like boehs’ linked article where every word is a different link though the readability issue remains… I’m not sure what the optimal balance would look like.
Aside: Link-dense text in itself has a different problem where with certain link styles (eg. only color, no underline), it can be completely non-obvious that each word links to a different site, so maybe the method of emphasis is flawed by default.
seems like a square wheel to me, because
Means that DuckDuckGo (or whatever favicon service you are using) is getting user statistics about how many people visit your site and hover on links though.