w3schools pestaña page navegador link icono icon code favicon

pestaña - ¿Un favicon tiene que ser 32x32 o 16x16?



icono en pestaña de navegador html5 (8)

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

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

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

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! 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 ellas solían molestarme mucho!

Espero que te ayude!

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

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 todas partes. Vea los tamaños a continuación:

16 x 16 - Tamaño estándar para navegadores.
24 x 24 - IE9 tamaño de sitio anclado para la interfaz de usuario
32 x 32 - Nueva pestaña de la 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 la lista de Safari Reader en HiDPI / Retina
70 x 70 - Gana 8.1 baldosas de metro
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, retina de iPad hasta iOS6
150 x 150 - Gana 8.1 baldosas de metro
152 x 152 - iPad retina touch iOS7
196 x 196 - Android Chrome
310 x 150 - Gana 8.1 baldosas de Metro de ancho
310 x 310 - Gana 8.1 baldosas de metro

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

Para iOS, Apple recomienda nombres y resoluciones de archivos específicos , como máximo 180x180 para los dispositivos más recientes que ejecutan 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 e 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 Capitán introduce un icono SVG para las 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 .

Mira esta lista de imágenes de faviconos para 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 plugin de WordPress . Revelación completa: soy el autor de este sitio.

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

ico también es compatible con la transparencia, pero no estoy seguro de que sea un canal alfa como PNG; probablemente más como GIF donde está encendido o apagado.