web-dev-qa-db-fra.com

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

Tout le monde sait comment créer un lien favicon.ico en HTML:

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

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

Le robot pointant vers favicon.ico, le numéro d’article 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 que le temps est venu d'effectuer des mises à niveau créatives sur le Web, bien que lui et moi ne soyons pas d'accord sur sa tenue, ce qui me semble un peu ridicule aujourd'hui ...

enter image description here

javascripthtmlcssperformancefavicon
290
Sam

Une amélioration mineure à @ yc's answer injecte le favicon codé en base64 à partir d'un fichier JavaScript normalement utilisé et mis en cache de toute façon, et supprime également le comportement standard du navigateur consistant à demander favicon.ico en lui fournissant un URI de données dans la balise meta correspondante.

Cette technique évite la requête http supplémentaire et son fonctionnement dans les versions récentes de Chrome, Firefox et Opera sur Windows 7 est confirmé). Toutefois, cela ne fonctionne pas semblent 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

130
Marcel

Je pense que pour la plupart, cela ne donne pas lieu à 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 réalité plus efficace que n’importe laquelle des "solutions" proposées.

140
James Anderson

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

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

Sans mise en cache statique de vos pages, votre favicon ne pourrait pas être mis en cache et, en fonction de la taille de votre image, le code source risquerait en quelque sorte de se gonfler.

Les favicons Data URI semblent fonctionner dans la plupart des navigateurs modernes; Je l'ai dans les dernières versions de Chrome, Firefox et Safari sur un Mac. Ne semble pas fonctionner dans Internet Explorer et éventuellement dans certaines versions d'Opera.

Si vous êtes inquiet à propos de Old IE (et vous ne devriez probablement pas l'être aujourd'hui)), vous pouvez inclure un commentaire IE qui conditionnerait le favicon.ico de manière traditionnelle, car il semble que l'ancien Internet Explorer ne prend pas en charge les favicons Data URI

`<!--[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 pouvez également ne pas gaspiller la demande HTTP avec une réponse 404 .

Vous pouvez également simplement utiliser le favicon d'un autre site populaire sur lequel leur favicon est probablement mis en cache, comme http://google.com/favicon.ico, de sorte qu'il soit servi à partir du cache.

Comme l'ont souligné les commentateurs, ce n'est pas parce que vous pouvez que cela devrait être fait, car certains navigateurs demanderont favicon.ico quelles que soient les astuces que nous imaginons. Cela vous donnerait une somme minime par rapport aux économies que vous réaliseriez en effectuant des tâches telles que gzipping, en utilisant des en-têtes à périmètre périmé pour le contenu statique, en minimisant les fichiers JavaScript, en insérant des images d'arrière-plan dans des sprites ou des URI de données. , servir des fichiers statiques à partir d'un CDN, etc.

94
Yahel

Vous pouvez utiliser un favicon codé 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" />
20
Dongsheng Cai

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

14
Pekka 웃

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

Vous insérez les données base64 de l'icône dans une feuille de style externe afin qu'elles soient 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 comme un background-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>
13
Felix Geenen

Est-ce que c'est vraiment important?

De nombreux navigateurs chargent le favicon avec une priorité faible afin qu'il ne bloque pas le chargement de la page, alors oui, c'est une demande supplémentaire mais pas sur un 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 et le nombre de requêtes ne sera pas réduit!

9
Andy Davies

La solution appropriée consiste à utiliser HTTP pipeline .

Le traitement en pipeline HTTP est une technique dans laquelle plusieurs demandes HTTP sont écrites dans un seul socket sans attendre les réponses correspondantes. Le traitement en pipeline est uniquement pris en charge dans HTTP/1.1, pas dans la version 1.0.

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

Le traitement en pipeline HTTP nécessite à la fois le client et le serveur pour le prendre en charge. Les serveurs conformes à HTTP/1.1 doivent prendre en charge le traitement en pipeline. Cela ne signifie pas que les serveurs sont tenus de traiter les réponses par pipeline, mais qu'ils ne doivent pas échouer si un client choisit de transmettre les demandes par pipeline.

De nombreux clients de navigateur ne le font pas, alors qu'ils le devraient.

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

  • Le traitement en pipeline est activé par défaut pour Opera. Il utilise des méthodes heuristiques pour contrôler le niveau de traitement en pipeline utilisé en fonction du serveur connecté.
  • Internet Explorer 8 n'entraîne pas le pipeline des demandes, en raison de préoccupations concernant les mandataires erronés et le blocage en tête de ligne.
  • Les navigateurs Mozilla (tels que Mozilla Firefox, SeaMonkey et Camino) prennent en charge le traitement en pipeline, mais il est désactivé par défaut. Il utilise des méthodes heuristiques, en particulier pour désactiver le traitement en pipeline des IIS serveurs.
  • Konqueror 2.0 prend en charge le traitement en pipeline, mais il est désactivé par défaut.
  • Google Chrome ne prend pas en charge le traitement en pipeline.

Je vous recommanderais d'essayer d'activer le traitement en pipeline dans Firefox et de l'essayer ici ou d'utiliser simplement Opera (frémir)).

7
Matt Joiner

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

6
cusimar9

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 à la question des favicon 404.

Parce que certaines applications et certains navigateurs vérifient un favicon.com et que l'icône ne se trouve pas dans la racine du site, vous pouvez simplement répondre à la demande avec l'en-tête 204 réponse .

Exemples Apache:

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

Redirect 204 /favicon.ico

Apache option deux:

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

Pour en savoir plus, il y a le billet de Nice sur le blog de Stoyan Stefanov à l'adresse http://www.phpied.com/204-no-content/

6
Anthony Hatzopoulos

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 ne voulez pas que votre site ait un favicon, vous pouvez simplement faire en sorte que href pointe sur une ressource non-icon déjà chargée (par exemple, une feuille de style, un fichier de script ou même une ressource avantages d'être pré-récupéré.)
    (Mes brefs tests indiquent que cela fonctionne avec la plupart des navigateurs principaux, sinon tous.)

  2. Acceptez la requête HTTP supplémentaire et assurez-vous que votre fichier favicon est doté d'un ensemble d'en-têtes de contrôle de cache HTTP agressif.
    (Si vous avez d'autres sites sous votre contrôle, vous pourriez même les avoir préchargés furtivement dans la favicon de ce site, ainsi que d'autres ressources statiques.)

P.S. Solutions créatives qui ne fonctionnera pas:

  • Le truc étrange CSS data-uri (lié à par le commentateur Felix Geenen) ne fonctionne pas .
  • Utilisation de Javascript pour effectuer une injection différée du favicon <link> element (comme suggéré par l'utilisateur @yc) ne fera qu'empirer les choses - en résultant en deux requêtes HTTP.
5
Már Örlygsson

Vous pouvez utiliser le format PNG 8 bits au lieu du format ICO pour une empreinte de données encore plus réduite. La seule chose à changer consiste à utiliser "data: image/png" au lieu de "data: image/x-icon", en-tête de type MIME:

<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 encodez la chaîne binaire PNG en chaîne base64 à l'aide de la commande base64:

base64 favicon.png
3
andrej

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!

2
rjobidon

Chaque image sur la page est une requête http distincte. Il n'y a donc rien de tragique à ce que Favicon en ait besoin.

0
Headshota