De PNG a favicon (ICO)
Armar un favicon.ico de varios tamaños a partir de un logotipo PNG o JPG
Sus archivos se quedan con usted. La conversión ocurre dentro del navegador; ningún archivo se sube a un servidor.
¿Le sirvió esta herramienta?
Gracias, su comentario llegó.
Cómo funciona
Elija su logotipo — idealmente un PNG cuadrado con fondo transparente —, tome el juego de tamaños y pulse Crear el ICO. Un logo.png de 512 por 512 se convierte, por ejemplo, en un único favicon.ico que lleva dentro tres versiones, de 16, 32 y 48 píxeles; el navegador toma después por su cuenta la de 16 para la pestaña y una mayor para los marcadores o la barra de tareas. Coloque ese archivo en la raíz de su sitio con el nombre favicon.ico y el trabajo está hecho. Una imagen que no es cuadrada no se recorta por los bordes: se conservan las proporciones, la imagen queda centrada y el área sobrante se deja transparente. La herramienta produce exactamente los tamaños del juego elegido y no añade ninguno más, y arma el archivo en su dispositivo: su logotipo no se sube a ningún servidor, cosa que importa cuando se trata de una identidad que todavía no se ha hecho pública.
Esta herramienta también se busca como crear favicon para web, convertir png a ico, png a ico, hacer el icono de una pagina web, favicon ico de varios tamanos.
¿Qué es favicon?
El favicon es el icono pequeño que aparece junto a su sitio en la pestaña del navegador, en los marcadores, en el historial y a veces en los resultados de búsqueda. Se muestra en tamaños que bajan hasta los 16 por 16 píxeles, así que tiene que ser sencillo, reconocible y pobre en detalles, porque un logotipo elaborado deja lisa y llanamente de leerse a esa escala. Ponerlo hace más que decorar: vuelve su pestaña localizable entre otras diez y evita que el navegador registre un error 404 por el icono que va a buscar solo en la raíz del sitio.
¿Qué es ICO?
El ICO es un formato contenedor de iconos que viene del mundo de Windows: un solo archivo guarda el mismo icono en varios tamaños a la vez, típicamente 16 por 16, 32 por 32 y 48 por 48. El navegador o el sistema operativo elige por su cuenta, dentro del archivo, el tamaño que necesita; así el icono se mantiene nítido en cada escala en lugar de remuestrearse a partir de una sola imagen. La dirección /favicon.ico en la raíz de un sitio es una de las convenciones más antiguas de la web, y una gran cantidad de sistemas todavía la consultan de forma automática, sin que ninguna etiqueta se lo pida.
¿Qué diferencia hay entre un favicon ICO y uno PNG?
Los navegadores actuales también aceptan un favicon PNG; la diferencia está en la cobertura. Un PNG lleva un solo tamaño, así que cada tamaño necesita su propio archivo y su propia etiqueta, mientras que un ICO los reúne en un archivo único que además satisface a los navegadores antiguos, a los rastreadores de los buscadores y a las muchas herramientas que consultan /favicon.ico por su cuenta, sin leer el código de la página. La instalación más sólida usa los dos: un favicon.ico de varios tamaños en la raíz, acompañado de un juego de PNG declarados para las páginas modernas. Esta herramienta produce la mitad ICO de ese arreglo en un solo paso.
Transparencia y calidad del original
Dentro del ICO se incrusta un PNG distinto para cada tamaño, de modo que la transparencia se conserva. Una fuente JPG, en cambio, no lleva ninguna información de transparencia: el icono aparece entonces como un cuadro relleno, y eso se nota sobre todo en los navegadores con tema oscuro, donde el fondo blanco del JPG forma una pastilla visible alrededor del logotipo.
Si el original es más pequeño que el tamaño mayor que eligió, se amplía, y ampliar no inventa detalle: el icono simplemente se ve borroso. Parta de una imagen de al menos 48 píxeles para el juego habitual y de al menos 64 para el juego amplio.
¿Qué juego de tamaños conviene?
El juego habitual le sirve a la mayoría de los sitios: los 16 píxeles se usan en la pestaña, los 32 en los marcadores y la barra de direcciones, y los 48 en los accesos directos de Windows.
Si quiere el menor peso posible en la página, con 16 + 32 basta. Si espera que la gente ancle el sitio en su escritorio, tome el juego amplio, que incluye además la versión de 64 píxeles. Los tres juegos producen el mismo archivo único; lo que cambia es la lista de tamaños que lleva dentro, y por tanto su peso.
- Sitio corriente → 16 + 32 + 48
- El archivo más ligero posible → 16 + 32
- Si importan los accesos directos del escritorio → 16 + 32 + 48 + 64
Diseñe para 16 píxeles, no para el cartel
Un icono se juzga en el tamaño en que se muestra, y ese suele ser un cuadro de 16 píxeles. Un logotipo hecho de palabras, un trazo fino o una ilustración detallada se convierten ahí en una mancha; una sola letra, una forma simple o una silueta rotunda sobreviven.
Mire el archivo descargado a su tamaño real antes de publicarlo. Si resulta ilegible a 16 píxeles, la corrección le toca al dibujo y no al juego de tamaños: ningún ajuste de esta herramienta vuelve legible un motivo demasiado cargado.
Preguntas frecuentes
¿Qué pasa si mi imagen no es cuadrada?
No se estira ni se recorta: se conservan las proporciones, la imagen queda centrada dentro de un área cuadrada y los bordes sobrantes se dejan transparentes.
¿Los navegadores actuales leen un ICO que lleva PNG dentro?
Sí. Incrustar datos PNG dentro de un ICO es compatible desde Windows Vista, y los navegadores y sistemas operativos actuales lo leen.
Ya uso un favicon SVG, ¿sigo necesitando el ICO?
Es recomendable. Muchos clientes y sistemas de marcadores piden directamente /favicon.ico, y esas peticiones devuelven un error 404 si no hay ningún ICO en la raíz del sitio.
¿De cuántos píxeles debe ser la imagen de partida?
Al menos del tamaño mayor que haya elegido: 48 píxeles para el juego habitual y 64 para el amplio. Un original más pequeño se amplía y se ve borroso.
¿Puedo obtener tamaños mayores, como 128 o 256 píxeles?
No: esta herramienta produce exactamente los tamaños de los tres juegos ofrecidos, hasta 64 píxeles. Los iconos grandes que piden las pantallas de los teléfonos se declaran aparte, en PNG, y no pasan por el favicon.ico.
¿Un logotipo grande pierde detalle a 16 píxeles?
Pasar de 512 a 16 píxeles es una reducción de 32 veces: un redimensionado tosco casi no lee los píxeles del original y solo queda una mancha. En los tamaños pequeños esta herramienta remuestrea conservando el detalle (método Lanczos): cada píxel del icono es el promedio ponderado de todos los píxeles del original que caen en ese punto. Aun así, una línea muy fina o un texto pequeño no sobrevive a 16 píxeles; mantenga el icono grueso y sencillo.