Favicon: cómo crear el icono perfecto para tu sitio web

¿Qué es un favicon?

El favicon (contracción de ícono favorito) es este pequeño ícono que aparece en la pestaña de su navegador, justo al lado del título de la página. También es el ícono que aparece en tus favoritos, en el historial de navegación, en la pantalla de inicio de tu teléfono inteligente cuando agregas un sitio como acceso directo e incluso en los resultados de búsqueda de Google en dispositivos móviles.

Inventado por Microsoft en 1999 con Internet Explorer 5, el favicon era originalmente un simple archivo favicon.ico colocado en la raíz del sitio. Veintisiete años después, el concepto ha evolucionado considerablemente: ahora hablamos de un ecosistema de iconos disponibles en varios formatos y tamaños para cubrir todos los usos: navegadores de escritorio, dispositivos móviles, PWA (Progressive Web Apps) y motores de búsqueda.

A pesar de su pequeño tamaño (a menudo 16×16 o 32×32 píxeles), el favicon juega un papel desproporcionado en la percepción de un sitio web. A menudo es el primer elemento gráfico que un visitante ve de su marca, incluso antes del logotipo de gran formato en su página de inicio.

Por qué el favicon es más importante de lo que pensamos

Un sitio sin favicon es como una tienda sin marca. Funciona, pero inspira menos confianza. He aquí por qué este pequeño cuadrado de píxeles merece tu atención.

Reconocimiento inmediato en pestañas

La mayoría de los usuarios de Internet navegan con varias pestañas abiertas simultáneamente, a menudo 10, 15 o incluso 20. Cuando las pestañas se comprimen, el título de la página desaparece y solo el favicon permanece visible. Es lo que te permite encontrar tu sitio en la barra de pestañas de un vistazo. Sin un favicon, tu pestaña muestra un ícono de globo terráqueo genérico, indistinguible de los demás.

Credibilidad profesional

Un favicon personalizado es una señal de profesionalismo. Los visitantes no lo notan conscientemente cuando está allí, pero inmediatamente notan su ausencia. Un sitio sin favicon da la impresión de estar inacabado, de un proyecto amateur. Esto es especialmente cierto para sitios comerciales, tiendas en línea y sitios de servicios profesionales.

Presencia en favoritos e historial

Cuando un usuario agrega su sitio a sus favoritos (bookmarks), el favicon es el principal elemento visual que le permitirá encontrarlo. En una lista de 50 favoritos, se puede encontrar un buen favicon en un segundo. Un sitio sin favicon se pierde entre la multitud.

Icono de la pantalla de inicio en el móvil

En iOS y Android, los usuarios pueden agregar un sitio a su pantalla de inicio. El ícono que aparece se deriva del favicon (o del ícono Apple Touch / manifiesto de PWA). Si no has configurado nada, el sistema genera una fea miniatura de tu página, que no es exactamente la marca que esperabas.

Resultados de búsqueda de Google

Desde 2019, Google muestra favicons en los resultados de búsqueda en dispositivos móviles y, desde 2023, también en computadoras de escritorio. Un favicon distintivo en las SERP aumenta la visibilidad de su resultado y ayuda a mejorar la tasa de clics (CTR). Su sitio parece más profesional y confiable junto a los resultados que no tienen un favicon ni muestran un globo terráqueo genérico.

Formatos de Favicon en 2026: ICO, PNG, SVG

El panorama de los formatos de favicon ha evolucionado mucho. Esta es la situación en 2026.

ICO: el formato histórico, todavía útil

El formato ICO (icono de Windows) es el formato de favicon original. Su ventaja única: puede contener varios tamaños en un solo archivo (16×16, 32×32, 48×48…). Todos los navegadores lo admiten, incluido el más antiguo.

En 2026, el archivo favicon.ico seguirá recomendado en la raíz de su sitio como solución alternativa universal. Este es el archivo que los navegadores buscan de forma predeterminada cuando no se especifica ninguna etiqueta <link>.

Desventaja: el formato ICO no admite transparencia parcial tan bien como PNG, y los archivos pueden ser más grandes al integrar varias resoluciones.

PNG: el estándar moderno

El formato PNG es hoy en día el formato más utilizado para favicons. Ofrece una excelente calidad de imagen, perfecta transparencia y buena compresión. Todos los navegadores modernos admiten favicons PNG.

Google recomienda específicamente un favicon de al menos 48 × 48 píxeles en PNG para mostrarlo en los resultados de búsqueda. Los tamaños más comunes son 16×16, 32×32, 48×48 y 180×180 (para el icono táctil de Apple).

