N'est-ce pas stupide qu'un petit favicon nécessite encore une autre requête HTTP? Comment puis-je mettre le favicon dans un sprite?

306

Tout le monde sait comment configurer un lien favicon.ico en HTML:

<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">

Mais je pense qu'il est tout simplement stupide que pour une petite icône de plusieurs octets, vous ayez besoin d' une autre requête HTTP . Je me suis donc demandé comment faire pour que cette image fasse partie d'un sprite (par exemple background-position=0px -200px;) afin d'accélérer et d'enregistrer cette précieuse requête HTTP. Comment puis-je intégrer cela dans une image de sprite existante avec mon logo et d'autres œuvres d'art?

Le robot pointant vers favicon.ico, l'article numéro 31 sur le graphique en cascade, est mon animal de compagnie ZAM. Il est généralement plus heureux et il a un bon point à me faire savoir qu'il est temps pour quelques mises à jour créatives sur le Web, même si lui et moi ne sommes pas d'accord sur sa tenue, ce qui je pense est un peu idiot aujourd'hui ...

entrez la description de l'image ici

javascript html css performance favicon Sam
la source
47
N'est-il pas stupide qu'il n'y ait pas encore de moyen de combiner .css / .js / .png / .html en un seul flux optimisé? Vous auriez pensé que quelqu'un aurait eu cette idée maintenant
RichardTheKiwi
9
@Richard: les réponses en plusieurs parties et Google ont une initiative pour un nouveau protocole Web optimisé qui résout ce problème, j'ai oublié son nom ... Edit : Il s'appelle SPDY . Mais c'est loin dans le futur, évidemment.
Pekka
9
@Richard aka cyberkiwi, vous pouvez tout mettre dans un fichier html avec des data:valeurs pour les images et les scripts en ligne.
zzzzBov
39
btw, nice sketch man :)
Fatih Acet
18
+1 pour le croquis :)
Giuliano

Réponses:

140

Une amélioration mineure de la réponse de @ yc consiste à injecter le favicon encodé en base64 à partir d'un fichier JavaScript qui serait normalement utilisé et mis en cache de toute façon, et à supprimer également le comportement standard du navigateur consistant à demander favicon.icoen lui fournissant un URI de données dans la metabalise appropriée .

Cette technique évite la demande http supplémentaire et est confirmée pour fonctionner dans les versions récentes de Chrome, Firefox et Opera sous Windows 7. Cependant, elle ne semble pas fonctionner au moins dans Internet Explorer 9.

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- Suppress browser request for favicon.ico -->
        <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
        <script src="script.js"></script>
...

script.js

var favIcon = "\
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVR42mNkwAOepOgxMTD9mwhk\
[...truncated for brevity...]
IALgNIBUQBUDAFi2whGNUZ3eAAAAAElFTkSuQmCC";

var docHead = document.getElementsByTagName('head')[0];       
var newLink = document.createElement('link');
newLink.rel = 'shortcut icon';
newLink.href = 'data:image/png;base64,'+favIcon;
docHead.appendChild(newLink);

/* Other JS would normally be in here too. */

Démo: turi.co/up/favicon.html

Marcel
la source
3
+1 belle percée en cache @Marcel. PS Les caractères dans le HTTP Headers Responsefichier .ico ont presque la même taille que mon icône !! Comment ça vous plait?
Sam
2
@Sam: J'ai remarqué que la base64 d'un équivalent PNG du fichier favicon.ico Stack Overflow était la moitié de la taille. Agréable et compact.
Marcel
1
eeehm je ne sais pas si je comprends ce que tu veux dire: 'le fichier était la moitié de la taille de ...? Fichier PNG comme icon.png? ou voulez-vous dire que son équivalent en base64 est plus petit lorsque son png est formaté à la place d'une icône formatée ou gif? curieuse. Vive mec!
Sam
1
@Sam: Je comparais la base64 de ce PNG à la base64 de ce fichier ICO . La version PNG, telle qu'utilisée dans mon exemple de code ci-dessus, fait la moitié de la taille.
Marcel
1
ooh je vois, cela rend votre réponse en base 64, et l'utilisation générale du format PNG base64 le choix préféré alors non?
Sam
150

