¿No es tonto que un pequeño favicon requiera otra solicitud HTTP? ¿Cómo puedo poner el favicon en un sprite?

306

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 necesites otra solicitud HTTP . Entonces me pregunté, ¿cómo podría hacer que esa imagen sea parte de un sprite (por ejemplo background-position=0px -200px;) para acelerar y guardar esa valiosa solicitud HTTP. ¿Cómo puedo obtener esto en una imagen de sprite existente con mi logotipo y otras obras de arte?

El robot que señala favicon.ico, elemento número 31 en el gráfico de cascada, es mi mascota ZAM. Por lo general, es más feliz y tiene un buen punto haciéndome saber que es hora de algunas actualizaciones creativas en la web, aunque él y yo no estamos de acuerdo con su atuendo, que creo que es un poco tonto hoy ...

ingrese la descripción de la imagen aquí

javascript html css performance favicon Sam
fuente
47
¿No es tonto que todavía no haya una forma de combinar .css / .js / .png / .html en una sola secuencia optimizada? Se podría haber pensado que alguien tendría que llegar a esta idea por ahora
RichardTheKiwi
99
Relacionado con @Richard: las respuestas de varias partes y Google tienen una iniciativa para un nuevo protocolo web optimizado que resuelve esto, olvidé su nombre ... Editar : Se llama SPDY . Pero eso está lejos en el futuro, obviamente.
Pekka
99
@Richard aka cyberkiwi, puede poner todo en un archivo html con data:valores para imágenes y scripts en línea.
zzzzBov
39
por cierto, buen hombre boceto :)
Fatih Acet
18
+1 para el boceto :)
Giuliano

Respuestas:

140

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 se almacenaría en caché de todos modos, y también se suprime el comportamiento estándar del navegador al solicitar favicon.icoal alimentarlo con un URI de datos en elmeta etiqueta .

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 en Internet Explorer 9 al menos.

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. */

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

Marcel
fuente
3
+1 hermoso avance en caché @Marcel. PD: ¡Los caracteres en HTTP Headers Responsemi archivo .ico son casi del mismo tamaño que mi icono! ¿Qué le parece eso?
Sam
2
@Sam: Noté que la base64 de un equivalente PNG del archivo favicon.ico Stack Overflow era la mitad del tamaño. Agradable y compacto.
Marcel
1
eeehm, no estoy seguro de si entiendo lo que quieres decir: ¿el archivo tenía la mitad del tamaño de ...? Archivo PNG como icon.png? ¿O quiere decir que el equivalente de base64 es más pequeño cuando su formato PNG está en lugar de formato de icono o gif? curioso. ¡Salud!
Sam
1
@Sam: estaba comparando la base64 de este PNG con la base64 de este archivo ICO . La versión PNG, como se usa en mi código de ejemplo anterior, es la mitad del tamaño.
Marcel
1
ooh, ya veo, eso hace que su respuesta base 64, y el uso general del formato PNG base64 sea la opción preferida, ¿verdad?
Sam
149

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.

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

James Anderson
fuente
53
Esta es la única respuesta sensata. Este no es un problema que no requiere reparación.
JoDG
1
James, mi solución es realmente solo una posibilidad, pero una que nunca recomendaría a alguien. Pero, parece que la mayoría de los navegadores emitirán una nueva solicitud HTTP para el favicon al comienzo de una nueva sesión de navegador. Y, no siempre devuelve un 304.
Yahel
44
El navegador seguirá haciendo una llamada HEAD incluso si está en la memoria caché del navegador, por lo que aún tendrá la sobrecarga de una solicitud HTTP.
dietbuddha 05 de
3
En realidad todo depende del navegador. La mayoría de ellos siempre buscará un favicon en algunos lugares, incluso si la página no lo menciona y hará una llamada HEAD para cada actualización.
David Costa
14
El favicon necesita un encabezado de larga expiración como cualquier buen recurso estático. Con eso, incluso las llamadas HEAD se suprimen.
Paul Alexander
102

