Cómo hacer un favicon: guía de PNG a ICO

Un favicon es el pequeño icono en la pestaña del navegador, los marcadores y los resultados de búsqueda. Un favicon ausente o roto hace que un sitio parezca inacabado, y Google ahora muestra favicons junto a los resultados de búsqueda móvil, así que afecta directamente a los clics.

¿Por qué ICO y no simplemente PNG?

Los navegadores modernos aceptan favicons en PNG, pero el clásico favicon.ico sigue siendo la opción más segura: es lo que los navegadores solicitan por defecto en /favicon.ico, lo que esperan los navegadores antiguos y algunas herramientas, y el contenedor ICO puede guardar varias resoluciones en un solo archivo.

Crear un ICO a partir de tu logotipo

1. Prepara un PNG cuadrado de tu logotipo, idealmente de 256×256 o más, con transparencia.
2. Abre el conversor de PNG a ICO y súbelo.
3. Pulsa «Convertir»: el resultado es un ICO de 256×256 (comprimido con PNG, el formato moderno Vista+ que se reduce de tamaño sin perder calidad).
4. Coloca el archivo en la raíz de tu sitio como favicon.ico.

El HTML

Para una cobertura completa, añade a tu <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> (PNG de 180×180 para iOS)

Consejos de diseño

• Pruébalo a 16×16: los detalles finos desaparecen, ganan las formas simples y gruesas.
• Mantén el contraste tanto en temas claros como oscuros del navegador.
• La transparencia se ve mejor que un fondo blanco sólido.

¿Hacen falta realmente varios tamaños en un ICO?

Un único ICO de 256×256 comprimido con PNG basta para los navegadores modernos, que lo reducen limpiamente para la pestaña y la barra de marcadores. Incluir tamaños adicionales (16×16, 32×32, 48×48) en el mismo ICO ayuda sobre todo al software antiguo de Windows y a la barra de tareas del escritorio, donde un icono pequeño ajustado a mano se ve más nítido que uno reducido automáticamente. Si tu sitio es puramente web, el único archivo de 256×256 es la opción más simple e igual de eficaz.

Errores habituales con el favicon

• Olvidar el archivo por completo. Los navegadores solicitan /favicon.ico automáticamente incluso sin etiqueta link, así que un archivo ausente aparece como un 404 en los registros del servidor en cada carga de página.
• Usar un logotipo rectangular sin modificar. Un logotipo de texto ancho reducido a un favicon cuadrado suele volverse ilegible; recorta solo el símbolo o las iniciales en su lugar.
• Saltarse el apple-touch-icon. Sin él, guardar tu sitio en la pantalla de inicio de un iPhone recurre a una captura de la página en lugar de tu icono.