javascript - ponerle - icono en title

¿No es tonto que un pequeño favicon requiera otra solicitud HTTP? ¿Cómo hacer que el favicon entre en un sprite? (15)

¿Realmente importa?

Muchos navegadores cargan el favicon como una prioridad baja para que no bloquee la carga de la página, así que sí, es una solicitud adicional pero no está en ninguna ruta crítica.

La solución aceptada es horrible, ya que hasta que JS no se haya recuperado y ejecutado, todos los elementos de DOM a continuación se bloquearán y no reducirá la cantidad de solicitudes.

Todo el mundo sabe cómo configurar un enlace favicon.ico en HTML:

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

Pero creo que es una tontería que para un pequeño icono de varios bytes necesite otra solicitud HTTP . Así que me pregunté, ¿cómo podría hacer que esa imagen formara parte de un sprite (por ejemplo, background-position = 0px -200px;) para acelerar y guardar esa valiosa solicitud HTTP? ¿Cómo podría abordar esto e introducirlo en el resto de mi ¿sprite de imagen existente con mi logo y mis otras obras de arte?

El robot que apunta a favicon.ico , artículo nr.31 en el gráfico de la cascada, es mi mascota ZAM, a menudo es más feliz y tiene un buen punto que me permite saber que es hora de realizar algunas actualizaciones creativas en la web, aunque él y yo no lo hacemos. Estoy de acuerdo con su atuendo, que creo que es un poco tonto hoy ...

Aquí está la manera más fácil:

<!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>

¿Qué icono representa? Responde y vota abajo!

Así que hoy finalmente pude hacer esto con NGINX / HTTP2 Push y mientras uso NodeJS detrás del proxy, NodeJS no contribuye al impulso ... ¡Soy un BAAADDDDD MANNNNN!

[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";

Buen punto y buena idea, pero imposible. Un favicon debe ser un recurso único e independiente. No hay forma de combinarlo con otro archivo de imagen.

Cada imagen individual en la página es una solicitud http separada. así que no hay nada de trágico en favicon para necesitar uno.

Creo que, en su mayor parte, no resulta en otra solicitud HTTP, ya que generalmente se vuelcan en la memoria caché del navegador después del primer acceso.

Esto es en realidad más eficiente que cualquiera de las "soluciones" propuestas.

Encontré una solución interesante en esta página . Está en alemán pero podrás entender el código.

Usted coloca los datos base64 del icono en una hoja de estilo externa, por lo que se almacenará en caché. En el encabezado de su sitio web, debe definir el favicon con un id y el favicon se establece como una background-image en la hoja de estilo para ese id.

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

y el html

<html> <head> ... <link id="icon" rel="shortcut icon" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="/style.css" />  ... </head> <body> ... </body> </html>

Es una gran idea, pero si Google no lo ha hecho en su página de inicio, apuesto a que no se puede (actualmente)

La solución adecuada es utilizar la canalización HTTP .

La canalización HTTP es una técnica en la que múltiples solicitudes HTTP se escriben en un solo socket sin esperar las respuestas correspondientes. La canalización solo se admite en HTTP / 1.1, no en 1.0.

Se requiere que los servidores lo admitan, pero no necesariamente que participen.

La canalización HTTP requiere que tanto el cliente como el servidor lo admitan. Los servidores que cumplen con HTTP / 1.1 son necesarios para admitir la canalización. Esto no significa que los servidores deban canalizar las respuestas, sino que se requiere que no fallen si un cliente elige canalizar las solicitudes.

Muchos clientes de navegador no lo hacen, cuando deberían.

La canalización HTTP está deshabilitada en la mayoría de los navegadores.
Opera tiene la canalización habilitada por defecto. Utiliza heurísticas para controlar el nivel de canalización empleado en función del servidor conectado.
Internet Explorer 8 no canaliza las solicitudes, debido a las preocupaciones con respecto a los proxies con errores y el bloqueo del encabezado de línea.
Los navegadores Mozilla (como Mozilla Firefox, SeaMonkey y Camino), admiten la canalización, pero están desactivados de forma predeterminada. Utiliza algunas heurísticas, especialmente para desactivar la canalización para los servidores IIS.
Konqueror 2.0 admite la canalización, pero está deshabilitado de forma predeterminada. [Cita requerida]
Google Chrome no admite la canalización.

Le recomendaría que intente habilitar la canalización en Firefox y que lo haga allí, o simplemente utilice Opera (estremecimiento).

Lo siento, pero no puedes combinar el favicon con otro recurso.

Esto significa que tienes básicamente dos opciones:

Si se siente cómodo con que su sitio no tenga un favicon, simplemente puede tener el punto href para un recurso que no está en el icono que ya se está cargando (por ejemplo, una hoja de estilo, un archivo de script o incluso algún recurso que se beneficia de la preparación). traído.)
(Mi breve prueba indica que esto funciona en la mayoría de los principales navegadores, si no en todos).
Acepte la solicitud HTTP adicional y solo asegúrese de que su archivo de favicon tenga un conjunto agresivo de encabezados de control de caché HTTP.
(Si tiene otros sitios web bajo su control, es posible que incluso los tenga precargados para el sitio web, junto con otros recursos estáticos).

