Killer Solution en 2020
Cette solution intervient nécessairement neuf ans après que la question a été posée à l'origine, car jusqu'à assez récemment, la plupart des navigateurs n'étaient pas en mesure de gérer les favicons au .svg
format.
Ce n'est plus le cas.
Voir: https://caniuse.com/#feat=link-icon-svg
1) Choisissez SVG comme format Favicon
À l'heure actuelle, en juin 2020, ces navigateurs peuvent gérer les favicons SVG :
- Chrome
- Firefox
- Bord
- Opéra
- Chrome pour Android
- Navigateur KaiOS
Notez que ces navigateurs ne peuvent toujours pas:
- Safari
- iOS Safari
- Firefox pour Android
Compte tenu de ce qui précède, nous pouvons utiliser en toute confiance un Favicon SVG .
2) Présentez le SVG comme un URI de données
L'objectif principal ici est d'éviter les requêtes HTTP.
Comme d'autres solutions l'ont mentionné, une façon assez intelligente de le faire est d'utiliser un URI de données plutôt qu'une URL HTTP .
Les SVG (en particulier les petits SVG) se prêtent parfaitement aux URI de données, car ces derniers sont simplement en texte brut (avec tous les caractères potentiellement ambigus codés en pourcentage) et les premiers, étant XML, peuvent être écrits comme une longue ligne de texte en clair (avec une poignée des codes de pourcentage) incroyablement simple.
3) L' ensemble SVG est un Emoji
En décembre 2019, Leandro Linares a été l'un des premiers à réaliser que depuis que Chrome avait rejoint Firefox pour prendre en charge les favicons SVG, il valait la peine d'expérimenter pour voir si un favicon pouvait être créé à partir d'un emoji:
https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/
L'intuition de Linares avait raison.
Quelques mois plus tard (mars 2020), Code Pirate Lea Verou a réalisé la même chose:
https://twitter.com/leaverou/status/1241619866475474946
Et les favicons n'étaient plus jamais les mêmes.
4) Implémenter la solution vous-même:
Voici un SVG simple:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16 16">
<text x="0" y="14">🦄</text>
</svg>
Et voici le même SVG qu'un URI de données :
data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E
Et, enfin, voici cet URI de données en tant que Favicon:
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
5) Plus de trucs
Étant donné que le Favicon est un SVG, un certain nombre d'effets de filtre (SVG et CSS) peuvent lui être appliqués.
Par exemple, à côté du Favicon de licorne blanche ci-dessus, nous pouvons facilement créer un Favicon de licorne noire en appliquant le filtre:
style="filter: invert(100%);"
Favicon de licorne noire:
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />