Cómo Hacer un Favicon para una Web: Tamaños Explicados

Aprender cómo hacer un favicon para una web es una de las tareas más pequeñas del diseño web y, al mismo tiempo, una de las más visibles. El favicon es ese pequeño icono que aparece en la pestaña del navegador junto a su título, en los marcadores, en las búsquedas móviles y en la pantalla de inicio cuando alguien guarda tu sitio. En la pestaña mide solo 16 píxeles, pero lleva tu identidad de marca a cada rincón de la experiencia web, y un favicon ausente o roto mina la confianza sin que te des cuenta.

La buena noticia es que crear un favicon es sencillo cuando sabes qué tamaños necesitas y cómo instalarlos. Sin Photoshop ni diseñador: basta un logotipo cuadrado, una herramienta online gratuita y unas líneas de HTML. Esta guía te acompaña paso a paso: qué es un favicon, los tamaños exactos que necesitas en 2026, cómo diseñarlo para que se lea bien en miniatura, cómo generar todos los tamaños de una vez y cómo instalarlo para que aparezca donde debe.

Qué es un favicon y por qué es importante

La palabra "favicon" viene de "favorites icon" (icono de favoritos). Hoy su función va mucho más allá de los primeros navegadores. Aparece en:

• Las pestañas del navegador: el icono de 16×16 junto a tu título, a menudo la única marca visible.
• Los marcadores: los usuarios buscan iconos, no texto, cuando quieren encontrar un sitio guardado.
• El historial y el autocompletado: los favicons destacan tus páginas entre las sugerencias.
• Los resultados de búsqueda en el móvil: Google muestra tu favicon junto a tu ficha en las búsquedas móviles.
• Las pantallas de inicio y las PWA: cuando alguien guarda tu sitio en la pantalla de inicio del teléfono, tu icono se convierte en la identidad de tu "app".

Un icono genérico de globo terráqueo o un marcador de imagen rota transmite que el sitio se hizo con prisas. Un favicon nítido transmite profesionalidad y ayuda a los usuarios a volver. Los navegadores solicitan /favicon.ico automáticamente, y si no existe, tus registros del servidor se llenan de errores 404.

Cómo hacer un favicon para una web: los tamaños que necesitas en 2026

No necesitas decenas de archivos: un conjunto moderno y completo es pequeño y predecible:

• favicon.ico (16×16 y 32×32): el formato clásico; un solo archivo ICO puede contener ambos tamaños. Los navegadores lo solicitan primero, y cubre pestañas y marcadores en todos los navegadores de escritorio.
• icon-32.png e icon-16.png (PNG opcionales): versiones PNG de los dos tamaños clásicos para referenciarlos de forma explícita en tu HTML.
• apple-touch-icon.png (180×180): el icono que iOS y iPadOS usan cuando alguien añade tu sitio a la pantalla de inicio. Este único tamaño basta para los dispositivos Apple.
• icon-192.png e icon-512.png: obligatorios si tu sitio es una Progressive Web App (PWA), referenciados en el manifiesto. El de 512×512 también se usa en la pantalla de instalación.
• icon.svg (favicon SVG): un icono vectorial compatible con los navegadores modernos (Chrome, Firefox y Edge). Un único SVG sustituye a todos los tamaños raster y se ve nítido a cualquier resolución.

Ese es el conjunto completo: un ICO para compatibilidad universal, un PNG de 180×180 para dispositivos Apple, PNG de 192 y 512 para PWA y, opcionalmente, un SVG para un escalado perfecto.

Cómo diseñar un favicon que se lea a 16 píxeles

Lo más difícil de un favicon no es el formato del archivo, sino el diseño. A 16×16 píxeles, el detalle desaparece: debe leerse al instante, como una señal de tráfico. Sigue estas reglas:

• Simplifica sin piedad. Usa una letra, un símbolo o una forma contundente: lo más distintivo de tu logo. Sin eslóganes, líneas finas ni degradados.
• Mantén un buen contraste. Tu icono aparece sobre la interfaz del navegador, clara u oscura. Una marca contundente sobre un fondo sólido (tu color de marca) se mantiene legible en ambos casos.
• Pruébalo a tamaño real. Aleja el zoom y mira tu diseño a 16×16 antes de publicarlo. Si no distingues qué es, simplifica más.
• Mantén la identidad de marca. Usa el color principal de tu marca y, si es posible, la primera letra de su nombre: reconocimiento instantáneo junto a tu título.
• Lienzo cuadrado, a sangre. Diseña sobre un cuadrado (al menos 512×512) con la marca ocupando el encuadre y un margen prudente.

Un error frecuente es exportar el logotipo completo de la web y reducirlo: el texto se convierte en una mancha gris. Diseña en su lugar una marca derivada: solo la parte icónica de tu logo, o una letra sobre el color de tu marca.