SVG: el futuro, ya presente

El formato SVG (Scalable Vector Graphics) es el formato más moderno para favicons. Su ventaja decisiva: al ser vectorial, se adapta a cualquier tamaño sin pérdida de calidad. Un único archivo SVG reemplaza potencialmente todas las versiones PNG.

Desde 2025, SVG es compatible con los principales navegadores: Chrome, Firefox, Edge y Safari. También es el único formato que le permite administrar de forma nativa el modo oscuro a través de @media (prefers-color-scheme: dark) directamente en el archivo SVG.

Atención: a pesar de la excelente compatibilidad del navegador, se recomienda proporcionar un archivo ICO alternativo para casos marginales (lectores de feeds RSS, determinadas aplicaciones de escritorio, navegadores integrados).

Las tallas imprescindibles

En 2026, estos son los tamaños de favicon que realmente necesitas proporcionar para cubrir todos los usos. No más listas de 20 tamaños diferentes: céntrate en lo esencial.

El kit mínimo recomendado

favicon.ico (32×32, incluso resolución múltiple 16+32+48): ubicado en la raíz del sitio, respaldo universal
favicon.svg: para navegadores modernos, con compatibilidad opcional con modo oscuro
apple-touch-icon.png (180×180) — para la pantalla de inicio de iOS
icon-192.png (192×192) — para el manifiesto de PWA (Android)
icon-512.png (512×512) — para la pantalla de presentación y las persianas de PWA

El código HTML correspondiente

En la sección <head> de su sitio, simplemente agregue estas pocas líneas:

<link rel="icon" href="/icon.svg" size="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon">
<link rel="manifest" href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest">

Y en tu archivo manifest.webmanifest:

{
  "iconos": [
    { "src": "/icon-192.png", "tipo": "imagen/png", "tamaños": "192x192" },
    { "src": "/icon-512.png", "tipo": "imagen/png", "tamaños": "512x512" }
  ]
}

Esta configuración cubre casi todos los casos de uso en 2026: escritorio, navegadores móviles, PWA, resultados de Google, favoritos y pantallas de inicio.

¿Aún necesitamos proporcionar 16×16 por separado?

No, salvo casos muy concretos. El navegador reducirá automáticamente un archivo ICO de 32x32 a 16x16 si es necesario. Y si proporciona un SVG, el navegador se encarga de ello de forma nativa. La multiplicación de tamaños PNG intermedios (24×24, 48×48, 64×64, etc.) es en gran medida inútil en 2026.

Cómo crear tu favicon paso a paso

1. Empezando por su logo

El favicon debe ser una versión simplificada y reconocible de su logotipo. Si su logotipo es una palabra completa (logotipo), probablemente no será legible en 16x16 píxeles. En este caso utiliza la inicial, un monograma o un elemento gráfico distintivo de tu identidad visual.

Algunos ejemplos concretos:

Facebook utiliza la “f” minúscula en su logotipo
Google utiliza la “G” mayúscula multicolor
Twitter/X usa el símbolo
Spotify utiliza los tres arcos de su icono

Si aún no tienes un logotipo, ahora es el momento de crear uno. Un favicon coherente con su logotipo refuerza el reconocimiento de su marca en todos los puntos de contacto. Wilogo puede ayudarte a crear tu logotipo y el favicon que lo acompaña.

2. Simplifica lo máximo posible

Un favicon no es una obra de arte en miniatura. Es un símbolo de reconocimiento. Detalles finos, degradados sutiles, textos largos: todo eso desaparece en 16 píxeles de lado. Los mejores favicons son los de formas simples, con colores contrastantes y una silueta inmediatamente identificable.

Prueba tu favicon en su tamaño real. Muéstralo en 16x16 en tu pantalla. Si ya no reconoces tu marca, es demasiado compleja.

3. Elegir los colores correctos

Utiliza los colores principales de tu carta gráfica. Favorece los contrastes fuertes: el favicon aparece sobre fondos variados (barra de pestañas clara u oscura, fondo blanco o de color en favoritos). Un favicon que desaparece sobre un fondo blanco o se vuelve ilegible en modo oscuro es un problema común.

Para obtener más información sobre cómo elegir colores para su identidad visual, consulte nuestra guía completa de colores de logotipo.

4. Crea los archivos

Puedes crear tu favicon con cualquier software de diseño (Figma, Illustrator, Photoshop, Inkscape) exportándolo a los formatos necesarios. Pero lo más sencillo suele ser utilizar un generador en línea (consulte la sección de herramientas a continuación) que produce automáticamente todas las variaciones a partir de una única imagen de origen.

