favicon.png vs favicon.ico: ¿por qué debería usar PNG en lugar de ICO?

Además del hecho de que PNG es un formato de imagen más común, ¿hay alguna razón técnica para favorecer favicon.png vs. favicon.ico?

Apoyo navegadores modernos que admiten icons favoritos de PNG.

La respuesta fue reemplazada (y se convirtió en Community Wiki) debido a numerosas actualizaciones y notas de varios otros en este hilo:

  • Los ICO y PNG permiten una transparencia completa basada en canales alfa
  • ICO permite la compatibilidad con versiones anteriores de navegadores antiguos (por ejemplo, IE6)
  • PNG probablemente tenga un soporte de herramientas más amplio para la transparencia, pero también puede encontrar herramientas para crear ICO de canal alfa, como la herramienta Dynamic Drive y el complemento de Photoshop mencionado por @mercator.

No dude en consultar las otras respuestas aquí para más detalles.

Todos los navegadores modernos (probados con Chrome 4, Firefox 3.5, IE8, Opera 10 y Safari 4) siempre solicitarán un favicon.ico menos que haya especificado un icono de acceso directo a través de . Entonces, si no especifica explícitamente uno, es mejor tener siempre un archivo favicon.ico , para evitar un 404. Yahoo! sugiere que lo hagas pequeño y almacenable en caché.

Y tampoco tiene que elegir un PNG solo para la transparencia alfa. Los archivos ICO admiten transparencia alfa muy bien (es decir, color de 32 bits), aunque casi ninguna herramienta le permite crearlos. Regularmente uso FavIcon Generator de Dynamic Drive para crear archivos favicon.ico con transparencia alfa. Es la única herramienta en línea que conozco que puede hacerlo.

También hay un complemento gratuito de Photoshop que puede crearlos.

Los archivos .png son agradables, pero los archivos .ico proporcionan transparencia de canal alfa, además de que te ofrecen compatibilidad con versiones anteriores.

Eche un vistazo a qué tipo de StackOverflow utiliza, por ejemplo (tenga en cuenta que es transparente):

   

La cosita apple-itouch es para usuarios de iphone que hacen un acceso directo a un sitio web.

La ventaja teórica de los archivos * .ico es que son contenedores que pueden contener más de un icono. Por ejemplo, podría almacenar una imagen con un canal alfa y una versión de 16 colores para sistemas heredados, o podría agregar icons de 32×32 y 48×48 (lo que debería hacer al arrastrar un enlace al explorador de Windows).

Esta buena idea, sin embargo, tiende a chocar con las implementaciones del navegador.

PNG tiene 2 ventajas: tiene un tamaño más pequeño y es más ampliamente utilizado y compatible (excepto en caso de favicons). Como se mencionó anteriormente, ICO puede tener icons de varios tamaños, lo cual es útil para aplicaciones de escritorio, pero no demasiado para sitios web. Te recomendaría que coloques un favicon.ico en la raíz de tu aplicación. Y si tiene acceso a las páginas del Jefe de su sitio web, use la etiqueta para apuntar a un archivo png. Entonces el navegador más antiguo mostrará el favicon.ico y los más nuevos el png.

Para crear archivos Png e Icon, recomendaría The Gimp .

Algunas herramientas sociales como Google+ usan un método simple para obtener un favicon para enlaces externos, buscando http://your.nombrededominio.com/favicon.ico

Como no captan previamente el contenido HTML, la etiqueta no funcionará. En este caso, es posible que desee utilizar una regla mod_rewrite o simplemente colocar el archivo en la ubicación predeterminada.

Un ico puede ser un png.

Más precisamente, puede almacenar uno o más png dentro de este formato de contenedor mínimo, en lugar del habitual bitmap + alfa que todos asocian fuertemente con ico.

La compatibilidad es antigua, aparece en Windows Vista (2007) y es bien soportada por los navegadores, aunque no necesariamente por el software de edición de icons.

Cualquier png válido (entero, incluido el encabezado) puede ser antepuesto por un encabezado ico de 6 bytes y un directorio de imágenes de 16 bytes.
GIMP tiene soporte nativo. Simplemente exporte como ico y marque “Comprimido (PNG)”.

Evite PNG en cualquier caso si desea compatibilidad IE6 confiable.