png - online - favicon.ico html
favicon.png vs favicon.ico: ¿por qué debo usar PNG en lugar de ICO? (8)
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 vs. favicon.ico?
Soy compatible con los navegadores modernos, todos los cuales son compatibles con los iconos favoritos de PNG.
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 obtienen el contenido HTML de manera previa, 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.
Evita PNG en cualquier caso si quieres una compatibilidad confiable con IE6.
La respuesta fue reemplazada (y se convirtió en Community Wiki) debido a las numerosas actualizaciones y notas de varias otras en este hilo:
- Tanto los ICO como los PNG permiten una transparencia completa basada en el canal alfa
- ICO permite la compatibilidad con versiones anteriores de navegadores antiguos (por ejemplo, IE6)
- Probablemente, PNG tiene 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.
La ventaja teórica de los archivos * .ico es que son contenedores que pueden contener más de un icono. Por ejemplo, puede almacenar una imagen con canal alfa y una versión de 16 colores para sistemas heredados, o puede agregar íconos de 32x32 y 48x48 (que deberían aumentar al arrastrar un enlace al explorador de Windows).
Esta buena idea, sin embargo, tiende a chocar con las implementaciones del navegador.
Los archivos .png son agradables, pero los archivos .ico también proporcionan transparencia de canal alfa, además de que le brindan compatibilidad con versiones anteriores.
Eche un vistazo a qué tipo de 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">
Apple-itouch thingy es para usuarios de iPhone que realizan un acceso directo a un sitio web.
PNG tiene 2 ventajas: tiene un tamaño más pequeño y es más ampliamente utilizado y compatible (excepto en el caso de favicons). Como se mencionó anteriormente, ICO puede tener íconos de múltiples tamaños, lo cual es útil para aplicaciones de escritorio, pero no demasiado para sitios web. Te recomendaría poner 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 apuntar a un archivo png. Por lo tanto, los navegadores más antiguos mostrarán el favicon.ico y los más nuevos el png.
Para crear archivos Png e Icon recomendaría gimp.org .
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 bitmap + alpha habitual que todos asocian fuertemente con ico.
El soporte es antiguo, 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 (todo incluido el encabezado) puede ser precedido 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)".
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 mediante <link> . 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 cacheable.
Y tampoco tienes que ir por un PNG solo por la transparencia alfa. Los archivos ICO admiten la transparencia alfa muy bien (es decir, en color de 32 bits), aunque casi ninguna herramienta le permite crearlos. Utilizo regularmente el Generador FavIcon 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.