Para obtener resultados óptimos, comience con una imagen de origen de al menos 512 × 512 píxeles, cuadrada y con un fondo transparente si es posible. El formato ideal para la imagen de origen es SVG: se cambiará de tamaño sin pérdida.

5. Implementar en su sitio

Coloque los archivos en la raíz de su sitio (o en una carpeta dedicada) y agregue las etiquetas <link> en el <head> de cada página. Si utiliza un CMS como WordPress, Wix o Squarespace, la mayoría ofrece una opción de "favicon" o "icono de sitio" en la configuración de apariencia.

Las mejores herramientas para generar un favicon

No es necesario hacer todo a mano. Estas son las herramientas más confiables para crear y optimizar tu favicon en 2026.

RealFaviconGenerator.net

Ha sido la referencia durante años. Subes tu imagen (PNG, SVG o JPG) y la herramienta genera automáticamente todas las variaciones necesarias: ICO, PNG de varios tamaños, Apple Touch Icon, manifiesto PWA, además del código HTML para copiar y pegar. También ofrece una descripción general de diferentes navegadores y sistemas operativos.

Favicon.io

Una herramienta gratuita que te permite crear un favicon a partir de una imagen, texto (eligiendo la fuente y los colores) o un emoji. Muy práctico para crear rápidamente un prototipo de un favicon basado en una inicial. La exportación incluye formatos ICO, PNG y manifiesto.

Figma/Ilustrador/Inkscape

Si desea un control total sobre el diseño, utilice software vectorial. Cree su favicon en SVG, exporte a PNG en los tamaños necesarios y utilice un convertidor en línea para generar el archivo ICO. La ventaja de este enfoque: mantienes los archivos fuente editables en tu proyecto de diseño.

Generadores integrados en CMS

WordPress (a través de complementos como Flavor o configuraciones nativas desde WP 4.3), Shopify, Wix, Squarespace: todos los CMS modernos le permiten configurar un favicon directamente desde la interfaz de administración. La desventaja: no siempre generan todas las variaciones recomendadas.

Favicon y SEO: ¿qué impacto real?

¿Es el favicon un factor de clasificación SEO? La respuesta corta: no, no directamente. Google no utiliza el favicon como señal de clasificación en su algoritmo. Pero su impacto indirecto es muy real.

Mostrar en SERP

Dado que Google muestra favicons en los resultados de búsqueda (móviles desde 2019, computadoras de escritorio desde 2023), un favicon distintivo puede mejorar la tasa de clics (CTR) de sus resultados. Un sitio con un favicon profesional y reconocible llama más la atención que un resultado con el ícono genérico del globo terráqueo.

Google tiene requisitos técnicos específicos para mostrar el favicon en las SERP:

El favicon debe tener al menos 48×48 píxeles (se prefieren múltiplos de 48)
Debe ser cuadrado (proporción 1:1)
Debe ser visible y legible en tamaño pequeño
La URL del favicon debe ser accesible para el robot de Google (sin bloqueo mediante robots.txt)
El favicon debe estar alojado en el mismo dominio que el sitio
El contenido debe representar visualmente la marca del sitio

Si tu favicon no cumple con estos criterios, Google simplemente no lo mostrará, lo que te priva de una ventaja visual en los resultados.

Confianza y comportamiento del usuario

Un sitio profesional inspira confianza. La confianza promueve los clics, el tiempo pasado en el sitio, las visitas a la página: todas señales que Google interpreta de manera positiva. El favicon forma parte de esta impresión general de calidad. Es una señal débil individualmente, pero se suma a todas las demás señales de profesionalismo en su sitio.

Rendimiento web

Un favicon mal optimizado (demasiado pesado, demasiadas solicitudes HTTP) puede afectar marginalmente el rendimiento de su sitio. Un favicon bien configurado no es un problema: los archivos tienen un tamaño de unos pocos kilobytes y el navegador los almacena en caché. Pero un sitio que genera errores 404 en /favicon.ico porque el archivo no existe contamina los registros del servidor y desperdicia solicitudes.

Errores frecuentes a evitar

Estos son los errores que encontramos con más frecuencia, incluso en sitios que por lo demás están bien diseñados.

1. Sin favicon en absoluto

Es más común de lo que piensas, especialmente en sitios recién lanzados. El navegador muestra un ícono de globo terráqueo, los registros del servidor se llenan con errores 404 en /favicon.ico y el sitio pierde credibilidad. Incluso un favicon temporal basado en la inicial de tu marca es mejor que nada.

