N'est-ce pas idiot qu'un petit favicon nécessite encore une autre requête HTTP? Comment faire pour que favicon aille dans un sprite?

je pense que pour la plupart, cela ne donne pas lieu à une autre requête HTTP car celles-ci sont généralement stocké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.

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 pourrait pas être mis en cache, et selon la taille de votre image de favicon, votre code source pourrait être gonflé en conséquence.

données URI favicons semble fonctionner dans la plupart des navigateurs modernes; Je l'ai travailler dans les versions récentes de Chrome, Firefox et Safari sur un Mac. Ne semble pas fonctionner dans Internet Explorer, et peut-être quelques versions D'Opéra.

si vous êtes inquiet au sujet du vieux IE (et vous ne devriez probablement pas l'être ces jours-ci), vous pourriez inclure un commentaire conditionnel IE qui chargerait le favicon réel.ico à la manière traditionnelle, car il semble que l'Internet Explorer plus ancien ne supporte pas de données URI Favicons

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `

2. Inclure le favicon.fichier ico dans votre répertoire racine pour couvrir les navigateurs qui le demanderont de toute façon, car pour ceux les navigateurs, s'ils vérifient déjà quoi que vous fassiez, autant ne pas gaspiller la requête HTTP avec une réponse 404.

vous pouvez également utiliser le favicon d'un autre site populaire qui est susceptible d'avoir leur favicon caché, comme http://google.com/favicon.ico , de sorte qu'il est servi de cache.

comme les commentateurs ont souligné, juste parce que vous peut faire cela ne signifie pas que vous devriez, car certains navigateurs demande de favicon.ico indépendamment des trucs qu'on invente. 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 le gzipping, en utilisant des en-têtes expires loin-futur pour le contenu statique, en minifiant des fichiers JavaScript, en mettant des images d'arrière-plan dans des sprites ou des URIs de données, en servant des fichiers statiques hors D'un CDN, etc.

vous pouvez utiliser Base64 encoded favicon, 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" /> 

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.

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

vous mettez les données de base64 de l'icône dans une feuille de style externe, de sorte qu'elle sera mise en cache. Dans la tête de votre site, vous devez définir le favicon avec un id et le favicon est défini comme un background-image dans la feuille de style pour que id.

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

et le html

<html>
    <head>
      ...
      <link id="icon" rel="shortcut icon" type="image/x-icon" />
      <link rel="stylesheet" type="text/css" href="/style.css" />
      <!--[if lt IE 8]>
      <style type="text/css">
        link#icon { background-image:url("/favicon.ico"); }
      </style>
      <![endif]-->
      ...
    </head>
    <body>
      ...
    </body>
  </html>

la solution appropriée est d'utiliser pipelinage HTTP .

pipelinage HTTP est une technique dans laquelle plusieurs requêtes HTTP sont écrites sur une seule socket sans attendre les réponses correspondantes. Pipelining n'est pris en charge que dans HTTP/1.1, pas dans 1.0.

il est nécessaire que les serveurs le supportent, mais pas nécessairement partipate.

HTTP le pipelinage nécessite à la fois le client et le serveur pour le supporter. Des serveurs conformes à HTTP/1.1 sont nécessaires pour prendre en charge le pipelinage. Cela ne signifie pas que les serveurs sont nécessaires pour les réponses de pipeline, mais qu'ils sont tenus de ne pas faillir si un client choisit de demandes de pipeline.

beaucoup de clients de navigateur ne le font pas, quand ils devraient.

pipelinage HTTP est désactivé dans la plupart des navigateurs.

• Opera a le pipelinage activé par défaut. Il utilise l'heuristique pour contrôler le niveau de pipelinage utilisé en fonction du serveur connecté.
• Internet Explorer 8 ne contient pas de requêtes, en raison de préoccupations concernant les mandataires de buggy et le blocage de tête de ligne.
• navigateurs Mozilla (tels que Mozilla Firefox, SeaMonkey et Camino), support pipelining cependant il est désactivé par défaut. Il utilise quelques heuristiques, surtout pour tourner le pipelining off pour les serveurs IIS.
• Konqueror 2.0 Supporte le pipelinage, mais il est désactivé par défaut.[citation nécessaire]
• Google Chrome ne prend pas en charge le pipelinage.

je vous recommande d'essayer d'activer le pipelinage dans Firefox et de l'essayer là, ou tout simplement utiliser Opera (frissons).

est-ce vraiment important?

de nombreux navigateurs chargent le favicon comme une faible priorité de sorte qu'il ne bloque pas la page charger dans de toute façon, donc oui, c'est une demande supplémentaire, mais ce n'est 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 du rendu et cela ne réduit pas le nombre de requêtes!

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

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 404 favicon.

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

Exemples Apache:

Apache option (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 un billet de Stoyan Stefanov sur le blog http://www.phpied.com/204-no-content /

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 votre site n'ayant pas de favicon - vous pouvez simplement avoir le point href vers une ressource non-icône qui est déjà chargée (par exemple une feuille de style, un fichier script, ou même une ressource qui bénéficie d'être pré-récupérée.)
   
   (mon de brefs tests indiquent que cela fonctionne sur la plupart, sinon la totalité, des navigateurs importants.)

2. acceptez la requête HTTP supplémentaire et assurez-vous que votre fichier favicon possède des en-têtes HTTP agressifs.
   
   (si vous avez d'autres sites web sous votre contrôle, vous pourriez même les avoir sournoisement précharger le favicon pour ce site - avec d'autres ressources statiques.)

P. S. solutions Créatives ne fonctionne pas :

• L'étrange CSS data-uri truc (liée à un intervenant Felix Geenen) ne fonctionne pas .
• utiliser Javascript pour effectuer une injection retardée de l'élément <link> favicon (comme suggéré par l'utilisateur @YC) va probablement juste aggraver les choses - en résultant deux requêtes HTTP.

vous pouvez utiliser 8-bit PNG au lieu du format ICO pour encore plus petite empreinte de données. La seule chose que vous devez changer est d'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"
/>

" type "attribut peut être " image / png" ou "image / X-icon", les deux fonctionne 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 PNG binaire pour base64 chaîne en utilisant la commande base64:

base64 favicon.png

Voici la façon la plus facile:

<!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 représente-t-il? Réponse et upvote ci-dessous!

chaque image sur la page est une requête http séparée. donc il n'y a rien de tragique dans favicon pour en avoir besoin.

donc aujourd'hui j'ai finalement pu le faire avec Nginx/HTTP2 Push et en utilisant NodeJS derrière le proxy, NodeJS ne contribue pas à la push... Je suis un BAAADDDDDD MANNNN!

[nginx.conf]

    location / {
        http2_push_preload              on;
        add_header                      Link "<//static.indospace.io/favicon.ico>; as=image; rel=preload";
        add_header                      Link "<//static.indospace.io/css/minified.css>; as=style; rel=preload";
        add_header                      Link "<//static.indospace.io/js/minified.js>; as=script; rel=preload";
        add_header                      Link "<//static.indospace.io/images/register.svg>; as=image; rel=preload";
        add_header                      Link "<//static.indospace.io/images/purchase_litecoin.svg>; as=image; rel=preload";