favicon.png vs favicon.ico - ¿Por qué usar PNG en lugar de ICO?

Question

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

Estoy apoyando los navegadores modernos que todo el apoyo PNG iconos favoritos.

Answer 1

Respuesta reemplazado (y se volvió Wiki de la Comunidad) debido a las numerosas actualizaciones y notas de varios otros en este tema:

• ICOs y PNGs ambos permiten transparencia basado completa de canales alfa
• ICO permite la compatibilidad hacia atrás para navegadores antiguos (por ejemplo IE6)
• PNG probablemente cuenta con el apoyo de herramientas más amplio para la transparencia, pero se pueden encontrar herramientas para crear canal alfa internacionales de productos básicos, así como la herramienta Dynamic Drive y Photoshop plug-in mencionado por @mercator.

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

Answer 2

Todos los navegadores modernos (probado con Chrome 4, Firefox 3.5, Internet Explorer 8, Opera 10 y Safari 4) siempre van a solicitar una favicon.ico a menos que se haya especificado un icono de acceso directo a través de <link>. Así que si no se especifica explícitamente una, lo mejor es tener siempre un archivo favicon.ico, para evitar un 404. Yahoo! sugiere lo haces pequeños y almacenar en caché.

Y usted no tiene que ir a un PNG sólo por la transparencia alfa tampoco. archivos ICO apoyo de transparencia alfa bien (es decir, color de 32 bits), aunque casi ningún herramientas le permiten crear ellos. Regularmente uso Generador FavIcon Dinámico de Tracción para crear archivos favicon.ico con transparencia alfa. Es la única herramienta en línea que conozco que puede hacerlo.

También hay una plug-in Photoshop que puede crearlas.

Answer 3

Los archivos .png son agradables, pero .ico proporcionan transparencia de canal alfa, también, Plus te dan la compatibilidad hacia atrás.

Tener un vistazo a qué tipo Stackoverflow 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 manivela de manzana itouch es para los usuarios de iPhone que hacen un acceso directo a un sitio web.

Answer 4

La ventaja teórica de archivos * .ico es que son envases capaces de contener más de un icono. Se podría, por ejemplo, almacenar una imagen con el canal alfa y una versión de 16 colores para los sistemas heredados, o se podría añadir 32x32 y 48x48 iconos (lo que debería arriba al arrastrar un enlace a Windows Explorer).

Esta buena idea, sin embargo, tiende a entrar en conflicto con las implementaciones de navegador.

Answer 5

PNG tiene 2 ventajas: tiene un tamaño más pequeño y es más ampliamente utilizado y soportado (excepto en favicons caso). Como se mencionó antes ICO, puede tener varios iconos de tamaño, que es útil para aplicaciones de escritorio, pero no demasiado para los sitios web. Yo recomendaría que poner un favicon.ico en la raíz de su aplicación. Un si tiene acceso a la cabeza de sus páginas web utilizar la etiqueta para apuntar a un archivo PNG. Así navegador más antiguo mostrará el favicon.ico y las más nuevas del png.

Para crear PNG y archivos de icono que se lo recomendaría The Gimp .

Answer 6

Algunas herramientas sociales como Google+ utilizan un método simple para obtener un favicon para los enlaces externos, ir a buscar http://your.domainname.com/favicon.ico

Debido a que no captación previa del contenido HTML, la etiqueta <link> no funcionará. En este caso, es posible que desee utilizar una regla mod_rewrite o simplemente colocar el archivo en la ubicación predeterminada.

Answer 7

Un ico puede ser a png.

Más precisamente, puede almacenar uno o más png dentro de este formato mínimo de contenedores, en lugar de la habitual de mapa de bits + alfa que todo el mundo asocia fuertemente con ico.

El apoyo es vieja, que aparece en Windows Vista ( 2007) y está bien soportado por los navegadores, aunque no necesariamente por el software de edición de iconos.

Cualquier png válido (entero incluyendo la cabecera) se puede antepone por un 6 byte de cabecera ico y el directorio de imágenes de 16 bytes.
GIMP tiene soporte nativo. Simplemente exportar como ico y garrapatas "Comprimido (PNG)".

Answer 8

Evitar PNG en cualquier caso, si quieres fiable compatibilidad IE6.