w3schools transparente code html html5 png favicon ico

html - transparente - Favicon:.ico o.png/corregir etiquetas?



favicon transparente (3)

Esta pregunta ya tiene una respuesta aquí:

En un documento HTML5, ¿qué formato de favicón recomienda y por qué? Quiero que sea compatible con IE7 y todos los navegadores modernos.

Además, al usar .png, ¿necesito especificar el tipo (type = "image / png")?


Sé que esta es una vieja pregunta.

Aquí hay otra opción: atender los diferentes requisitos de la plataforma: Source

<link rel=''shortcut icon'' type=''image/vnd.microsoft.icon'' href=''/favicon.ico''> <!-- IE --> <link rel=''apple-touch-icon'' type=''image/png'' href=''/icon.57.png''> <!-- iPhone --> <link rel=''apple-touch-icon'' type=''image/png'' sizes=''72x72'' href=''/icon.72.png''> <!-- iPad --> <link rel=''apple-touch-icon'' type=''image/png'' sizes=''114x114'' href=''/icon.114.png''> <!-- iPhone4 --> <link rel=''icon'' type=''image/png'' href=''/icon.114.png''> <!-- Opera Speed Dial, at least 144×114 px -->

Este es el enfoque más amplio que he encontrado hasta ahora.

En última instancia, la decisión depende de sus propias necesidades. Pregúntese, ¿cuál es su público objetivo?

ACTUALIZACIÓN 27 de mayo de 2018: como se esperaba, el tiempo pasa y las cosas cambian. Pero también hay buenas noticias. Encontré una herramienta llamada Real Favicon Generator que genera todas las líneas necesarias para que el icono funcione en todos los navegadores y plataformas modernos. Aunque no maneja la compatibilidad hacia atrás.


Ver aquí: favicon navegador cruzado

Ese es el camino a seguir:

<link rel="icon" type="image/png" href="http://www.example.com/image.png"><!-- Major Browsers --> <!--[if IE]><link rel="SHORTCUT ICON" href="http://www.example.com/alternateimage.ico"/><![endif]--><!-- Internet Explorer-->


Para la compatibilidad con todos los navegadores se adhieren a .ico .

Sin embargo, .png está recibiendo cada vez más soporte, ya que es más fácil de crear utilizando múltiples programas.

para .ico

<link rel="shortcut icon" href="http://example.com/myicon.ico" />

para .png, necesitas especificar el tipo

<link rel="icon" type="image/png" href="http://example.com/image.png" />