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

Soy compatible con navegadores modernos que admiten íconos favoritos PNG.

0

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

Y tampoco tiene que optar por un PNG solo por la transparencia alfa. Archivos ICO admite la transparencia alfa muy bien (es decir, color de 32 bits), aunque casi ninguna herramienta te permite crearlas. Yo uso regularmente Generador FavIcon de Dynamic Drive crear favicon.ico archivos con transparencia alfa. Es la única herramienta en línea que conozco que puede hacerlo.

También hay un Complemento de Photoshop que puede crearlos.

18

Respuesta reemplazada (y convertida en Comunidad Wiki) debido a numerosas actualizaciones y notas de varios otros en este hilo:

  • Tanto las ICO como las PNG permiten una transparencia completa basada en el canal alfa
  • ICO permite la compatibilidad con versiones anteriores de navegadores más 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 el Herramienta Dynamic Drive y Complemento de Photoshop mencionado por @mercator.

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

5

Los archivos .png son agradables, pero los archivos .ico también brindan transparencia de canal alfa, más te dan compatibilidad con versiones anteriores.

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

<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"> 
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png"> 

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

4

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 canal alfa y una versión de 16 colores para sistemas heredados, o podría agregar iconos de 32×32 y 48×48 (que aparecerían al, por ejemplo, arrastrar un enlace al explorador de Windows).

Sin embargo, esta buena idea tiende a chocar con las implementaciones del navegador.

3

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

Para crear archivos Png e Icon, recomendaría El GIMP.

3

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

Dado que no capturan previamente el contenido HTML, el <link> 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.

3

Un ico puede ser un png.

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

El soporte es antiguo que aparece en Windows Vista (2007) y es compatible con los navegadores, aunque no necesariamente con el software de edición de iconos.

Cualquier png válido (todo incluido el encabezado) puede ir precedido por un Encabezado ico de 6 bytes y directorio de imágenes de 16 bytes.
GIMP tiene soporte nativo. Simplemente exporte como ico y marque «Comprimido (PNG)».

Por lo que vale, hago esto:

    <!-- Favicon - Generic -->
    <link rel="icon" href="http://stackoverflow.com/questions/1344122/path/favicon-32_x_32.png" >
    <link rel="icon" href="path/favicon-57_x_57.png" >
    <link rel="icon" href="path/favicon-76_x_76.png" >
    <link rel="icon" href="path/favicon-96_x_96.png" >
    <link rel="icon" href="path/favicon-128_x_128.png" >
    <link rel="icon" href="path/favicon-192_x_192.png" >
    <link rel="icon" href="path/favicon-228_x_228.png" >
    <!-- Favicon - Android -->
    <link rel="shortcut icon" href="path/favicon-196_x_196.png" >
    <!-- Favicon - iOS -->
    <link rel="apple-touch-icon" href="path/favicon-120_x_120.png" >
    <link rel="apple-touch-icon" href="path/favicon-152_x_152.png" >
    <link rel="apple-touch-icon" href="path/favicon-180_x_180.png" >

Y yo todavía mantenga el favicon.ico en la raíz.

1

Evite PNG en cualquier caso si desea una compatibilidad confiable con IE6.

9

No es la respuesta que estás buscando? Lea otras preguntas en las etiquetas favicon png ico