2012-02-05 15 views
30

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).¿Cómo tener múltiples tamaños de favicon, pero solo sirve un 16x16 por defecto?

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?

+0

¿Tiene un problema específico con el que está tratando? Lea el [preguntas frecuentes] para conocer qué tipos de preguntas se permiten aquí ... – Lix

+3

Cómo asegurarse de que se entregue un favicon en varios tamaños, sin que sea demasiado grande. Usar 10kb + para un favicon que la mayoría de los usuarios solo ve en 16x16 es un desperdicio, considerando que Facebook tiene 152 bytes, pero logran lo mismo. Parece una pregunta de programación específica para mí? – user1190803

+3

Lo que está pidiendo es detalles sobre cómo funciona un sistema. Si intenta implementar esto en su propio sitio y tiene dificultades, sería más específico ya que podría publicar código/más información sobre lo que ha intentado. Hay muchas preguntas que preguntan "cómo hace Facebook X" ... Estas no son preguntas específicas y atraen la especulación en lugar de respuestas/soluciones informadas. Quiero decir, no disculpas a mi amigo. Solo estoy tratando de mostrarte que tu pregunta (en su forma actual) podría no ser adecuada para este foro ... – Lix

Respuesta

35

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.

+3

Encontré [Niall's png2ico] (http://www.niallmoody.com/apps/nialls-png2ico) mucho más fácil de usar y también es compatible con un canal alfa completo. – Twilite

+1

En Ubuntu, puede usar icotool según http://steve.kargs.net/hosting/create-a-website-faviconico-with-ubuntu-linux/ –

+7

Esto no responde a la pregunta del OP.Él está preguntando cómo servir varios tamaños sin usar un archivo ICO inflado. –

19

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.

+2

+1 para usar GIMP – raykendo

+4

Enlace ahora muerto. Copia archivada aquí: http://web.archive.org/web/20130124171138/http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp – simon

+0

Nueva URL es el siguiente: http://catalyst.net.nz/tutorial/creating-a-multi-resolution-favicon – drAlberT

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.

+1

Puedes eliminar "-alpha off" si quieres usar transparencias en tu favicon ... o tal vez incluso vaya a http://realfavicongenerator.net/ (este sitio tiene aún más opciones (puede especificar un fondo de cosas específicas de iOS, etc.) –

+1

¡La mejor respuesta de este tema! ¡Gracias @cappie! – pierallard

Cuestiones relacionadas