¿Cómo evitar una solicitud HTTP solo para un favicon? [duplicar]
Todo el mundo sabe cómo configurar un enlace favicon.ico en su HTML:
<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">
Pero es una tontería que solo para un ícono diminuto de varios bytes necesitemos otra solicitud HTTP que potencialmente penalice la velocidad .
Entonces me pregunté, ¿cómo podría hacer que ese favicon forme parte de un objeto utilizable (por ejemplo, background-position=0px -200px;) que funcione como, digamos, un logotipo en el resto del sitio web, para acelerar el sitio y guardar esa preciosa y valiosa solicitud HTTP? ¿Cómo podemos hacer que esto se incluya en una imagen de sprite existente junto con nuestro logotipo y otras obras de arte?
Creo que en su mayor parte no da como resultado otra solicitud HTTP, ya que generalmente se descargan en la memoria caché del navegador después del primer acceso.
En realidad, esto es más eficiente que cualquiera de las "soluciones" propuestas.
Una mejora menor a la respuesta de @yc es inyectar el favicon codificado en Base64 desde un archivo JavaScript que normalmente se usaría y almacenaría en caché de todos modos, y también suprimir el comportamiento estándar del navegador de solicitar favicon.icoal ingresar un URI de datos en la metaetiqueta relevante.
Esta técnica evita la solicitud http adicional y se confirma que funciona en versiones recientes de Chrome, Firefox y Opera en Windows 7. Sin embargo, no parece funcionar al menos en Internet Explorer 9.
Archivo 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>
...
Archivo 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 JavaScript code would normally be in here too. */