2. Utilice su logotipo completo, no simplificado

Un logotipo horizontal con el nombre completo de la marca escrito en su totalidad nunca funcionará en 16x16 píxeles. Esta es la fuente número uno de favicons ilegibles. Extrae el elemento más distintivo de tu logo (símbolo, inicial, monograma) y úsalo solo.

3. Olvídate del icono táctil de Apple

Sin el archivo apple-touch-icon.png (180x180), los usuarios de iOS que agreguen su sitio a su pantalla de inicio verán una captura de pantalla reducida de su página en lugar de un ícono limpio. Es una pena que la solución sea tan sencilla.

4. Saltar modo oscuro

Si su favicon es oscuro (negro, azul marino, etc.) y el usuario está en modo oscuro, el ícono puede volverse invisible en la pestaña. La solución: utilice un favicon SVG con una consulta de medios para el modo oscuro o elija colores que funcionen tanto en fondos claros como oscuros.

5. Descuidar el manifiesto de PWA

Si su sitio es una aplicación web o si planea convertirse en uno, el archivo manifest.webmanifest con los íconos de 192×192 y 512×512 es esencial. Sin él, la instalación en la pantalla de inicio de Android no funcionará correctamente.

6. El robot de Google no puede acceder al favicon

Compruebe que su archivo robots.txt no prohíba el acceso a la carpeta que contiene sus favicons. Google debe poder rastrear la URL del favicon para mostrarla en los resultados de búsqueda. Este es un error técnico estúpido, pero ocurre a menudo durante las migraciones de sitios.

Buenas prácticas y checklist final

Aquí está tu lista de verificación para un favicon perfecto en 2026:

✓ Un favicon.ico (mínimo 32×32) en la raíz del sitio
✓ Un favicon.svg con soporte opcional para modo oscuro
✓ Un apple-touch-icon.png (180×180) para iOS
✓ Un manifest.webmanifest con iconos de 192×192 y 512×512
✓ Las etiquetas <link> correctas en <head>
✓ Favicon visible sobre fondo claro Y sobre fondo oscuro
✓ Favicon reconocible y coherente con el logotipo vectorial de la marca
✓ Sin bloqueo en robots.txt
✓ Pruebe en dispositivos móviles, computadoras de escritorio y en los resultados de Google

El favicon es un pequeño detalle que dice mucho sobre la seriedad de tu sitio. Al igual que el diseño minimalista, es el arte de transmitir la máxima información en un mínimo de espacio.

Crea tu logotipo y favicon con Wilogo →

Preguntas frecuentes

¿Cuál es el tamaño ideal para un favicon en 2026?

El kit mínimo recomendado incluye: un favicon.ico de 32×32 píxeles en la raíz del sitio, un favicon SVG para navegadores modernos, un Apple Touch Icon de 180×180 píxeles para iOS e iconos PNG de 192×192 y 512×512 para iOS. Manifiesto de la PWA. Google requiere un mínimo de 48x48 píxeles para mostrarse en los resultados de búsqueda.

¿El favicon tiene un impacto en el SEO?

El favicon no es un factor de clasificación directo en el algoritmo de Google. Sin embargo, se muestra en los resultados de búsqueda (escritorio y móvil), lo que puede mejorar la tasa de clics (CTR). Un favicon profesional también contribuye a la impresión general de credibilidad de un sitio, lo que influye indirectamente en el comportamiento del usuario.

¿Cómo crear un favicon gratis?

Existen varias herramientas gratuitas: RealFaviconGenerator.net es la referencia para generar todas las variaciones a partir de una imagen. Favicon.io te permite crear un favicon a partir de texto, una imagen o un emoji. Para un control total, utilice software vectorial gratuito como Inkscape o Figma (gratuito para proyectos personales).

¿Podemos usar un favicon SVG en 2026?

Sí. Para 2026, todos los principales navegadores (Chrome, Firefox, Edge, Safari) admitirán favicons SVG. SVG tiene la ventaja de ser perfectamente nítido en todos los tamaños y admitir el modo oscuro a través de consultas de medios CSS. Sin embargo, se recomienda mantener un archivo favicon.ico como respaldo para casos extremos.

¿Necesitas un favicon diferente a tu logotipo?

El favicon debe ser coherente con su logotipo, pero no necesariamente idéntico. Si tu logo es complejo o contiene texto, debes simplificarlo para el favicon: usa la inicial, un monograma o el elemento gráfico más distintivo. El objetivo es que el favicon siga siendo reconocible en 16×16 píxeles.