Favicon: ¿.ico o .png/etiquetas correctas? [duplicar]
En un documento HTML5, ¿qué formato de favicon recomienda y por qué? Quiero que sea compatible con IE7 y todos los navegadores modernos.
Además, cuando uso .png, ¿debo especificar el tipo (tipo="imagen/png")?
Para compatibilidad con todos los navegadores, utilice .ico.
Sin embargo, .png está recibiendo cada vez más soporte, ya que es más fácil de crear usando múltiples programas.
para .ico
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
para .png, debe especificar el tipo
<link rel="icon" type="image/png" href="http://example.com/image.png" />
Ver aquí: favicon multi navegador
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-->
Sé que esta es una vieja pregunta.
Aquí hay otra opción: atender a diferentes requisitos de plataforma - Fuente
<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úntate ¿quién es tu público objetivo?
ACTUALIZACIÓN 27 de mayo de 2018: Como era de esperar, 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 ícono funcione en todos los navegadores y plataformas modernos. Sin embargo, no maneja la compatibilidad con versiones anteriores.
