¿Un favicon tiene que ser 32x32 o 16x16?

692

Me gustaría usar una sola imagen como favicon normal y favicon compatible con iPhone / iPad.

es posible? ¿Una escala PNG de 72x72 compatible con iPad se vincularía como un favicon de navegador normal? ¿O tengo que usar una imagen separada de 16x16 o 32x32?

Alex G
fuente
mira mi respuesta stackoverflow.com/a/45301651/661584 mucho más fácil. podría ayudar. gracias
MemeDeveloper

Respuestas:

1448

Para IE, Microsoft recomienda 16x16, 32x32 y 48x48 empaquetados en el archivo favicon.ico .

Para iOS, Apple recomienda nombres y resoluciones de archivos específicos , como máximo 180x180 para los últimos dispositivos con iOS 8.

Android Chrome utiliza principalmente un manifiesto y también se basa en el ícono táctil de Apple.

IE 10 en Windows 8.0 requiere imágenes PNG y un color de fondo e IE 11 en Windows 8.1 y 10 acepta varias imágenes PNG declaradas en un archivo XML dedicado llamadobrowserconfig.xml .

Safari para Mac OS X El Capitan presenta un icono SVG para pestañas ancladas .

Algunas otras plataformas buscan archivos PNG con varias resoluciones, como la imagen de 96x96 para Google TV o la imagen de 228x228 para Opera Coast .

Mire esta lista de imágenes de favicon para obtener una referencia completa.

TLDR: este generador de favicon puede generar todos estos archivos a la vez. El generador también se puede implementar como un complemento de WordPress . Divulgación completa: soy el autor de este sitio.

philippe_b
fuente
136

No veo ninguna información actualizada aquí, así que aquí va:

Para responder esta pregunta ahora, 2 favicons no lo harán si quieres que tu ícono se vea genial en todas partes. Ver los tamaños a continuación:

16 x 16 - Tamaño estándar para navegadores
24 x 24 - Tamaño del sitio fijado IE9 para la interfaz de usuario
32 x 32 - Nueva pestaña de página de IE, botón de la barra de tareas de Windows 7+, Barra lateral de la Lista de lectura de Safari
48 x 48 - Sitio de Windows
57 x 57 - iPod touch , iPhone hasta 3G
60 x 60 - iPhone touch hasta iOS7
64 x 64 - Sitio de Windows, barra lateral de Safari Reader List en HiDPI / Retina
70 x 70 - Win 8.1 Metro tile
72 x 72 - iPad touch hasta iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhone retina touch hasta iOS6
120 x 120 - iPhone retina touch iOS7
128 x 128 - Aplicación Chrome Web Store, Android
144 x 144 - mosaico IE10 Metro para sitio anclado, iPad retina hasta iOS6
150 x 150 - Gana la casilla 8.1 Metro
152 x 152 - iPad retina touch iOS7
196 x 196 - Android Chrome
310 x 150 - Gana 8.1 mosaico Metro ancho
310 x 310 - Gana 8.1 mosaico Metro

Mate
fuente
8
¿Hay alguna referencia para esta lista?
Abdulhameed
81

No estoy seguro de si / cómo los navegadores escalan íconos grandes, pero el W3C sugiere lo siguiente 1 :

El formato de la imagen que ha elegido debe ser de 16x16 píxeles o 32x32 píxeles, utilizando colores de 8 bits o de 24 bits. El formato de la imagen debe ser uno de PNG (un estándar W3C), GIF o ICO.


1 w3c.org: Cómo agregar un Favicon a su sitio (Borrador en desarrollo) .

