¿Basta con un solo archivo ICO?

Para pestañas en escritorio y móvil, suele bastar. Si publicas una PWA o te importan los iconos de inicio en iOS, añade también tamaños PNG y entradas en el manifiesto.

¿Puedo usar solo SVG como favicon?

Cada vez más sí en navegadores modernos — pero ICO y PNG juntos siguen cubriendo casos límite. SVG funciona bien como complemento, no siempre como único activo.

Actualicé el archivo pero la pestaña sigue con el icono viejo

Caché. Prueba incógnito, renombra el archivo o añade un query de versión al href hasta que el nuevo activo se fije.

¿El favicon es igual que el logo del header?

A menudo comparten colores de marca, pero el favicon debe ser una marca simplificada. El logo del header puede llevar eslóganes y detalle fino que el icono de pestaña no aguanta.

¿Qué tamaños necesito de verdad?

16, 32 y 48 dentro del ICO cubren la mayoría de pestañas; 180×180 para apple-touch-icon; añade 192 y 512 si tu manifiesto PWA los exige.

Cómo crear un favicon para tu sitio web

El favicon es el icono minúsculo de la pestaña del navegador — el marcador visual que la gente escanea con diez pestañas abiertas. Crearlo es sencillo: simplifica tu marca para que se lea a tamaño sello, exporta los tamaños estándar (a menudo en un solo `.ico`), enlaza las etiquetas HTML y añade un PNG más grande si te importan los accesos directos en iOS. Sigue los pasos de abajo y usa el generador de favicon para empaquetar tamaños sin editar binarios a mano.

1. Diseña para 16×16, no para un cartel

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 el escalado mucho mejor que una mini versión del wordmark completo.

Empieza cuadrado. Logos anchos necesitan recorte a cuadrado centrado primero — si no, el generador encoge todo el lienzo y tu marca queda como un punto.

Conserva un SVG vectorial o al menos un master PNG 256×256 (512×512 es mejor). Haces downsampling desde esa fuente, no upsampling desde una miniatura borrosa.

2. Exporta un ICO multi-tamaño (o un set PNG)

El clásico `favicon.ico` empaqueta capas 16×16, 32×32 y 48×48 en un 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 editar 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 archivos y añade 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. Verifica tras el 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 comprueba que el apple-touch-icon se vea nítido sin padding inesperado.

¿Rebranding? Sustituye ICO, PNG e iconos del manifiesto juntos. Mezclar activos viejos y nuevos es cómo los usuarios acaban con dos marcas distintas para el mismo sitio.

Trampas que te roban 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.

Favicons solo SVG ganan soporte pero aún fallan en silencio en algunas intranets corporativas; 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 de la marca suele leerse mejor.

Genera tu ICO ahora

Sube un logo cuadrado, descarga un favicon multi-tamaño del generador de favicon y pega las etiquetas HTML de la sección 3.

Abrir generador de favicon

Preguntas sobre favicon

¿Basta con un solo archivo ICO?: Para pestañas en escritorio y móvil, suele bastar. Si publicas una PWA o te importan los iconos de inicio en iOS, añade también tamaños PNG y entradas en el manifiesto.
¿Puedo usar solo SVG como favicon?: Cada vez más sí en navegadores modernos — pero ICO y PNG juntos siguen cubriendo casos límite. SVG funciona bien como complemento, no siempre como único activo.
Actualicé el archivo pero la pestaña sigue con el icono viejo: Caché. Prueba incógnito, renombra el archivo o añade un query de versión al href hasta que el nuevo activo se fije.
¿El favicon es igual que el logo del header?: A menudo comparten colores de marca, pero el favicon debe ser una marca simplificada. El logo del header puede llevar eslóganes y detalle fino que el icono de pestaña no aguanta.
¿Qué tamaños necesito de verdad?: 16, 32 y 48 dentro del ICO cubren la mayoría de pestañas; 180×180 para apple-touch-icon; añade 192 y 512 si tu manifiesto PWA los exige.