Puedes 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á almacenarse en caché, y dependiendo del tamaño de su imagen de favicon, su código fuente podría hincharse como resultado.

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 anterior no Soporte de datos URI Favicons

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `
  1. 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 verificando sin importar lo que haga, es mejor que no desperdicie la solicitud HTTP con una respuesta 404 .

También podría usar el favicon de otro sitio popular que probablemente tenga su favicon en caché, por ejemplo http://google.com/favicon.ico, para que se sirva desde el caché.

Como han señalado los comentaristas, el hecho de que pueda hacer esto no significa que deba hacerlo, ya que algunos navegadores solicitarán favicon.ico independientemente de los trucos que ideemos. La cantidad de sobrecarga que ahorraría al hacer esto sería minúscula en comparación con los ahorros que obtendría al hacer cosas como gzip, usar encabezados de vencimiento en el futuro lejano para contenido estático, minimizar archivos JavaScript, poner imágenes de fondo en sprites o URI de datos , sirviendo archivos estáticos de un CDN, etc.

Yahel
fuente
1
@Pekka, sí, no es realmente una solución práctica, ya que el peso extra de bytes del URI de datos en páginas no almacenadas en caché probablemente supere el peso de esa solicitud HTTP. Quizás OP pueda inyectar el favicon en el DOM de forma asincrónica.
Yahel
44
@Sam Lo siento, entiendo lo que @yc significa ahora, mi error. Por supuesto, puede acceder perfectamente al <link rel>elemento en el navegador a través de JavaScript, eso debería ser posible. Incluso he visto un juego programado de esa manera ... sin embargo, tampoco parece funcionar en IE, y probablemente no evitará la /favicon.icosolicitud de búsqueda predeterminada
Pekka
2
@Pekka, ya veo. PD: ¡es un juego increible! Me da vergüenza toda mi pantalla real, ya que todo lo que necesitas es ese 16x16 píxeles jaja. Este hipervínculo abre algunas posibilidades de lo que realmente es posible con ese favicon.
Sam
3
En caso de que falte una declaración de favicon, todos los navegadores solicitarán automáticamente la URL predeterminada /favicon.icoen un intento ciego de localizarla. Entonces, si deja de lado el favicon <link>(para luego agregarlo a través de Javascript), es probable que empeore las cosas.
Már Örlygsson
2
Simplemente use favicon.ico para almacenar su gif transparente :)
markijbema
21

Puede usar favicon codificado en base64, como:

<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" />
Dongsheng Cai
fuente
1
Sugerencia: la cadena codificada en base64 utilizada en esta respuesta es un archivo PNG y no funcionará con IE10 o anterior.
sibbl 01 de
2
En caso de que alguien quiera saber es el pingüino de Linux.
Martlark
17

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

Pones los datos de base64 del icono en una hoja de estilo externa, por lo que se almacenará en caché. En la cabecera de su sitio web, debe definir el favicon con una identificación y el favicon se configura como background-imageen la hoja de estilo para esa identificación.

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

y el 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>
Felix Geenen
fuente
8
Una persona con 74.947 reputación dijo en alguna parte de esta página: "¡No puedes!" ... Entonces otra persona con menos de 50 reputación dijo: "¡Puedes!" ¿Significa esto que el impulso por soluciones y el impulso innovador concreto no tienen vínculos o relaciones con la reputación adquirida? ... Bueno, eso es simplemente increíble!
Sam
44
Acabo de confirmar que esta solución no funciona , al menos no en Chrome 10 y Firefox 3.6 en Windows
Már Örlygsson
13
Acabo de confirmar que esta solución funciona , al menos en Chrome 10.0.648 en W7 de 64 bits y en FF 4.0 en W7 de 64 bits
Sam
44
LOL, he confirmado que las dos declaraciones anteriores parecen contradictorias, a pesar de los números de versión ligeramente diferentes, dudo que el comportamiento de Chrome haya cambiado tanto. Firefox quizás lo hizo de 3.6 a 4, pero es poco probable que Chrome 10 haya cambiado tanto en una actualización menor.
dyasta
Puedo confirmar que esto funciona en Chrome 83 y Firefox ESR 68 en Ubuntu 20.04, y puedo confirmar que no funciona para evitar el golpe en /favicon.ico. Entonces obtienes la imagen pero no evitas la conexión SSL adicional. Como ese era el objetivo, este es un fracaso.
Wil
14

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.

Pekka
fuente
1
Tal vez soy ciego, pero el único lugar donde veo el favicon de Búsqueda de Google es en un sprite: google.com/search?q=foo
Yahel
44
@yc google.com/favicon.ico es el lugar donde los navegadores lo buscarán automáticamente
Pekka
3
@yc no eres ciego, demostraste ser digno de una respuesta muy creativa allí ... como Pekka ya señaló que /favicon.icoes donde los navegadores buscarán automáticamente. Ahora vienen las malas noticias: ¡si el favicon NO existe, significa una penalización de error 404 que también causará un ligero retraso! Parece que no hay escapatoria de esta mazmorra favicon. Son tan pequeños pero tan poderosos ... maldita sea :)
Sam
Vea mi respuesta stackoverflow.com/questions/5199902/… para conocer la forma correcta de acelerar la forma correcta.
Matt Joiner
8
Cabe señalar que esto debería ser, de manera realista, una solicitud única, casi para siempre. Al igual que con todo lo demás, los temporizadores de caché largos y los 301 adecuados devueltos por el servidor harán que el favicon solicite un punto discutible (a menos que no exista, ¡ay!).
Kevin Peno
9

¿Realmente importa?

Muchos navegadores cargan el favicon como una prioridad baja para que no bloquee la carga de la página de todos modos, 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 el JS se haya recuperado y ejecutado, todos los elementos DOM a continuación se bloquearán de la representación y no reducirá el número de solicitudes.

Andy Davies
fuente
8

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

La canalización HTTP es una técnica en la que se escriben múltiples solicitudes HTTP 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 participen.

La canalización HTTP requiere que tanto el cliente como el servidor lo admitan. Se requieren servidores conformes HTTP / 1.1 para admitir la canalización. Esto no significa que los servidores estén obligados a canalizar las respuestas, sino que no deben fallar 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 la heurística para controlar el nivel de canalización empleado según el servidor conectado.
  • Internet Explorer 8 no canaliza solicitudes, debido a inquietudes con respecto a proxies con errores y bloqueo de encabezados.
  • Los navegadores Mozilla (como Mozilla Firefox, SeaMonkey y Camino) admiten la canalización, sin embargo, está deshabilitado de forma predeterminada. Utiliza algunas heurísticas, especialmente para desactivar la canalización de los servidores IIS.
  • Konqueror 2.0 admite la canalización, pero está deshabilitado de forma predeterminada. [Cita requerida]
  • Google Chrome no es compatible con la canalización.

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

Matt Joiner
fuente
77
Canalización de una optimización realizada en la capa de transporte. Todavía implica un viaje de ida y vuelta HTTP separado para el favicon, que es sobre lo que pregunta la pregunta.
Már Örlygsson
@ Már Örlygsson eso no es correcto. Un viaje de ida y vuelta significa que el cliente debe hacer una solicitud y luego esperar a que se procese la solicitud y se descargue la respuesta. La canalización significa que la solicitud ya se enviará mientras se espera que finalice la solicitud anterior, por lo tanto, mientras ocurren los mismos pasos, la demora que causará no será la misma ...
Peter
1
Sam no puede activar la canalización en todos los navegadores de sus visitantes, por lo que, en ese sentido, esta solución no hará que su sitio se cargue más rápido, excepto él personalmente.
Már Örlygsson
3
@ Már Örlygsson y sus votantes: no se hace en la capa de transporte. En los modelos del mundo real, todo esto se hace en la capa de aplicación. Teóricamente, la canalización debe estar en la capa de sesión.
Matt Joiner,
44
No discutiré esa semántica contigo. El hecho aún sostiene que Sam no puede "usar la canalización" (ordenada como está) para hacer que su sitio se cargue más rápido para sus visitantes, ya que el soporte de la disciplina es A) irregular como usted lo señala, y B) optar por cada uno Usuario individual.
Már Örlygsson
6

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 y demás no verifican un 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 de Apache uno (y mi favorito), un forro simple en sus .htacces o .conf:

Redirect 204 /favicon.ico

Opción de Apache dos:

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

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

Anthony Hatzopoulos
fuente
Sí, pero a medida que se realiza la solicitud y el favicon se usa a menudo de manera significativa, creo que vale la pena proporcionar el ícono en lugar de una respuesta vacía. Comprimir el icono a través de gzip a menudo lo llevará a un solo tamaño de paquete TCP de todos modos
Andy Davies
5

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

Esto significa que tiene básicamente dos opciones:

  1. Si se siente cómodo con que su sitio no tenga un favicon, puede tener el hrefpunto de un recurso que no sea un ícono que ya se está cargando (por ejemplo, una hoja de estilo, un archivo de secuencia de comandos o incluso algún recurso que se beneficie de la obtención previa) .)
    (Mi breve prueba indica que esto funciona en la mayoría de los principales navegadores, si no en todos).

  2. Acepte la solicitud HTTP adicional y solo asegúrese de que su archivo favicon tenga configurados encabezados agresivos de control de caché HTTP.
    (Si tiene otros sitios web bajo su control, incluso puede hacer que precarguen furtivamente el favicon para este sitio web, junto con otros recursos estáticos).

PS Soluciones creativas que no funcionarán :

  • El extraño truco de uri de datos CSS (vinculado al comentarista Felix Geenen) no funciona .
  • El uso de Javascript para realizar una inyección retrasada del <link>elemento favicon (como lo sugirió el usuario @yc) probablemente empeorará las cosas, al generar dos solicitudes HTTP.
Már Örlygsson
fuente
1
otras soluciones que no funcionarán: múltiples íconos en un .ico, y usar el ico en una etiqueta de imagen con la esperanza de que muestre otra imagen allí, que no sea como favicon. Al juntar el favicon con otro archivo.
markijbema
5

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

cusimar9
fuente
13
Google es genial, pero pensar así parece contraproducente y sofocante. Siempre hay formas nuevas, mejores y muy posibles de hacer las cosas, y no tiene que trabajar para que un líder de la industria las invente.
Error de sintaxis el
10
Obviamente, Google obtiene sus ideas de SO, no al revés;)
usuario123444555621
3
Buena respuesta, si Google pudiera hacer su página más rápida, lo harían.
David d C e Freitas
3

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 debe cambiar es usar el encabezado de tipo MIME "data: image / png" en lugar de "data: image / x-icon":

<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 codificar PNG binario a cadena base64 usando el comando base64:

base64 favicon.png
andrej
fuente
2

Aquí está la forma 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 a continuación!

rjobidon
fuente
1
El ícono de la manzana?
styfle
2

Solución asesina en 2020

Esta solución necesariamente llega nueve años después de la pregunta original, porque hasta hace relativamente poco tiempo, la mayoría de los navegadores no podían manejar los favicons en .svgformato.

Ese ya no es el caso.

Ver: https://caniuse.com/#feat=link-icon-svg

1) Elija SVG como formato Favicon

En este momento, en junio de 2020, estos navegadores pueden manejar Favicons SVG :

  • Cromo
  • Firefox
  • Borde
  • Ópera
  • Chrome para Android
  • Navegador KaiOS

Tenga en cuenta que estos navegadores aún no pueden:

  • Safari
  • Safari de iOS
  • Firefox para Android

Con lo anterior en mente, podemos usar con confianza un Favicon SVG .

2) Presente el SVG como un URI de datos

El objetivo principal aquí es evitar las solicitudes HTTP.

Como han mencionado otras soluciones, una forma bastante inteligente de hacer esto es usar un URI de datos en lugar de una URL HTTP .

Los SVG (especialmente los SVG pequeños) se prestan perfectamente a los URI de datos, porque este último es simplemente texto sin formato (con cualquier carácter potencialmente ambiguo codificado en porcentaje) y el primero, que es XML, se puede escribir como una larga línea de texto sin formato (con un poco de códigos porcentuales) increíblemente sencillo.

3) Todo SVG es un Emoji

En diciembre de 2019, Leandro Linares fue uno de los primeros en darse cuenta de que, dado que Chrome se había unido a Firefox para apoyar los SVG Favicons, valió la pena experimentar para ver si un favicon podría crearse a partir de un emoji:

https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/

La corazonada de Linares era correcta.

Varios meses después (marzo de 2020), Code Pirate Lea Verou se dio cuenta de lo mismo:

https://twitter.com/leaverou/status/1241619866475474946

Y los favicons nunca volvieron a ser lo mismo.

4) Implementando la solución usted mismo:

Aquí hay un SVG simple:

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 16 16">

  <text x="0" y="14">🦄</text>
</svg>

Y aquí está el mismo SVG que un URI de datos :

data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E

Y, finalmente, aquí está ese URI de datos como un Favicon:

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />

5) Más trucos

Como el Favicon es un SVG, se le puede aplicar cualquier cantidad de efectos de filtro (tanto SVG como CSS).

Por ejemplo, junto con el Favicon de unicornio blanco anterior, podemos hacer fácilmente un Favicon de unicornio negro aplicando el filtro:

style="filter: invert(100%);"

Favicon de unicornio negro:

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
Rounin
fuente