Daniel Vassallo
fuente
En 2006 llegué a conclusiones similares (en "Favicon Primer" (abril de 2006; por hakre) ) pero no sabía sobre ese material del W3C de 2005 (sí, la búsqueda y la lectura ayudan :)). Gracias por el resumen Esa vez escribí y no o eso también era sobre colores de 4 bits.
Hakre
2
¿Ha sido un borrador desde 2005? Oo
mcont
77
Este uso debería ser reemplazado por el estándar html5 ahora. No tiene limitación en el tamaño del icono y proporciona un ejemplo con un icono de 32768x32768.
rhgb
1
@rhgb ¡Gracias! He estado mirando confundido por qué demonios [current year]todavía necesito lidiar con algunas limitaciones de mierda cuando las cosas que puedes hacer solo con css son lo suficientemente sorprendentes, y casi me pierdo tu respuesta. Solo usaré lo que quiera y si algo no lo admite, es su problema, según el estándar.
Sahsahae
63

En realidad, para que su favicon funcione correctamente en todos los navegadores, deberá agregar más de 10 archivos en los tamaños y formatos correctos.

¡Mi amigo y yo hemos creado una aplicación solo para esto! lo puedes encontrar en faviconit.com

Hicimos esto, para que la gente no tenga que crear todas estas imágenes y las etiquetas correctas a mano, ¡cree que todas me molestan mucho!

PedroHCan
fuente
6

Usted puede tener múltiples tamaños de iconos en el mismo archivo. Rutinariamente creo favicons ( .icoarchivo) de 48, 32 y 16 píxeles. Puede agregar cualquier imagen de tamaño que desee. La pregunta es, ¿usará el iPhone un icoarchivo?

icotambién es compatible con la transparencia, pero no estoy seguro si es un canal alfa como PNG; probablemente más como GIF donde está activado o desactivado.

Puntilla
fuente
1
Creo que XP y versiones posteriores admiten un formato similar a PNG (¿PNG mismo?) Para imágenes RGBA. egressive.com/tutorial/… muestra cómo puede usar el GIMP para incluir tales imágenes en un .icoarchivo.
SamB
1
ICO utiliza un canal alfa de 1 bit, mientras que PNG tiene 8 bits como en los otros canales. ICO será suficiente para iconos simples, pero en algunos casos PNG será más deseable debido a esta diferencia.
Steen Schütt
SamB tiene casi razón y Time Sheep tiene media razón. ICO admite imágenes PNG para incrustarse en él, y los PNG incrustados deben ser imágenes RGBA de 32 bits.
Cornstalks
2

El favicon no tiene que ser 16x16 o 32x32. Puede crear un favicon que sea 80x80 o 100x100, solo asegúrese de que ambos valores sean del mismo tamaño y, obviamente, no lo haga demasiado grande o demasiado pequeño, elija un tamaño razonable.

Trevor
fuente
3
lo siento, pero hay mucho, mucho más de lo que sugiere tu respuesta. Visite stackoverflow.com/a/45301651/661584 y léalo si lo desea: es un complejo loco. podría ayudar. gracias
MemeDeveloper
1

Necesitaré archivos separados para cada resolución, me temo. Hay un artículo realmente bueno sobre el monitor de campaña que describe cómo crearon e implementaron sus íconos para cada dispositivo iOS también:

http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/

Ricardo
fuente
2
usted puede tener múltiples tamaños de iconos en el mismo archivo.
Brad
Muchas gracias, es un excelente artículo. Todavía es un misterio qué harían los dispositivos de Apple con archivos ico que tienen imágenes de varios tamaños.
Alex G
1

Como aprendí, ninguna de esas soluciones son perfectas. Usar un generador de favicon es una buena solución, pero su número es abrumador y es difícil elegir. Me gustaría agregar que si desea que su sitio web esté habilitado para PWA, debe proporcionar también un ícono de 512x512 como lo indica Google Devs :

iconos que incluyen una versión de 192 px y una de 512 px

No conocí muchos generadores de favicon que aplicaran ese criterio ( firebase sí , pero hay muchas cosas que no hace). Por lo tanto, la solución debe ser una mezcla de muchas otras soluciones.

No sé, hoy a principios de 2020 si proporcionar un 16x16, 32x32 sigue siendo relevante. Supongo que todavía importa en cierto contexto, por ejemplo, si sus usuarios todavía usan IE por alguna razón (esto todavía ocurre en algunas empresas privadas que no migran a un navegador más nuevo por algunas razones)

snoob dogg
fuente