PS Soluciones creativas que no funcionarán :

El extraño truco de datos-uri de CSS (vinculado por el comentarista Felix Geenen) no funciona .
El uso de Javascript para realizar una inyección demorada del elemento favicon <link> (como lo sugiere el usuario @yc) probablemente empeorará las cosas, al generar dos solicitudes HTTP.

No es realmente una respuesta a la pregunta, sino simplemente para complementar las respuestas dadas por Marcel y yahelc . Ofrezco una solución elegante al problema del favicon 404.

Debido a que algunas aplicaciones y navegadores comprueban favicon.com y, si el icono no se encuentra en la raíz del sitio, simplemente puede responder a la solicitud con el encabezado de respuesta 204 .

Ejemplos de apache:

Opción uno de Apache (y mi favorita), una línea simple en sus archivos .htacces o .conf:

Redirect 204 /favicon.ico

Apache opción dos:

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

Para más información, hay una bonita publicación de blog de Stoyan Stefanov en http://www.phpied.com/204-no-content/

Podrías probar un URI de datos. No hay solicitud HTTP!

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

A menos que sus páginas tengan almacenamiento en caché estático, su favicon no podrá ser almacenado en caché, y como resultado, dependiendo del tamaño de su imagen de favicon, su código fuente podría hincharse.

Los favicons de URI de datos parecen funcionar en la mayoría de los navegadores modernos; Lo tengo funcionando en versiones recientes de Chrome, Firefox y Safari en una Mac. No parece funcionar en Internet Explorer, y posiblemente en algunas versiones de Opera.

Si está preocupado por el IE antiguo (y probablemente no debería estarlo en estos días), podría incluir un comentario condicional de IE que cargaría el favicon.ico real de la manera tradicional, ya que parece que Internet Explorer más antiguo no lo hace. apoyo de datos URI Favicons

` `

Incluya el archivo favicon.ico en su directorio raíz para cubrir los navegadores que lo solicitarán de cualquier manera, ya que para esos navegadores, si ya están revisando sin importar lo que haga, es mejor que no desperdicie la solicitud HTTP con una respuesta 404 .

También puede utilizar el favicon de otro sitio popular que probablemente tenga su favicon en caché, como http://google.com/favicon.ico , para que se sirva desde el caché.

Como los comentaristas han señalado, solo porque puede hacer esto no significa que deba hacerlo, ya que algunos navegadores solicitarán favicon.ico independientemente de los trucos que diseñemos. La cantidad de gastos generales que ahorraría al hacer esto sería minúscula en comparación con los ahorros que obtendría al hacer cosas como gzipping, el uso de futuros encabezados de contenido estático, la reducción de archivos de JavaScript, la colocación de imágenes de fondo en sprites o URI de datos. , sirviendo archivos estáticos fuera de un CDN, etc.

Podrías usar favicon codificado en base64, como:

Puede usar PNG de 8 bits en lugar del formato ICO para una huella de datos aún más pequeña. Lo único que tienes que cambiar es usar "data: image / png" en lugar de "data: image / x-icon" encabezado de tipo MIME:

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

El atributo "type" puede ser "image / png" o "image / x-icon", ambos funcionan para mí.

Puede convertir ICO a png de 8 bits usando gimp o convertir:

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

y codifique la cadena binaria a base64 PNG usando el comando base64:

base64 favicon.png

Una pequeña mejora en 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.ico al proporcionarle un URI de datos en la etiqueta meta 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 que funcione en Internet Explorer 9 al menos.

index.html

<!doctype html> <html lang="en"> <head> <meta charset="utf-8">  <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. */

javascript - ponerle - icono en title

¿No es tonto que un pequeño favicon requiera otra solicitud HTTP? ¿Cómo hacer que el favicon entre en un sprite? (15)

Demostración: turi.co/up/favicon.html