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.
Espacio publicitario: activa los anuncios en public/ads.js · article-mid

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.