las siguientes tablas ilustran el soporte de varias características con los principales navegadores web. A menos que se indique lo contrario, los números de versión indican el número de versión inicial de una función compatible.
Soporte de formato de archivo edit
la siguiente tabla ilustra el soporte de formato de archivo de imagen para el favicon.
- ^ Safari, desde la versión 12.0, admite favicons SVG de un solo color en algunos casos en un formato no estándar
mask-icon
.,
Además, estos archivos de iconos pueden ser 16×16, 32×32, 48×48, o 64×64 píxeles en tamaño y 8 bits, 24 bits o 32 bits en profundidad de color. El artículo de formato de archivo ICO explica los detalles de los iconos con más de 256 colores en varias plataformas Microsoft Windows.
uso de faviconEdit
esta tabla ilustra las diferentes áreas del navegador donde se pueden mostrar los favicons.
El software Opera agregó la capacidad de cambiar el favicon en la marcación rápida en Opera 10.,
cómo usareditar
Esta tabla ilustra las diferentes formas en que el favicon puede ser reconocido por el navegador web. La implementación estándar utiliza un elemento de enlace con un atributo rel
en la sección <head>
del documento para especificar el formato, nombre y ubicación de los archivos.
- ^ Firefox sólo acepta
favicon.ico
en la raíz del sitio sin un<link>
etiqueta si el valor debrowser.chrome.site_icons
atrue
en elabout:config
., El valor predeterminado estrue
. Si se establece enfalse
, estos favicons se ignoran. - ^ Opera carga
/favicon.ico
solo siMultimedia/Always load favicon
la opción Enopera:config
está establecida en1
. Consulte la página de Soporte de Opera para obtener más detalles.
si hay enlaces para favicons PNG e ICO, los navegadores compatibles con PNG-favicon seleccionan qué formato y tamaño usar de la siguiente manera. Firefox y Safari usarán el favicon que viene último., Chrome para Mac usará cualquier favicon con formato ICO, de lo contrario el favicon 32×32. Chrome para Windows utilizará el favicon que viene primero si es 16×16, de lo contrario el ICO. Si ninguna de las opciones antes mencionadas está disponible, ambos Chromes usarán el favicon que venga primero, exactamente lo contrario de Firefox y Safari. De hecho, Chrome para Mac ignorará el favicon 16×16 y utilizará la versión 32×32, solo para reducirlo a 16×16 en dispositivos no retina. Opera elegirá cualquiera de los iconos disponibles completamente al azar.,
solo SeaMonkey no obtiene favicon.ico
archivos en la raíz del sitio web por defecto.
Device supportEdit
para dispositivos Apple con el sistema operativo iOS Versión 1.1.3 o posterior, así como algunos dispositivos Android, es posible proporcionar un icono personalizado que los usuarios pueden mostrar en sus pantallas de inicio utilizando el botón Agregar a la pantalla de inicio dentro de la hoja Compartir en Safari., Esta función se habilita proporcionando un <link rel="apple-touch-icon" ...>
en la sección <head>
de los documentos servidos por el sitio web. Si no se proporciona el icono personalizado, se colocará una miniatura de la página web en la pantalla de inicio.
El tamaño básico recomendado para este icono es de 152 × 152 píxeles.
para el iPad, el tamaño básico es de 180×180 píxeles. Tabletas Android prefieren un icono PNG 192×192.
el archivo de icono al que hace referencia apple-touch-icon
se modifica para agregar esquinas redondeadas., En las versiones de iOS anteriores a iOS 7, se agregaría una sombra paralela y brillo reflectante, y se podría proporcionar el icono apple-touch-icon-precomposed
para indicar a los dispositivos que no apliquen brillo reflectante en la imagen.
con esquinas redondeadas, agregadas por iOS
<link rel="apple-touch-icon" href="https://example.com/image.png">
los navegadores o dispositivos móviles tampoco requieren HTML para recuperar estos iconos. La raíz del sitio web es la ubicación predeterminada para el archivo apple-touch-icon.png
(en orden de prioridad).,
HTML5 recommendation for icons in multiple sizesEdit
la especificación HTML5 actual recomienda especificar varios tamaños para los iconos, utilizando los atributos rel="icon" sizes="space-separated list of icon dimensions"
dentro de una etiqueta <link>
. Múltiples formatos de iconos, incluidos los formatos de contenedor como Microsoft .ico y Macintosh .los archivos icns, así como los gráficos vectoriales escalables se pueden proporcionar incluyendo el tipo de contenido del icono en el formato type="file content-type"
dentro de la etiqueta <link>
.,
a partir de iOS 5, los dispositivos móviles de Apple ignoran la recomendación HTML5 y en su lugar utilizan el método propietario apple-touch-icon
detallado anteriormente. El navegador web Google Chrome, sin embargo, seleccionará el tamaño más cercano de los proporcionados en los encabezados HTML para crear iconos de aplicación de 128×128 píxeles, cuando el usuario elija los accesos directos Crear Aplicación… desde el menú «Herramientas».
faviconseditar
varios navegadores como Chrome, Firefox y Opera soportan la animación de favicons., Un informe de error ha estado abierto para Firefox desde 2001 solicitando una forma de desactivar la función.
Deja una respuesta