📝 Fashionable Favicons | Robert Kossessa

Why? 🤔

If you have spent more than a minute on this website, you'll know that I like putting icons and emojis in text. 📝 They make everything more fun and serve as a visual aid to quickly identify links and topics. 🧠

Now, I could go and manually download and resize every single favicon I want to use, but that would be a lot of work. 💩 Instead, I fetch them dynamically at build time, convert them to .webp and serve them statically.

Look at them go! 🚀

Facebook

Twitter

Instagram

GitHub

Minecraft

YouTube

Spotify

Discord

Twitch

Slack

Google

Apple

xkcd

The easy way 🥲

Having favicons show up next to links could be soo easy:

<a href="https://kosro.de">
  Click me
  <img src="http://www.google.com/s2/favicons?domain=kosro.de" />
</a>

This works thanks to Google's internal favicon API. There's also some other services that offer this, like DuckDuckGo and Yandex:

https://www.google.com/s2/favicons?domain=kosro.de?sz=64

https://icons.duckduckgo.com/ip2/kosro.de.ico

https://favicon.yandex.net/favicon/v2/kosro.de/reddit.com

Keep in mind that these services are not officially documented and could be taken down at any time.

The GDPR

basically (and rightly 😈) regards the USA as a third world country, thanks to it's horrid privacy laws.

As IP addresses are considered personal data, explicit consent is required before any requests may be made to a server in the USA.

This means that directly using most favicon APIs is a no-go for any website that wants to be GDPR compliant. Shucks. 💩

The hard way 🪨

Luckily, Nuxt Image

has a solution for this. It's a module that allows you to fetch images statically at build time. This means that the images are already on the server when the user requests the page, and no further external requests are made.