Introducción
Acabas de lanzar una web nueva, has diseñado un logo limpio en PNG y todo se ve genial hasta que te fijas en que la pestaña del navegador muestra un icono de globo genérico en lugar de tu logo. Ese pequeño icono se llama favicon y, para que se vea de forma fiable en todos los navegadores, viejos y modernos, necesitas un archivo ICO. El PNG funciona en navegadores modernos, pero el ICO sigue siendo la opción más segura para compatibilidad total. En esta guía te contamos por qué ICO sigue siendo relevante, cómo convertir png a ico gratis online y qué tamaños necesitas dentro de ese archivo ICO para verse nítido en cualquier sitio.
Por qué ocurre esto
ICO es un formato de imagen legado desarrollado por Microsoft en los años 80 para los iconos de Windows. A pesar de su edad, sigue siendo el formato de favicon con mayor soporte universal. Navegadores como Chrome, Firefox, Safari y Edge leen favicons ICO, y también lo hacen navegadores antiguos como Internet Explorer. El truco del ICO es que un solo archivo puede contener varios tamaños de la misma imagen, normalmente 16x16, 32x32, 48x48 y 256x256 píxeles. Cuando el navegador necesita el favicon para una pestaña, coge el de 16x16. Cuando Windows necesita un icono de escritorio, coge los tamaños más grandes. Si solo embebes un tamaño, tu favicon se ve borroso o pixelado en ciertos contextos. Un archivo ICO adecuado empaqueta todos los tamaños juntos para que el navegador elija el correcto automáticamente.
3 soluciones
Solución 1: Usar un conversor online de PNG a ICO. El conversor de piczen de png a ico toma tu logo PNG, embebe varios tamaños en un archivo ICO y te permite descargarlo gratis. Sin instalación. Es la ruta más rápida para la mayoría de propietarios de webs porque gestiona el embebido de tamaños automáticamente, funciona en cualquier dispositivo con navegador y produce un archivo ICO compatible con todos los navegadores, de Chrome a Internet Explorer. También puedes convertir varios logos en un solo lote si gestionas varios sitios.
Solución 2: Generar favicons con RealFaviconGenerator. Sube tu PNG y produce un ICO más iconos PNG, iconos Apple touch y archivos manifest para cada plataforma. Genial para soporte multiplataforma completo, ya que también genera las etiquetas HTML que debes añadir a la cabecera de tu sitio. Es la mejor opción si quieres cobertura integral en iOS, Android, Windows y navegadores antiguos.
Solución 3: Convertir en Photoshop o GIMP. Ambos pueden exportar ICO con el plugin adecuado. Lo mejor si ya tienes el software abierto y quieres control total sobre cada tamaño, ya que puedes optimizar manualmente la versión de 16x16 para máxima legibilidad en tamaños minúsculos. El inconveniente es que los plugins de ICO no siempre son fiables y montar el flujo lleva tiempo si solo necesitas un favicon.
Guía paso a paso
Empieza con un PNG cuadrado de tu logo, idealmente de 512x512 píxeles para que el conversor tenga mucha resolución con la que trabajar. Si tu logo no es cuadrado, recórtalo primero con cualquier editor, ya que las imágenes no cuadradas producen favicons distorsionados. Abre el conversor de png a ico en tu navegador. Arrastra tu PNG a la página. La mayoría de herramientas te permiten elegir qué tamaños embeber, el conjunto estándar es 16, 32, 48 y 256 píxeles. Pulsa Convertir y descarga el archivo ICO resultante. Llámalo favicon.ico y súbelo a la raíz de tu web. Añade una etiqueta link en el head de tu HTML apuntando a él, tipo link rel="icon" href="/favicon.ico" type="image/x-icon". Borra la caché del navegador o refresca con fuerza y tu logo debería aparecer en la pestaña. Para mejores resultados, añade también una versión PNG de 180x180 para iconos Apple touch y una de 192x192 para Android, ya que los dispositivos modernos esperan estos tamaños adicionales para accesos directos en la pantalla de inicio.
Ventajas y desventajas
Un favicon ICO te da soporte universal de navegador, incluidas versiones antiguas que ignoran los favicons PNG. Empaquetar varios tamaños en un solo archivo significa que el navegador siempre elige la versión más nítida para el contexto, ya sea un icono de pestaña de 16x16 o un acceso directo de escritorio de 256x256. La contrapartida es que ICO es un formato antiguo con soporte de herramientas limitado. La mayoría de editores de imagen modernos no pueden abrir ni editar archivos ICO directamente, por eso un conversor online resulta tan útil. Para webs nuevas, la mejor práctica es publicar tanto un ICO para soporte legado como iconos PNG para dispositivos modernos, dándote la cobertura más amplia posible en todos los navegadores y sistemas operativos. El proceso entero lleva unos 10 minutos y se nota cada vez que alguien visita tu sitio, ya que un favicon profesional refuerza el reconocimiento de marca y da pulido a tu web.