Je pense que dans la plupart des cas, cela ne se traduit pas par une autre requête HTTP car celles-ci sont généralement vidées dans le cache du navigateur après le premier accès.

C'est en fait plus efficace que n'importe laquelle des "solutions" proposées.

James Anderson
la source
53
C'est la seule réponse sensée. Il s'agit d'un non-problème qui ne nécessite pas de correction.
JoDG
1
James, ma solution n'est vraiment qu'une possibilité, mais que je ne recommanderais jamais à quelqu'un. Mais, il semble que la plupart des navigateurs émettent une nouvelle demande HTTP pour le favicon au début d'une nouvelle session de navigateur. Et, il ne retourne pas toujours un 304.
Yahel
4
Le navigateur effectuera toujours un appel HEAD même s'il est dans le cache du navigateur, vous aurez donc toujours la surcharge d'une demande HTTP.
dietbuddha
3
En fait, tout dépend du navigateur. La plupart d'entre eux chercheront toujours un favicon à certains endroits même si la page ne le mentionne pas et feront un appel HEAD pour chaque rafraîchissement.
David Costa
14
Le favicon a besoin d'un long en-tête expirant comme toute bonne ressource statique. Avec cela, même les appels HEAD sont supprimés.
Paul Alexander
102

Vous pouvez essayer un URI de données. Pas de requête HTTP!

<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">

À moins que vos pages aient une mise en cache statique, votre favicon ne pourra pas être mis en cache, et en fonction de la taille de votre image favicon, votre code source pourrait devenir un peu gonflé en conséquence.

Les favicons URI de données semblent fonctionner dans la plupart des navigateurs modernes; Je le fais fonctionner dans les versions récentes de Chrome, Firefox et Safari sur Mac. Ne semble pas fonctionner dans Internet Explorer et peut-être certaines versions d'Opera.

