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?
Respuestas:
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.
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
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) .
[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.
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!
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.
.icoarchivo.
De acuerdo con el artículo de Wikipedia sobre Favicon, Internet Explorer solo admite el formato ICO para favicons.
Me quedaría con dos iconos diferentes.
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.
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/
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)