N'est-il pas ridicule qu'un petit favicon nécessite encore une autre requête HTTP? Comment faire de favicon aller dans un sprite?
Tout le monde sait comment configurer un favicon.ico lien dans le HTML:
<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon" />
Mais je pense que c'est juste idiot que pour une infime plusieurs octets icône vous avez besoin encore une autre requête HTTP. Donc je me demandais, comment ai-je pu faire que la partie de l'image du sprite (par exemple background-position=0px -200px;) afin d'accélérer et d'enregistrer la valeur de la requête HTTP: comment pourrais-je résoudre ce et de l'obtenir dans le reste de mon image sprite avec mon logo et mes autres œuvres d'art?
Le robot pointant vers favicon.ico
, item nr.31 sur la cascade graphique, mon animal de compagnie est ZAM, il est souvent plus heureux et il a un bon point de me laisser savoir de son temps pour certains créatrice des mises à jour sur le web, bien que lui et je ne suis pas d'accord sur sa tenue, ce qui je pense est un peu ridicule aujourd'hui...
- N'est-il pas ridicule qu'il n'y a pas encore un moyen de combiner .css/.js/.png/.html en un seul flux optimisé? Vous avez pensé que quelqu'un serait venu avec cette idée maintenant
- connexes: Multipart réponses et Google ont une initiative pour une nouvelle, web optimisée protocole qui permet de résoudre cela, j'ai oublié son nom... Modifier: Il est nommé SPDY. Mais c'est loin dans le futur, évidemment.
- aka cyberkiwi, vous pouvez tout mettre dans un fichier html avec
data:
valeurs pour les images et les scripts inline. - Je suis de détection de sarcasme de @Richard. HTTP/1.1 a été la première tentative de résolution de ce problème, circa 1996, et fait de grands progrès au cours de HTTP/1.0.
- btw, joli croquis homme 🙂
- Ligne de fond est que vous aimez le dessin et de blanchisserie, de droit ?
- +1 pour l'esquisse 🙂
- J'aurais l'air d'optimiser le nombre actuel de demandes de première. Selon ce que le site détient, 35 demandes pourraient être beaucoup. Regardez sprite-feuilles, combinied/minifiés JS etc. Le favicon ressemble à une bataille perdue d'avance.
- il y a donc beaucoup de ceux inutile de requête HTTP.. un autre célèbre, que de nombreux sites web, il est l'
dot.gif
espace réservé. Qui Jquery site activé ne pas les utiliser, une? et que diriez-vous de répéter des antécédents qui ne peuvent pas faire partie d'un sprite? la liste est sans fin... et bien pas de en continu: environ 35 !! - Regarde comme c'est comment vous vos revenus, vos autres Or les badges, vous gardez le renouvellement de la prime sur la même question encore et encore jusqu'à ce que vous avez 100 upvotes, puis vous gagnez un insigne d'or. Slick.
- de 2600 points que j'ai jamais gagné, j'ai donné 2100 à d'autres membres de la communauté. Qu'est-ce que la nappe de sujet? Dites-moi! Certaines de mes questions sont bizarres, comme celui-ci, ayant besoin de plus d'attention pour réussir à résoudre. C'est pourquoi mes bontés aller aux contributeurs, pas de jaloux plaintes au sujet de mon peu de bonnes questions ou des crédits gagnés/médailles (je ne pouvais pas moins de soins).
- Je souhaite que les navigateurs pourraient rechercher des fichiers zip. Par exemple, être en mesure de lien comme ceci "/dossier/ressources.zip/styles.css", "/folder/resources.zip/scripts.js".
- pour awesome perspicacité! mon acdsee peut le faire, pourquoi ne peux-navigateurs, en effet. Cela pourrait être outil précieux pour les webdesigners qui veulent paquet de trucs dans les différentes versions
Design1_JAN.zip
Design2_FEB.zip
etc... soignée juste deux fichiers sur le serveur représentant l'ensemble des sites en php et tout et tout... - en fait chrome + google sites utilisent déjà SPDY conceivablytech.com/6696/products/...
- Je viens de recevoir une autre médaille d'or (qui est très précieux pour vous, mais de sens pour moi) juste parce que j'ai visité ce site de 100 fois ou quelque chose. Comment aimez-vous que?
- Hey man, j'ai fait quelques modifications pour ma réponse qui je pense fait "accepté de répondre"-digne.
- thedailywtf.com/Comments/The_Complicator_0x27_s_Gloves.aspx 🙂
- Presque terminé un cadre avec "serveur/application" style de gestion des ressources. Il charge un <1 programme d'amorçage, puis procède à partir d'un seul flux binaire (à l'aide de fetch API) streaming en ressources et la gestion du rendu en fonction des besoins.
- J'ai une réelle application réelle pour cela : je suis à l'aide d'un morceau de logiciel qui fonctionne un petit serveur web intégré en cours d'exécution sur un port élevé sur mon réseau local. Il utilise un modèle HTML pour charger ses résultats, mais il ne peut pas résoudre les autres chemins (par exemple des images). Je ne peux jamais trouver l'onglet navigateur de fonctionnement, car il n'a pas de favicon. Jusqu'à ce que j'ai converti en un fichier PNG en base 64 et insérée dans la tête du modèle html.
- Donc, aujourd'hui, j'ai été en mesure de le faire à l'aide de NGINX/HTTP2 sur mon Linux.... ` `
Vous devez vous connecter pour publier un commentaire.
Une légère amélioration de la @yc réponse est l'injection de la base64 favicon à partir d'un fichier JavaScript qui seraient normalement utilisés et mis en cache, de toute façon, et aussi la suppression de la norme de comportement du navigateur de demander
favicon.ico
en le nourrissant de données URI dans lemeta
tag.Cette technique permet d'éviter la requête http et est confirmée à travailler dans les dernières versions de Chrome, Firefox et Opera sur Windows 7. Cependant, il n'est pas semblent fonctionner dans Internet Explorer 9 au moins.
index.html
script.js
Démo: turi.co/up/favicon.html
HTTP Headers Response
de mon .fichier ico est presque de la même taille que mon icône!! Comment aimez-vous que?favicon.ico
de fichier par défaut. Cette enregistre effectivement inutile de requête http.defer
l'attribut de la balise script.Je pense que pour la plupart, il n'est pas le résultat d'une autre requête HTTP comme ceux-ci sont généralement sous-évaluées dans le cache du navigateur après le premier accès.
C'est réellement plus efficace que toutes les propositions de "solutions".
Vous pouvez essayer l'une des données de l'URI. Pas de requête HTTP!
À moins que vos pages statiques de la mise en cache, votre favicon ne serait pas en mesure d'être mis en cache, et en fonction de la taille de votre image de favicon, votre code source d'gonflé comme un résultat.
Données URI favicons semble fonctionner dans la plupart des navigateurs modernes; j'ai travailler dans les dernières versions de Chrome, Firefox et Safari sur Mac. Ne semble pas fonctionner dans Internet Explorer, et peut-être certaines versions de l'Opéra.
Si vous êtes inquiet au sujet de Vieux IE (et vous ne devriez probablement pas ces jours-ci), vous pouvez inclure un IE commentaire conditionnel qui serait en charge de la réelle favicon.ico à la manière traditionnelle, car il semble que les plus anciennes d'Internet Explorer ne prend pas en charge les Données URI Favicons
Vous pourriez tout aussi bien utiliser le favicon d'un autre site populaire qui est susceptible d'avoir leur favicon mis en cache, comme
http://google.com/favicon.ico
, de sorte qu'il est servi de cache.Comme les commentateurs l'ont souligné, tout simplement parce que vous peut cela ne signifie pas que vous devriez, depuis certains des navigateurs demande favicon.ico, indépendamment de la des astuces que nous concevons. Le montant des frais généraux vous vous souhaitez enregistrer en faisant cela serait minime par rapport aux économies que vous obtenez de faire des choses comme gzipping, à l'aide de futures expire en-têtes de contenu statique, les minifying des fichiers JavaScript, mettre des images de fond en sprites ou des données Uri, de servir les fichiers statiques hors de CDN, etc.
href
. Je sais qui fonctionne poursrc
attributs, mais je n'étais pas sûr si elle serait traitée de la même façon.<link rel>
élément dans le navigateur à l'aide de JavaScript, cela devrait être possible. J'ai même vu jeu programmés de cette façon... mais il ne semble pas fonctionner sous IE, soit, et il ne sera probablement pas empêcher le défaut/favicon.ico
demande de recherche/favicon.ico
dans un blind tentative de le trouver. Donc, si vous laissez de côté le favicon<link>
(pour l'ajouter ultérieurement via Javascript), vous êtes probablement juste faire empirer les choses.Vous pouvez utiliser encodées en base64 favicon, comme:
Bonne et belle idée, mais impossible. Un favicon doit être d'un seul, séparé de la ressource. Il n'y a aucun moyen de le combiner avec un autre fichier image.
/favicon.ico
est l'endroit où les navigateurs auto look. Maintenant vient la vraie mauvaise nouvelle: Si le favicon est inexistante, cela signifie une erreur 404 pénalité qui va provoquer un léger retard aussi!! Il ne semble pas échapper à cette favicon donjon. Ils sont si petits, mais tellement puissant... zut 🙂TOP n
requête SQL, apparaît comme une erreur majeure dans le standard de méta-données d'un "get" dans les deux cas.J'ai trouvé une solution intéressante sur cette page. C'est en allemand, mais vous serez en mesure de comprendre le code.
Vous mettez le base64 données de l'icône dans une feuille de style externe, de sorte qu'il sera mis 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.et le html
Est-il vraiment important?
De nombreux navigateurs charge le favicon comme une priorité faible, afin de ne pas bloquer le chargement de la page dans de toute façon, donc oui c'est une requête supplémentaire, mais il n'est pas sur tout chemin critique.
La solution retenue est horrible que jusqu'à ce que le JS a été récupérée et exécuté tous les éléments DOM-dessous sera bloqué à partir de rendu et il ne réduit pas le nombre de demandes de!
La bonne solution est d'utiliser HTTP pipelining.
Il est nécessaire que les serveurs prennent en charge, mais pas nécessairement participer.
Navigateur de beaucoup de clients ne le font pas, quand ils le devraient.
Je vous recommande d'essayer de l'activer de pipeline dans Firefox et essayez-là, ou tout simplement utiliser de l'Opéra (frisson).
C'est une excellente idée, mais si Google n'a pas fait ça sur leur page d'accueil, je parie qu'il ne peut pas (pour l'instant) être fait
Pas vraiment une réponse à la question, mais simplement pour compléter les réponses données par Marcel et yahelc je vous offre une solution élégante pour les 404 favicon question.
Parce que certaines applications et certains navigateurs et autres joyeusetés de vérifier pour un favicon.com et si l'icône n'est pas trouvé dans la racine du site, vous pouvez simplement répondre à la demande avec la 204 réponse en-tête.
Apache Exemples:
Option Apache (et mon préféré), simple un liner dans votre .htacces ou .conf:
Apache option deux:
Pour en savoir plus, il y a du joli blog par Stoyan Stefanov à 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:
Si vous êtes à l'aise avec votre site n'ayant pas de favicon - vous pouvez juste avoir le
href
point à un non-icône de la ressource qui est déjà en cours de chargement (par exemple, une feuille de style, fichier de script, ou même quelques-unes des ressources que l'avantage d'être pré-cheveux.)(Mon test indique que cela fonctionne dans la plupart, si pas tous, les principaux navigateurs.)
Accepter la requête HTTP et assurez-vous que votre fichier favicon est agressif HTTP cache-control-têtes ensemble.
(Si vous avez d'autres sites qui sont sous votre contrôle, vous pourriez même avoir sournoisement précharger le favicon pour ce site - le long de avec d'autres ressources statiques.)
P. S. des solutions Créatives qui ne fonctionnera pas:
<link>
élément (comme suggéré par l'utilisateur @yc) sera probablement juste faire empirer les choses - en résultant dans deux requêtes HTTP."CREATIVE solutions that will not work:"
Vous pouvez utiliser le format PNG 8 bits au lieu de ICO format encore plus petit des données de l'empreinte. La seule chose que vous devez changement est à l'aide de "data:image/png" au lieu de "data:image/x-icon" type MIME d'en-tête:
attribut"type" peut être "image/png" ou "image/x-icon", à la fois fonctionne pour moi.
Vous pouvez convertir ICO au format png 8 bits à l'aide de gimp ou à convertir:
et encoder PNG binaire en base64 l'aide de la chaîne base64 commande:
Voici la façon la plus simple:
Ce que l'icône qu'elle représente? Réponse et upvote ci-dessous!
Chaque image sur la page est séparée de la requête http. donc il n'y a rien de tragique à propos de favicon avoir besoin d'un.