Cómo hacer un favicon para una web con un generador

Exportar a mano seis tamaños en tres formatos es tedioso y propenso a errores. Lo práctico es diseñar una imagen fuente de alta calidad y dejar que una herramienta produzca el conjunto completo. Un generador de favicon toma tu logotipo cuadrado y genera el ICO, los PNG y el SVG con las dimensiones correctas en segundos.

Veamos un ejemplo concreto. Supongamos que tu sitio es Panadería Azahar y tu logo es una pequeña flor de azahar sobre un cuadrado blanco:

1. Prepara la fuente. Exporta la marca como un PNG cuadrado de 512×512 (o mayor), partiendo de la mayor resolución disponible. Si tu logo no es cuadrado, recórtalo primero a un cuadrado limpio.
2. Súbelo al generador. Sube la imagen cuadrada al generador de favicon y previsualízala en pequeño: la flor debe seguir siendo reconocible.
3. Genera el conjunto. Descarga el paquete completo: favicon.ico (16+32), icon-180.png para Apple, icon-192.png e icon-512.png para el manifiesto PWA y, opcionalmente, un SVG.
4. Coloca los archivos. Guárdalos en la raíz de tu sitio (o en /icons/) y anota sus rutas.
5. Conecta el HTML (lo detallamos en la siguiente sección) y, si tienes una PWA, referencia los iconos 192/512 en tu manifest.json.
6. Pruébalo en vivo. Abre el sitio en una pestaña de escritorio, guárdalo en marcadores y añádelo a la pantalla de inicio del móvil. Recarga sin caché (Ctrl/Cmd+Mayús+R): los favicons se almacenan en caché de forma agresiva, así que una ventana privada te dará el resultado real.

Menos de diez minutos en total. La alternativa —exportar cada tamaño a mano desde un editor gráfico y escribir el marcado a mano— lleva mucho más tiempo e invita a errores como dimensiones que no coinciden.

Cómo instalar el favicon en tu sitio

Instalarlo significa añadir etiquetas <link> dentro del <head> de tu HTML para que los navegadores encuentren cada icono. Con los iconos en la raíz del sitio, el marcado sería así:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Algunas notas sobre este marcado:

• La línea del ICO con sizes="any" cubre a los navegadores antiguos que solicitan /favicon.ico automáticamente: conserva el archivo en esa ruta exacta.
• La línea del SVG va antes que la del PNG para que los navegadores modernos elijan la versión escalable; los navegadores antiguos ignoran un tipo que no entienden y pasan a la siguiente línea.
• apple-touch-icon no necesita el atributo sizes si publicas el único archivo de 180×180; iOS lo detecta automáticamente.
• Para una PWA, añade los iconos 192 y 512 al manifest.json en la sección "icons": es el manifiesto, no el <head>, lo que lee la pantalla de instalación.
• Configura cabeceras de caché largas en los archivos de iconos, pero renombra o versiona los archivos cuando rediseñes, o los visitantes habituales seguirán viendo el icono antiguo.

Si usas WordPress o Squarespace, sube la fuente de 512×512 en los ajustes de identidad del sitio: la plataforma escribe el marcado por ti.

Ya sabes cómo hacer un favicon para una web: diseña una marca sencilla y contundente que sobreviva a los 16 píxeles, genera los tamaños ICO, PNG y SVG de una sola vez e instálalos con unas pocas etiquetas <link>. Diez minutos que rinden cada vez que alguien mira sus pestañas o te encuentra en los resultados móviles.

Preguntas frecuentes

¿Cuál es el tamaño estándar de un favicon?

El estándar clásico es 16×16 píxeles, con 32×32 como complemento; ambos caben en un único favicon.ico. Para una cobertura moderna completa, añade un apple-touch-icon de 180×180, PNG de 192×192 y 512×512 para PWA y, opcionalmente, un favicon SVG.

¿Sigo necesitando favicon.ico en 2026?

Sí. Los navegadores siguen solicitando /favicon.ico automáticamente, y es el único formato que funciona garantizado en todas partes. Conserva un pequeño archivo ICO en la raíz de tu sitio junto a tus iconos PNG y SVG modernos.

¿Puedo usar un SVG como favicon?

Sí, en los navegadores modernos. Chrome, Firefox y Edge admiten favicons SVG, que se ven perfectamente nítidos a cualquier tamaño. Combina siempre el SVG con un PNG o ICO de reserva para los navegadores que aún no lo admiten.

¿Por qué no se muestra mi nuevo favicon?

Casi siempre es la caché: los navegadores la almacenan de forma agresiva. Recarga sin caché con Ctrl/Cmd+Mayús+R, pruébalo en una ventana privada y comprueba las rutas de tus etiquetas <link>. Si rediseñaste un icono existente, cambia el nombre del archivo.