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

442

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 frente a favicon.ico?

Estoy admitiendo navegadores modernos que admiten íconos favoritos de PNG.

png favicon ico Jon Galloway
fuente

Respuestas:

233

La respuesta se reemplazó (y se convirtió en Wiki de la comunidad) debido a numerosas actualizaciones y notas de varios otros en este hilo:

  • Las ICO y PNG permiten la transparencia basada en el canal alfa completo
  • 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 obtener más detalles.

Ámbar
fuente
78
ICO también permite el canal alfa
Álvaro González
58
-1 ICO admite múltiples resoluciones, incluido el canal alfa completo. Por cierto, el alfa de 1 bit se conoce como "transparencia". El único límite real que tuvo ICO fue con íconos más grandes o iguales a 256 de longitud (en cualquier dirección), aunque se ha superado varias veces.
Cristiano
26
-1 .ico también permite múltiples resoluciones en un archivo (16x16 y 32x32 por ejemplo). Entonces, el icone se mantiene agradable cuando crea un acceso directo en un escritorio.
gagarine
44
La mayoría de los navegadores favorecen el favicon.ico en la raíz sobre el vinculado. Con su solución, la mayoría de los navegadores elegirían el .ico no transparente en lugar del png vinculado.
Lode
@lode, ¿por qué elegiría particularmente un ico no transparente en lugar de un ico transparente?
Rob Grant
367

Todos los navegadores modernos (probados con Chrome 4, Firefox 3.5, IE8, Opera 10 y Safari 4) siempre solicitarán un a favicon.icomenos 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.icoarchivo, para evitar un 404. Yahoo! sugiere que lo haga 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 el generador FavIcon de Dynamic Drive para crear favicon.icoarchivos 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.

mercator
fuente
66
¡Gran sugerencia de esta herramienta Dynamic Drive! Marcado instantáneamente. ¡Gracias!
Marcos Buarque
3
re herramientas, es en gran medida falso; Hay varias herramientas de diseño de iconos. Escribí uno simple en el pasado.
Cristiano
44
Para aquellos que no tienen $ 650 dólares para Photoshop, pueden usar pixlr.com (gratis) para crear, editar y guardar archivos .png con capas completas y transparencia :)
Scott B
3
@Pacerier Es increíblemente difícil .icoeditar en PS. E incluso si lo hace, el resultado final es tan malo, pensaría que .bmpes un mejor formato (agrega muchos metadatos haciendo que la reedición sea un gran dolor).
Christian el
44
@mikevoermans: todavía se lee como PNG; La mayoría de los navegadores modernos no se preocupan demasiado por las extensiones de archivo. Por cierto, esta es la mejor respuesta y debería ser la aceptada.
rvighne
48

Los archivos .png son agradables, pero los archivos .ico también proporcionan transparencia de canal alfa, además de brindarle compatibilidad con versiones anteriores.

Eche un vistazo a qué tipo utiliza StackOverflow, 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 de Apple-itouch es para usuarios de iPhone que hacen un acceso directo a un sitio web.

Wouter van Nifterick
fuente
16
PNG también puede proporcionar canal alfa
Álvaro González
10
sí, mi punto fue que ico's puede hacer todo lo que los png pueden hacer (transparencia alfa) como favicon, y además son compatibles con todos los navegadores desde el año 0.
Wouter van Nifterick
de acuerdo con Wikipedia, Internet Explorer no podrá admitir una línea como esta: <link rel = "icon" type = "image / vnd.microsoft.icon" href = " example.com/image.ico " />
frankster
2
Lo más probable es que el sitio web no sea compatible con los navegadores desde el año 0, ¿por qué molestarse? Intente cargar un sitio web moderno en IE6 y vea qué sucede;)
Dominic
26

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 aparecerían al arrastrar un enlace al explorador de Windows, por ejemplo).

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

Álvaro González
fuente
Relacionado con esto está el hecho de que IE9 también usa esos íconos grandes para fijar a la barra de tareas de win7, consulte: stackoverflow.com/questions/3723715/…
GazB
Uhm, teórico? El mismo icono incluido con Windows 7 se puede usar en Windows 95 en modo de color de 8 bits. Creo que es bastante práctico, ¿no?
Christian
Tenga en cuenta que esta respuesta fue escrita en 2009. La escena del navegador en ese momento era muy diferente de lo que es ahora.
Álvaro González
15

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 iconos de varios tamaños, lo cual es útil para aplicaciones de escritorio, pero no demasiado para sitios web. Le recomendaría que coloque un favicon.ico en la raíz de su aplicación. Si tiene acceso al encabezado de las páginas de su sitio web, use la etiqueta para señalar 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 .

pmoleri
fuente
3
¿No tanto para los sitios web? Espere hasta que todos comiencen a usar pantallas tipo retina; De repente, habrá una muy buena razón por la que uno podría incluir un tamaño 32x32 o mayor en su favicon ...
Roman Starkov
1
Estamos hablando de favicons, por lo que el tema del apoyo es, de hecho, lo contrario de lo que usted dice
David Heffernan,
1
+1 Aborda la pregunta original y no se atasca en transparencia. También menciona una aplicación, que hace formato de la ayuda .ico.
kovacsbv
12

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

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

jdavid.net
fuente
1
No sé si es verdadero o falso, pero fue el argumento decisivo para mí ir y crear favicon.ico en la raíz, además de png que tengo.
Alexei Tenitski
2
Sé esto por mi trabajo en telly.com , -via paul lindner que está en el equipo de google plus. plus.google.com/117259934788907243749/about
jdavid.net
Colocar el favicon en la raíz es el estándar de facto , por lo que me adheriría a él por las razones mencionadas en esta respuesta.
Stijn de Witt
8

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 mapa de bits + alfa que todos asocian fuertemente con ico.

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

Cualquier png válido (todo incluido el encabezado) puede anteponerse con un encabezado ico de 6 bytes y un directorio de imagen de 16 bytes.
GIMP tiene soporte nativo. Simplemente exporte como ico y marque "Comprimido (PNG)".

Adria
fuente
3

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

aehlke
fuente
19
No hay razón por la que no pueda usar ambos: un ico en el árbol de directorios para IE6 y un PNG especificado a través de un <link>código de página para los navegadores modernos.
Amber
10
¿Por qué usarías ambos? Si te vas a molestar en hacer un ico, ¿qué beneficio tendría también usar un png? Seguramente es solo trabajo extra y código extra.
Mr_Chimp
@ Mr_Chimp porque png es un estándar abierto y más prospectivo? Es una línea adicional de marcado.
Wyatt8740
99
Hola @Orcra: creo que no te parecería tan divertido si hubieras estado leyendo esto ~ hace 8 años cuando escribí esta respuesta, y tuve que considerar cosas como IE6 :) StackOverflow permite editar respuestas, así que no dudes en actualizarlo tú mismo. algo relevante hoy
aehlke
3
@aehike tienes un punto justo, mi mal por no comprobar la marca de tiempo.
Orcra
0

Por lo que vale, hago esto:

    <!-- Favicon - Generic -->
    <link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
    <link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
    <link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
    <link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
    <link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
    <link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
    <link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
    <!-- Favicon - Android -->
    <link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
    <!-- Favicon - iOS -->
    <link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">

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

s3c
fuente