¿Cómo tener múltiples tamaños de favicon, pero solo sirve un 16x16 por defecto?

Question

En general, se considera una buena práctica el servicio de favicon.ico en varios tamaños, porque de esa manera se ve mejor cuando se hace un acceso directo o se fija el sitio (IE9). Sin embargo, el tamaño de un favicon aumenta diez veces al hacerlo, lo que resulta en una carga del sitio más lenta (en mi caso, el favicon de 16x16 es 1kb, el 16, 32, 64 = 30kb).

Los sitios como Facebook y Yahoo tienen un favicon de 16x16 por defecto que es < 1kb, pero cuando fija estos sitios, la imagen utilizada es de tamaño adecuado. Supongo que la imagen más grande se carga solo cuando es necesario, lo que soluciona el dilema. Intenté sin éxito averiguar cómo estos sitios hacen esto. ¿Alguien sabe esto?

Answer 1

Actualización:

Mi respuesta original está por debajo, sin embargo, ya que escribir este post creo que puede haber una mejor manera de manejar Favicons con HTML 5. Me gustaría crear un favicon 32x32 (sólo ese tamaño) para Internet Explorer 9 y siguientes, pero use otros métodos para crear favicons de mayor resolución (tipo de archivo PNG) para otros navegadores, incluidos los dispositivos móviles. Puede see my answer here para obtener información adicional.

---

respuesta a la pregunta original:

Así es cómo se puede hacer:

1. Download png2ico. Extracto de c: \

2. Cree sus iconos en su programa favorito. Crea un 64x64, 32x32, 16x16. (Nota: 64x64 probablemente no sea necesario y aumentará el tamaño del archivo. Sin embargo, utilice al menos 32x32 y 16x16) Guardar como icon-64.png (para el tamaño de 64x64) icon-32.png (32x32) e icon-16.png (16x16) en la misma carpeta que png2ico. Mantenga los colores al mínimo.

3. Abrir símbolo del sistema: cambie los directorios a la carpeta png2ico. (cd \png2ico)

4. Una vez en el directorio correcto de ejecutar este comando:

   png2ico.exe favicon.ico --colors 16 icon-64.png icon-32.png icon-16.png 
   

   Nota: La diferencia de tamaño de archivo para la adición de un icono de tamaño 64x64 aumentó el archivo de 2 kb. Solo usaría 32x32 y 16x16. (Ejecute el mismo código que el anterior eliminando icon-64.png)

5. Tome el archivo favicon.ico de la carpeta png2ico. Suba al servidor y agregue <link rel="shortcut icon" href="http://example.com/favicon.ico" /> al encabezado y listo.

Mientras tanto, siga adelante y cree Iconos para iPad y iPhone. You can find more info on recommended sizes here and how to implement them into your site.

También more general info en Favicons se puede encontrar aquí.

Nota: No sé si así es como Facebook o Yahoo hacen lo suyo, pero esto responde a su pregunta de cómo se puede hacer.

Answer 2

El Facebook "favicon.ico" contiene dos tamaños: 16x16 y 32x32.Estoy seguro de que sabes cómo combinar dos imágenes ico en una, sin embargo, el "truco" es que están usando dos imágenes extremadamente optimizadas.

Descubrí que Photoshop crea archivos PNG hinchados e hinchados archivos ICO. (Nota: Photoshop requiere un complemento para crear archivos ICO.)

La mejor manera que he encontrado para crear archivos ICO pequeños y optimizados es utilizar un conocido editor de imágenes gratuito llamado "Gimp". En resumen, solo siga este tutorial para crear archivos ICO:
http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp
Consejo importante: Cuando llegue al paso para guardar su imagen .ico y pueda especificar los bits por píxel (bpp), cámbielo a 4bpp o algo similar (tendrás que experimentar para ver qué tan bajo puedes ir sin degradar la calidad de la imagen).

Usando las instrucciones anteriores, pude crear un favicon de 1kb que contiene imágenes de 16x16 y 32x32. En comparación, el más pequeño que pude obtener el mismo favicon usando Photoshop, complementos y otras herramientas fue de 5kb.

Answer 3

Si te gustan los guiones, escribí uno para convertir cualquier imagen a un favicon de resolución múltiple usando ImageMagick.

http://blog.lavoie.sl/2012/11/multi-resolution-favicon-using-imagemagick.html

Para su pregunta sobre por qué Facebook y Yahoo son capaces de tener imágenes de alta resolución "fijos", es porque también tienen apple-touch-icon y og:image.

Answer 4

O puede simplemente iniciar sesión en cualquier cuadro de Linux con ImageMagick instalado, cambiar el nombre de su imagen de origen (con una resolución de al menos 256x256 píxeles y un archivo de formato PNG) a 'favicon.png', y ejecutar el siguiente comando:

convert favicon.png -bordercolor white -border 0 \ 
     \(-clone 0 -resize 16x16 \) \ 
     \(-clone 0 -resize 32x32 \) \ 
     \(-clone 0 -resize 48x48 \) \ 
     \(-clone 0 -resize 57x57 \) \ 
     \(-clone 0 -resize 64x64 \) \ 
     \(-clone 0 -resize 72x72 \) \ 
     \(-clone 0 -resize 110x110 \) \ 
     \(-clone 0 -resize 114x114 \) \ 
     \(-clone 0 -resize 120x120 \) \ 
     \(-clone 0 -resize 128x128 \) \ 
     \(-clone 0 -resize 144x144 \) \ 
     \(-clone 0 -resize 152x152 \) \ 
     \(-clone 0 -resize 180x180 \) \ 
     \(-clone 0 -resize 228x228 \) \ 
     -delete 0 -alpha off -colors 256 favicon.ico 

Y tendrá su favicon.ico con la mayoría de los formatos conocidos directamente en un solo archivo.

Además, asegúrese de consultar la hoja de información de favicon @https://github.com/audreyr/favicon-cheat-sheet para obtener más información de favicon.