Si vous vous inquiétez de l'ancien IE (et vous ne devriez probablement pas l'être de nos jours), vous pouvez inclure un commentaire conditionnel IE qui chargerait le favicon.ico réel de la manière traditionnelle, car il semble que l'ancien Internet Explorer ne le fasse pas. prise en charge des favicons URI de données

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `
  1. Incluez le fichier favicon.ico dans votre répertoire racine pour couvrir les navigateurs qui le demanderont de toute façon, car pour ces navigateurs, s'ils vérifient déjà quoi que vous fassiez, vous pourriez tout aussi bien ne pas gaspiller la demande HTTP avec une réponse 404 .

Vous pouvez également simplement utiliser le favicon d'un autre site populaire qui est susceptible d'avoir son favicon mis en cache, comme http://google.com/favicon.ico, afin qu'il soit servi à partir du cache.

Comme l'ont souligné les commentateurs, ce n'est pas parce que vous pouvez le faire que vous le devriez, car certains navigateurs demanderont favicon.ico quelles que soient les astuces que nous concevons. La quantité de frais généraux que vous économiseriez en faisant cela serait minuscule par rapport aux économies que vous obtiendriez en faisant des choses comme gzipping, en utilisant des en-têtes expirant très loin pour du contenu statique, en réduisant les fichiers JavaScript, en mettant des images d'arrière-plan dans des sprites ou des URI de données , servant des fichiers statiques à partir d'un CDN, etc.

Yahel
la source
1
@Pekka oui, ce n'est pas vraiment une solution pratique, car le poids supplémentaire des URI de données sur les pages non mises en cache dépasserait probablement le poids de cette requête HTTP. Peut-être que OP peut injecter le favicon dans le DOM de manière asynchrone.
Yahel
4
@Sam Je suis désolé, je comprends ce que @yc signifie maintenant, mon erreur. Bien sûr, vous pouvez parfaitement accéder à l' <link rel>élément dans le navigateur via JavaScript, cela devrait être possible. J'ai même vu un jeu programmé de cette façon ... mais il ne semble pas non plus fonctionner dans IE, et cela n'empêchera probablement pas la /favicon.icodemande de recherche par défaut
Pekka
2
@Pekka, je vois. PS c'est un jeu incroyable! Fait honte à tout mon écran, car tout ce dont vous avez besoin est que 16x16 pixels haha. Cet hyperlien ouvre certaines possibilités quant à ce qui est réellement possible avec ce favicon.
Sam
3
En cas de déclaration de favicon manquante, tous les navigateurs demanderont automatiquement l'URL par défaut /favicon.icodans une tentative aveugle de la localiser. Donc, si vous omettez le favicon <link>(pour l'ajouter plus tard via Javascript), vous ne faites qu'empirer les choses.
Már Örlygsson
2
Utilisez simplement favicon.ico pour stocker votre gif transparent :)
markijbema
21

Vous pouvez utiliser un favicon encodé en base64, comme:

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
Dongsheng Cai
la source
1
Astuce: la chaîne encodée en base64 utilisée dans cette réponse est un fichier PNG et ne fonctionnera pas avec IE10 ou une version antérieure.
sibbl
2
Au cas où quelqu'un voudrait le savoir, c'est le pingouin Linux.
Martlark
17

J'ai trouvé une solution intéressante sur cette page . Il est allemand mais vous pourrez comprendre le code.

Vous placez les données base64 de l'icône dans une feuille de style externe, donc elles seront mises en cache. Dans la tête de votre site Web, vous devez définir le favicon avec un identifiant et le favicon est défini commebackground-image dans la feuille de style pour cet identifiant.

link#icon {
    background-image:url("data:image/x-icon;base64,<base64_image_data>");
}

et le html

<html>
    <head>
        <link id="icon" rel="shortcut icon" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="/styles.css" />
        ...
    </head>
    <body>
        ...
    </body>
</html>
Felix Geenen
la source
8
Une personne de 74.947 points de réputation a dit quelque part sur cette page: "Vous ne pouvez pas!" ... Puis une autre personne avec moins de 50 points de réputation a dit: "Tu peux!" Cela signifie-t-il que la recherche de solutions et la recherche concrète d'innovation n'ont aucun lien ou relation avec une réputation acquise? ... Et bien c'est juste génial!
Sam
4
Je viens de confirmer que cette solution ne fonctionne pas - du moins pas dans Chrome 10 et Firefox 3.6 sous Windows
Már Örlygsson
13
Je viens de confirmer que cette solution fonctionne - au moins dans Chrome 10.0.648 sur W7 64 bits et dans FF 4.0 sur W7 64 bits
Sam
4
LOL, j'ai confirmé que les deux déclarations ci-dessus semblent contradictoires, malgré les numéros de version légèrement différents, je doute que le comportement de Chrome ait beaucoup changé. Firefox est peut-être passé de 3,6 à 4, mais il est peu probable que Chrome 10 ait beaucoup changé sur une mise à jour mineure.
dyasta
Je peux confirmer que cela fonctionne sur Chrome 83 et Firefox ESR 68 sur Ubuntu 20.04, et je peux confirmer que cela ne fonctionne pas pour empêcher le hit sur /favicon.ico. Vous obtenez donc l'image mais vous n'empêchez pas la connexion SSL supplémentaire. Puisque c'était l'objectif, c'est un échec.
Wil
14

Bon point et bonne idée, mais impossible. Un favicon doit être une ressource unique et distincte. Il n'y a aucun moyen de le combiner avec un autre fichier image.

Pekka
la source
1
Je suis peut-être aveugle, mais le seul endroit où je vois le favicon de recherche Google est dans un sprite: google.com/search?q=foo
Yahel
4
@yc google.com/favicon.ico est l'endroit où les navigateurs le rechercheront automatiquement
Pekka
3
@yc vous n'êtes pas aveugle, vous vous êtes montrée digne d'une réponse très créative là-haut ... comme Pekka l'a déjà souligné, /favicon.icoc'est là que les navigateurs vont chercher automatiquement. Maintenant vient la vraie mauvaise nouvelle: si le favicon est NON existant, cela signifie une pénalité d'erreur 404 qui entraînera également un léger retard !! Il ne semble pas possible de s'échapper de ce donjon de favicon. Ils sont si minuscules mais oh si puissants ... bon sang :)
Sam
Voir ma réponse stackoverflow.com/questions/5199902/… pour la bonne façon d'accélérer la bonne façon.
Matt Joiner
8
Il convient de noter que cela devrait, en réalité, être une demande unique, à peu près pour toujours. Comme pour tout le reste, de longs temporisateurs de cache et des 301 appropriés retournés par le serveur feront que le favicon demande un point discutable (à moins qu'il n'existe pas - oui!).
Kevin Peno
9

Est-ce que c'est vraiment important?

De nombreux navigateurs chargent le favicon comme une priorité faible afin qu'il ne bloque pas la charge de la page de toute façon, donc oui, c'est une demande supplémentaire mais ce n'est sur aucun chemin critique.

La solution acceptée est horrible car jusqu'à ce que le JS ait été récupéré et exécuté, tous les éléments DOM ci-dessous seront bloqués lors du rendu et cela ne réduira pas le nombre de demandes!

Andy Davies
la source
8

La bonne solution consiste à utiliser le pipelining HTTP .

Le pipelining HTTP est une technique dans laquelle plusieurs requêtes HTTP sont écrites sur un même socket sans attendre les réponses correspondantes. Le pipeline est uniquement pris en charge dans HTTP / 1.1, pas dans 1.0.

Il est nécessaire que les serveurs le prennent en charge, mais pas nécessairement participer.

Le pipelining HTTP nécessite à la fois le client et le serveur pour le prendre en charge. Des serveurs conformes HTTP / 1.1 sont requis pour prendre en charge le pipelining. Cela ne signifie pas que les serveurs sont requis pour canaliser les réponses, mais qu'ils ne doivent pas échouer si un client choisit de canaliser les demandes.

De nombreux clients de navigateur ne le font pas quand ils le devraient.

Le pipelining HTTP est désactivé dans la plupart des navigateurs.

  • Opera a le pipelining activé par défaut. Il utilise l'heuristique pour contrôler le niveau de pipelining utilisé en fonction du serveur connecté.
  • Internet Explorer 8 ne traite pas les demandes, en raison de préoccupations concernant les proxys de bogue et le blocage de tête de ligne.
  • Les navigateurs Mozilla (tels que Mozilla Firefox, SeaMonkey et Camino) prennent en charge le pipelining mais il est désactivé par défaut. Il utilise certaines heuristiques, en particulier pour désactiver le pipelining pour les serveurs IIS.
  • Konqueror 2.0 prend en charge le pipelining, mais il est désactivé par défaut. [Citation nécessaire]
  • Google Chrome ne prend pas en charge le pipelining.

Je vous recommande d'essayer d'activer le pipelining dans Firefox et de l'essayer là-bas, ou d'utiliser simplement Opera (shudder).

Matt Joiner
la source
7
Pipeline d'une optimisation effectuée dans la couche transport. Cela implique toujours un aller-retour HTTP séparé pour le favicon, c'est ce que la question pose.
Már Örlygsson
@ Már Örlygsson qui n'est pas correct. Un aller-retour signifie que le client doit faire une demande, puis attendre que la demande soit traitée et que la réponse soit téléchargée. Le pipelining signifie que la demande sera déjà envoyée en attendant la fin de la demande précédente, donc pendant que les mêmes étapes se produisent, le retard qu'elle causera ne sera pas le même ...
Peter
1
Sam ne peut pas activer le pipeline dans tous les navigateurs de ses visiteurs, donc en ce sens, cette solution ne fera pas charger son site plus rapidement - sauf pour lui personnellement.
Már Örlygsson
3
@ Már Örlygsson et ses électeurs: cela ne se fait pas dans la couche de transport. Dans les modèles du monde réel, tout cela se fait dans la couche application. Théoriquement, le pipelining devrait être au niveau de la session.
Matt Joiner
4
Je ne discuterai pas de cette sémantique avec vous. Le fait est toujours vrai que Sam ne peut pas "utiliser le pipelining" (aussi soigné soit-il) pour accélérer le chargement de son site pour ses visiteurs, car le support de piplining est A) irrégulier comme vous le dites vous-même, et B) opt-in par chacun utilisateur individuel.
Már Örlygsson
6

Pas vraiment une réponse à la question mais simplement pour compléter les réponses données par Marcel et yahelc, j'offre une solution élégante au problème du favicon 404.

Parce que certaines applications et navigateurs et ainsi de suite recherchent un favicon.com et si l'icône ne se trouve pas à la racine du site, vous pouvez simplement répondre à la demande avec la réponse 204 tête de .

Exemples Apache:

Apache option un (et mon préféré), simple doublure dans vos .htacces ou .conf:

Redirect 204 /favicon.ico

Apache option deux:

<Files "favicon.ico">
    ErrorDocument 204 ""
</Files>

Pour plus de lecture, il y a un bel article de blog de Stoyan Stefanov sur http://www.phpied.com/204-no-content/

Anthony Hatzopoulos
la source
Oui, mais comme la demande est en cours et que le favicon est souvent utilisé de manière significative, je pense qu'il vaut la peine de fournir l'icône plutôt qu'une réponse vide. La compression de l'icône via gzip le ramènera souvent à une seule taille de paquet TCP de toute façon
Andy Davies
5

Je suis désolé, mais vous ne pouvez pas combiner le favicon avec une autre ressource.

Cela signifie que vous avez essentiellement deux options:

  1. Si vous êtes à l'aise avec le fait que votre site n'ait pas de favicon - vous pouvez simplement avoir le hrefpoint sur une ressource non icône qui est déjà en cours de chargement (par exemple, une feuille de style, un fichier de script ou même une ressource qui bénéficie d'être préchargée .)
    (Mes brefs tests indiquent que cela fonctionne sur la plupart, sinon la totalité, des principaux navigateurs.)

  2. Acceptez la demande HTTP supplémentaire et assurez-vous simplement que votre fichier favicon possède des en-têtes de contrôle de cache HTTP agressifs.
    (Si vous avez d'autres sites Web sous votre contrôle, vous pouvez même les faire précharger sournoisement le favicon de ce site Web - ainsi que d'autres ressources statiques.)

Solutions créatives PS qui ne fonctionneront pas :

  • Le truc bizarre de data-uri CSS (lié par le commentateur Felix Geenen) ne fonctionne pas .
  • L'utilisation de Javascript pour effectuer une injection retardée de l' <link>élément favicon (comme suggéré par l'utilisateur @yc) ne fera qu'empirer les choses - en entraînant deux requêtes HTTP.
Már Örlygsson
la source
1
d'autres solutions qui ne fonctionneront pas: plusieurs icônes dans un .ico, et l'utilisation de l'ico dans une balise d'image dans l'espoir qu'il y affichera une autre image, plutôt que comme favicon. Réunir le favicon avec un autre fichier.
markijbema
5

C'est une excellente idée, mais si Google ne l'a pas fait sur sa page d'accueil, je parie que cela ne peut pas (actuellement) être fait.

cusimar9
la source
13
Google est génial, mais penser comme ça semble contre-productif et étouffant. Il y a toujours de nouvelles façons de faire les choses, meilleures et très possibles, et vous n'avez pas à travailler pour un leader de l'industrie pour les proposer.
Erreur de syntaxe
10
De toute évidence, Google tire ses idées de SO, et non l'inverse;)
user123444555621
3
Bonne réponse, si Google pouvait rendre leur page plus rapide, ils le feraient.
David d C e Freitas
3

Vous pouvez utiliser un PNG 8 bits au lieu du format ICO pour une empreinte de données encore plus petite. La seule chose que vous devez changer est d'utiliser l'en-tête de type MIME "data: image / png" au lieu de "data: image / x-icon":

<link
  href="data:image/png;base64,your-base64-encoded-string-goes-here"
  rel="icon" type="image/png"
/>

L'attribut "type" peut être "image / png" ou "image / x-icon", les deux fonctionnent pour moi.

Vous pouvez convertir ICO en png 8 bits en utilisant gimp ou convertir:

convert favicon.ico -depth 8 -strip favicon.png

et encoder le binaire PNG en chaîne base64 à l'aide de la commande base64:

base64 favicon.png
andrej
la source
2

Voici le moyen le plus simple:

<!DOCTYPE html><html><head> 
<link rel="shortcut icon" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3
JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9y
Zy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG
lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25z
LmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj
4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAg
PC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABLJJREFUWAnFV+trW2UY/yVN0j
S32q6bnWunQ1e11k3YXMUy8AbDoSBDv4mfFPTj/gD9ug/7B/woqCCISnGItcyppbgN
Rhn2st5G2yxt1svSJe1yPYnP703fcs7JSZo4YS9Ncs57eX6/5/Y+T12fX7hYdAHy92
iG+1GCU2X3/6V3k9sNl8uFUqnUkMiHJkDfuQV4M7WFbC4Hr8fTEAlPQ3RtmwleFI0z
mQxO95/EQP8pLEaj+PaHQbS3RmAUi7YTla8PRYDGLhgGPnz/HI719Srp0VgMhszRHf
WM/+wC+jy1tY2zb72uwOl7WmPi1gwCfr887609CdZtAfpZa0XNc/k8nug8gBPHjylF
uTY7N4/JmVmEQkFlBbWwx9eeBNyiKbVLZ7IKlEAtomEmm0Vvz1G0tLQoiKXoHXzz/Y
9qX75QgM/jhb/ZB5KtlRk1CdDM2+k0SKLn6SM4KBoXRHhsOY6J2XmsbWxgdv42Jqdn
cH3sJo4c7sKhg50oFku4s7yMuYUleJqahEizzDm7pCoBgt8XH7/Q8wzOvPmamLtz1w
UMvPjdu1hYjIrPp9He9hjOf/oJ9rW37e5hBiwuRXFpaBjR5RWEgkFHEq4vLlysuDkI
nhTwV068hPfeOau0oJ21KXUsKNvbvux7suKq734axNT0nLhOLCHuNI8KC1B4Wg7RnO
++fUaB03x0gxlYA1EYZcoxta73cJ3PD8SFuWxOnbdCl2k4EuCN9sbpATT7fMpsBLcP
DcR5gpuHBk8mU/jyq6+xcW8TYckMpziwSKagvKTX4x0deOpwt5JpBjKD1PM8eu064q
vraI2EHcEpw0pAqnK+YODA/n3wS6pxNEpAa58TK05IdoQl+AyjoGQ5fVkI0JbFoqEi
tlFgu/C01IeM3B2UY4s7y1YrAbXUeEm1SNx58Un8sDJKiNbsdiwEaD6m4JakoFPAOA
HZ57TleFs+2d2lMsotl1G1YSHATR5PEzYSCXXt8p2kGh36zED/y+o8qyNridOwEOBB
j5htI7GJ1bU1p/11zZX9XkJ31yF89MG5nTpScAxoCwFKZ86z8NxeWKwLrNom7YrjL/
bh/GcfY39Hu2RYJYkKAvR9KBjAjZv/CJHMThQ37gYS066IhMNgWmpSZtIVBHio2euV
AhLH+OSU2qsFmQ828jx69Rpi8VX4vJX9YgUBCmbBCIsVhv8cQTKVKt/jDsFIYvpjJ0
RLUuPYygqujF5FG3tEo7IkOxKgUObwvcR9DF2+omRTmE5NDco5/dFzSoGd4sWaMvjL
kCJZJQmsV7FZC9bziBSQv2+M4Y+RUbWki5IGZXPC1oy/eo4buY9W/PnX3zC/uFTuEa
VJcRoV1dC8iSRawyFcGv4dqe1tvHrqpFS1EFbX1zE+dQvT0hVlpNSyzvc+exR9zz8n
zUmbVL8ELv81grHxSbTK/lrtuWNDYibBZ14iSSEQlP6PGbIpZTadzkg/6Fdr1PaBvI
cCLYgIYa7TKsFAYNdtdpn6vaYF9CYCREQTxkBS/gPySZb42SvIvDhYNQRsQBlkal3i
R/cSWka137oI8LAOQF7VDDiDwHrw3Si/l9eFl5CtZzhmQa2DZlynfXut28/8C/JOMz
7+5SRKAAAAAElFTkSuQmCC">
</head></html>

Quelle icône cela représente? Répondez et votez ci-dessous!

rjobidon
la source
1
L'icône de la pomme?
styfle
2

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 .svgformat.

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" />
Rounin
la source