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

png to ico

Question

En general, se considera una buena práctica servir 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 sirven un favicon de 16x16 por defecto que es <1kb, pero cuando se fijan estos sitios, la imagen utilizada es del tamaño adecuado. Asumo 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

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 inflados y archivos ICO hinchados. (Nota: Photoshop requiere un complemento para crear archivos ICO).

La mejor manera que he encontrado para crear archivos ICO pequeños y optimizados es usar 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 llegas al paso para guardar tu imagen .ico y puedes especificar los bits por píxel (bpp), cámbialo 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 2

O simplemente puede 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 los formatos más conocidos directamente en un archivo.

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

Answer 3

Si te gustan los scripts, escribí uno para convertir cualquier imagen en un favicon de resolución múltiple utilizando ImageMagick.

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

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

Answer 4

Actualizar:

Mi respuesta original está debajo, sin embargo, desde que escribí esta publicación creo que puede haber una mejor manera de manejar Favicons con HTML 5. Crearía un favicon de 32x32 (solo ese tamaño) para Internet Explorer 9 y abajo, pero use otros métodos para crear favicons de mayor resolución (tipo de archivo PNG) para otros navegadores, incluidos los dispositivos móviles. Puedes ver mi respuesta aquí para obtener información adicional.

Respuesta original a la pregunta :

Aquí es cómo se puede hacer:

1. Descargar png2ico . Extracto de c: /

2. Crea tus íconos en tu 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. Mantener 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, ejecute este comando:

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

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

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

Mientras lo haces, crea íconos para iPad y iPhone. Puede encontrar más información sobre los tamaños recomendados aquí y cómo implementarlos en su sitio .

También se puede encontrar más información general sobre Favicons aquí.

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