pwa online icon html favicon

html - pwa - png to ico favicon online



Favicon dimensiones? (13)

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. - w3.org/2005/10/howto-favicon

Tengo un favicon con las dimensiones de altura = 26px / ancho = 20px llamado favicon.png

<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />

Sin embargo, en mi navegador, mi favicon.png está distorsionado.

Pregunta : ¿Se supone que mi favicon.png es un tamaño particular? Además, ¿puedo usar un tamaño / dimensión no estándar y, de ser así, cómo?

Respuesta corta

Se supone que el favicon es un conjunto de imágenes 16x16, 32x32 y 48x48 en formato ICO . El formato ICO es diferente al PNG. Las imágenes que no son cuadradas no son compatibles.

Para generar el favicon, por muchas razones que se explican a continuación, le aconsejo que use este generador de favicon . Revelación completa: soy el autor de este sitio.

Respuesta larga y completa

Favicon debe ser cuadrado. Los navegadores de escritorio y Apple iOS no admiten iconos que no sean cuadrados.

El favicon es compatible con varios archivos:

  • Un icono de favicon.ico .
  • Algunos otros iconos PNG.

Para obtener los mejores resultados en los navegadores de escritorio (Windows / IE, MacOS / Safari, etc.), debe combinar ambos tipos de iconos.

favicon.ico

Aunque todos los navegadores de escritorio pueden lidiar con este ícono, es principalmente para versiones anteriores de IE.

El formato ICO es diferente del formato PNG. Este punto es complicado porque algunos navegadores son lo suficientemente inteligentes como para procesar una imagen PNG correctamente, incluso cuando se le cambió el nombre incorrectamente con una extensión ICO.

Un archivo ICO puede contener varias imágenes y Microsoft recomienda poner las versiones 16x16, 32x32 y 48x48 del icono en favicon.ico . Por ejemplo, IE utilizará la versión 16x16 para la barra de direcciones y el 32x32 para un acceso directo de la barra de tareas.

Declara el favicon con:

<link rel="icon" href="/path/to/icons/favicon.ico">

Sin embargo, se recomienda colocar favicon.ico en el directorio raíz del sitio web y no declararlo en absoluto y dejar que los navegadores modernos elijan los iconos PNG.

Iconos PNG

Los navegadores de escritorio modernos (IE11, versiones recientes de Chrome, Firefox ...) prefieren usar iconos PNG. Los tamaños habituales esperados son 16x16, 32x32 y "lo más grandes posible" . Por ejemplo, MacOS / Safari usa el icono de 196x196 si es el más grande que puede encontrar.

¿Cuáles son los tamaños recomendados? Elige tus plataformas favoritas:

Los iconos PNG se declaran con:

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32"> ...

Cuidado: Firefox no admite el atributo de sizes y utiliza el último icono PNG que encuentra . Asegúrese de declarar la imagen de 32x32 al final: es lo suficientemente buena para Firefox, y eso evitará que descargue una imagen grande que no necesita.

También tenga en cuenta que Chrome no admite el atributo de sizes y tiende a cargar todos los iconos declarados . Mejor no declarar demasiados iconos.

Plataformas moviles

Esta pregunta es sobre el favicon de escritorio, por lo que no es necesario profundizar demasiado en este tema.

Apple define el icono táctil para la plataforma iOS . iOS no es compatible con el icono no cuadrado. Simplemente vuelve a escalar las imágenes que no son cuadradas para hacerlas cuadradas (busque el ejemplo de Kioskea) .

Android Chrome se basa en el ícono táctil de Apple y también define un ícono PNG de 192x192 .

Microsoft define la imagen de mosaico y el archivo browserconfig.xml .

Conclusión

Generar un favicon que funcione en todas partes es bastante complejo. Te aconsejo que uses este generador de favicon . Revelación completa: soy el autor de este sitio.

2018 estándares gracias a faviconit

Uso faviconit.com para obtener el mejor soporte de navegador y dispositivo posible. Subes una imagen y este sitio te da el código, las imágenes convertidas y un archivo browserconfig.

Simplemente podríamos cargar un favicon manualmente en nuestro sitio web de 16x16 y probablemente se mostrará en casi cualquier navegador.

