1. Diseña para 16×16, no para una valla publicitaria
A tamaño de barra de pestañas, trazos finos, tipografía pequeña y degradados cargados se convierten en papilla. Una silueta clara con uno o dos colores aguanta mucho mejor el escalado que una mini versión del wordmark completo.
Empieza en cuadrado. Los logos anchos necesitan recorte a cuadrado centrado primero: si no, el generador encoge todo el lienzo y la marca queda en un puntito.
Guarda un SVG vectorial o, como mínimo, un master PNG 256×256 (mejor 512×512). Reduces desde esa fuente; no amplías una miniatura borrosa.
2. Exporta un ICO con varios tamaños (o un set PNG)
El clásico `favicon.ico` mete capas 16×16, 32×32 y 48×48 en un solo archivo para que pestañas y marcadores elijan la más cercana.
Sube PNG, SVG o JPG al generador de favicon, elige un pack de tamaños y descarga — sin tocar hex a mano.
Muchos equipos también publican PNG sueltos a 32×32 y 180×180. Las PWA necesitan entradas de icono explícitas en el manifiesto web.
3. Coloca los archivos y añade el HTML
Deja `favicon.ico` en la raíz del sitio, o sigue la convención de tu framework: Next.js, Astro y otros lo esperan bajo `public/`.
Etiqueta mínima: `<link rel="icon" href="/favicon.ico" sizes="any">`. Si también tienes variantes PNG, añade algo como `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`.
Para «Añadir a pantalla de inicio» en iOS, incluye un PNG 180×180: `<link rel="apple-touch-icon" href="/apple-touch-icon.png">`.
4. Comprueba después del despliegue
Recarga forzada o ventana de incógnito: los favicons se cachean con fuerza, así que un reload normal puede seguir mostrando el icono de ayer.
En el móvil, añade el sitio a la pantalla de inicio y mira que el apple-touch-icon se vea nítido, sin padding raro.
¿Rebranding? Cambia ICO, PNG e iconos del manifiesto a la vez. Mezclar activos viejos y nuevos es cómo los usuarios acaban con dos marcas distintas para el mismo sitio.
Errores que te comen la tarde
Renombrar un PNG de 512 px a `favicon.ico` sin incrustar tamaños pequeños: algunos entornos escalan mal y el icono de pestaña se ve blando.
Los favicons solo SVG ganan soporte, pero en algunas intranets corporativas fallan en silencio; ICO más PNG sigue siendo el default fiable.
Iconos totalmente transparentes pueden verse rotos en pestañas de Windows con fondo claro: un cuadrado sólido del color de marca detrás del símbolo suele leerse mejor.
Genera tu ICO ahora
Sube un logo cuadrado, descarga un favicon multi-tamaño del [[favicon-generator|generador de favicon]] y pega las etiquetas HTML de la sección 3.
Abrir generador de favicon