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


Me gustaría usar una sola imagen como favicon regular y favicon amigable para iPhone / iPad.

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


567
2017-10-25 13:09


origen


Respuestas:


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

Para iOS, Apple recomienda nombres de archivos y resoluciones 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 icono táctil de Apple.

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

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

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

Mira este lista de imágenes favicon para una referencia completa.

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


1213
2017-10-25 12:51



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

Para responder a esta pregunta ahora, 2 favicons no lo harán si quieres que tu ícono se vea bien en todos lados. Vea los tamaños a continuación:

16 x 16 - Tamaño estándar para navegadores
24 x 24 - IE9 cubrió el tamaño del sitio para la interfaz de usuario
32 x 32 - pestaña nueva 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 táctil hasta iOS7
64 x 64 - Sitio de Windows, barra lateral de la lista de Safari Reader en HiDPI / Retina
70 x 70 - Gane 8.1 Metro
72 x 72 - iPad táctil 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 - IE10 Teja de Metro para sitio fijado, iPad retina hasta iOS6
150 x 150 - Gane 8.1 Metro
152 x 152 - iPad retina touch iOS7
196 x 196 - Android Chrome
310 x 150 - Gane 8.1 ancho Metro azulejo
310 x 310 - Gane 8.1 Metro

Tomado de aquí.


96
2017-11-07 17:45



No estoy seguro de si / cómo los navegadores escalan iconos grandes, pero el W3C sugiere lo siguiente1:

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).


71
2017-10-25 13:13



En realidad, para que su favicon funcione correctamente en todos los navegadores, tendrá que 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! puedes encontrarlo en faviconit.com

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

Espero que te ayude!


49
2018-04-22 23:18



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

ico también admite transparencia, pero no estoy seguro si es un canal alfa como PNG; probablemente más como GIF donde está encendido o apagado.


6
2017-10-25 13:14



De acuerdo con la Artículo de Wikipedia sobre Favicon, Internet Explorer solo admite el formato ICO para favicons.

Me quedaría con dos iconos diferentes.


2
2017-10-25 13:12



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


2
2017-11-16 22:34



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/


1
2017-10-25 13:13