Pero cuando lo marque como uno de sus favoritos en su teléfono inteligente o tableta, necesitaremos imágenes más grandes (60x60 a 144x144).

Y digamos que uno de nuestros usuarios crea un acceso directo en su escritorio. ¡En ese caso un 196x196 se ve mejor!

Código de ejemplo de lo que le daría faviconit, junto a todas las imágenes convertidas:

<!-- place this in your <head></head> --> <link rel="shortcut icon" href="/favicon.ico"> <link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png"> <link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png"> <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="apple-touch-icon" href="/favicon-57.png"> <link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png"> <link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png"> <link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">

Desde Windows 8

Pero eso no es todo. ¡Desde Windows 8 podemos crear accesos directos a sitios web con mosaicos!

<!-- place this in your <head></head> --> <meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="msapplication-TileImage" content="/favicon-144.png"> <meta name="msapplication-config" content="/browserconfig.xml">

Browserconfig.xml

Cargue un archivo llamado browserconfig.xml (para habilitar los mosaicos en windows> 8)

<browserconfig> <msapplication> <tile> <square70x70logo src="/favicon-70.png"/> <square150x150logo src="/favicon-150.png"/> <square310x310logo src="/favicon-310.png"/> <TileColor>#FFFFFF</TileColor> </tile> </msapplication> </browserconfig>

16x16 píxeles, formato * .ico.

El formato de favicon debe ser cuadrado, de lo contrario el navegador lo ampliará. Desafortunadamente, Internet Explorer <11 no admite los tipos de archivo .gif o .png, solo el formato .ico de Microsoft. Puedes usar alguna aplicación de "generador de favicon" como: http://favicon-generator.org/

No, no puede usar un tamaño o dimensión no estándar, ya que causaría estragos en los navegadores de las personas donde se muestran los íconos. Podría hacerlo 12x16 (con cuatro píxeles de relleno blanco / transparente en el lado de 12 píxeles) para preservar su relación de aspecto, pero no puede ir más grande (bueno, puede hacerlo, pero el navegador lo reducirá).

Si tienes acceso a Photoshop, mira esto:

http://www.photoshopsupport.com/tutorials/jennifer/favicon.html

Este tutorial se enlaza con un complemento que permite a Photoshop guardar archivos ico de forma nativa y luego proporciona información sobre los estándares de favicon.

La primera vez que comencé a hacer favicons, la regla era un archivo ico de 16x16 8 bits. Si quieres asegurarte de que el favicon funcione en la mayoría de los navegadores, me quedo con eso.

Un favicon para un sitio web normalmente tiene que ser un archivo * .ico y puede ser 32x32 o 16x16. El uso de un tamaño no estándar no funcionará en todos los navegadores y aparecerá todo distorsionado como usted mismo vio. Intente convertir esa imagen usando este sitio: http://www.favicon.cc/ y luego intente usarla.

favicon.ico es 16x16

<link rel="shortcut icon" href="favicon.ico"/>

Y los uso para ser guapos en dispositivos móviles y tabletas:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png"> <link rel="apple-touch-icon-precomposed" href="img/ico57.png">

Es importante usar el nombre "favicon.ico" en la raíz porque muchos navegadores intentarán encontrar allí primero.

Wikipedia tiene esto que decir:

Además, dichos archivos de iconos pueden tener un tamaño de 16 × 16 o 32 × 32 píxeles, y una profundidad de color de 8 bits o 24 bits (tenga en cuenta que los archivos GIF tienen una entrada limitada de 256 paletas de colores).

Creo que la mejor manera es usar un gif de 32x32 y probarlo con diferentes navegadores.

La solución más sencilla es utilizar una (!) Imagen PNG (en 2018).

Simplemente agregue esto al encabezado de su documento:

<link rel="shortcut icon" type="image/png" href="/img/icon-196x196.png"> <link rel="shortcut icon" sizes="196x196" href="/img/icon-196x196.png"> <link rel="apple-touch-icon" href="/img/icon-196x196.png">

El último enlace es para Apple (pantalla de inicio), el segundo para Android (pantalla de inicio) y el primero para el resto.

Tenga en cuenta que esta solución NO admite ''mosaicos'' en Windows 8/10. Es compatible con imágenes en accesos directos, marcadores y pestañas del navegador.