Introducción
Llevas semanas con la web lanzada, el diseño está pulido y el logo se ve genial en la cabecera, pero la pestaña del navegador sigue mostrando un icono de globo genérico en lugar de tu marca. Ese pequeño icono es el favicon y, aunque parezca irrelevante, refuerza el reconocimiento de marca y da pulido profesional a tu sitio. Crear uno no es complicado si sabes qué tamaños necesitas y qué formatos usar. En esta guía te explicamos paso a paso cómo crear un favicon personalizado en ICO y PNG desde un logo existente y cómo instalarlo en tu web para que aparezca en todos los navegadores y dispositivos.
Por qué ocurre esto
El favicon es un pequeño icono que el navegador muestra en la pestaña, en los marcadores y en la pantalla de inicio del móvil cuando alguien añade tu web como acceso directo. Para que aparezca de forma fiable necesitas dos cosas: un archivo ICO en la raíz del sitio para compatibilidad con navegadores antiguos y Windows, y un conjunto de archivos PNG en distintos tamaños para iOS, Android y navegadores modernos. Si solo subes un PNG y lo enlazas en el HTML, los navegadores modernos lo mostrarán, pero Internet Explorer y algunos contextos de Windows se quedarán con el icono por defecto. Si solo subes un ICO, los dispositivos móviles no tendrán un icono de alta resolución para la pantalla de inicio. Por eso lo correcto es publicar ambos y enlazarlos correctamente en el head del HTML.
3 soluciones
Solución 1: Generar favicon online desde un PNG. El conversor de piczen de png a ico toma tu logo en PNG y genera un ICO con múltiples tamaños embebidos en segundos. Es la opción más rápida para la mayoría de webs. Solo necesitas un PNG cuadrado de 512x512 píxeles y la herramienta se encarga del resto. Después puedes añadir manualmente los PNG adicionales para iOS y Android si tu web lo necesita.
Solución 2: Usar un generador completo como RealFaviconGenerator. Sube tu PNG y la web produce un paquete completo con ICO, PNG para distintos tamaños, iconos Apple touch, manifest para Android y el código HTML listo para pegar en tu head. Es la opción ideal si quieres cobertura multiplataforma total sin preocuparte por los detalles.
Solución 3: Crear el favicon manualmente en Photoshop o GIMP. Si quieres control total sobre cada tamaño, abre tu logo en el editor, redimensiona a 16x16, 32x32, 48x48 y 256x256, optimiza cada versión para que se vea nítida y exporta como ICO con un plugin. Es la opción más lenta pero da máxima calidad en cada tamaño, útil para logos muy detallados que pierden legibilidad al reducir.
Guía paso a paso
Empieza con un PNG cuadrado de tu logo a 512x512 píxeles. Si no es cuadrado, recórtalo primero. Abre el conversor de png a ico en tu navegador. Arrastra tu PNG a la página. La herramienta permite elegir qué tamaños embeber en el ICO: marca 16x16, 32x32, 48x48 y 256x256 para cobertura completa. Pulsa Convertir y descarga el archivo favicon.ico. Sube el archivo a la raíz de tu web. A continuación, crea también versiones PNG en 180x180 para Apple touch icon y 192x192 y 512x512 para Android. Añade las siguientes etiquetas dentro del head de tu HTML: link rel="icon" href="/favicon.ico" type="image/x-icon", link rel="apple-touch-icon" href="/apple-touch-icon.png" y link rel="manifest" href="/site.webmanifest" si quieres soporte Android completo. Borra la caché del navegador o refresca con fuerza y tu logo debería aparecer en la pestaña. Prueba en varios navegadores y dispositivos para confirmar que se ve nítido en todos.
Ventajas y desventajas
Un favicon personalizado refuerza la marca, da pulido profesional y mejora el reconocimiento cuando alguien tiene tu web en marcadores o en la pantalla de inicio del móvil. Publicar ICO y PNG te da cobertura en todos los navegadores y dispositivos, desde Internet Explorer hasta el último iPhone. La contrapartida es el trabajo de mantener varios archivos y enlazarlos correctamente en el HTML, aunque con un generador online es cuestión de minutos. Otra desventaja menor es que los logos muy detallados pierden legibilidad a 16x16 píxeles, así que a veces hace falta simplificar el logo para el tamaño más pequeño. Para webs serias, el esfuerzo merece la pena: el favicon es lo primero que ven los usuarios en la pestaña y un icono genérico resta profesionalidad. Para blogs personales o proyectos pequeños, un único PNG de 32x32 bien enlazado puede ser suficiente como punto de partida.