Qué es un Favicon: Guía Completa

Seguro que lo has visto mil veces. Abres el navegador, empiezas a acumular pestañas y, de repente, cada una tiene un pequeño icono a la izquierda del título. Ese diminuto logo es el favicon. Y aunque parezca una chorrada, te aseguro que es uno de los detalles más importantes y a menudo olvidados de una web profesional. Llevo más de 10 años auditando webs de todos los tamaños, desde pymes en Chamberí hasta e-commerce nacionales, y te sorprendería la cantidad de proyectos que descuidan este pequeño pero matón elemento de branding. Un buen favicon no solo hace que tu web sea reconocible al instante, sino que transmite profesionalidad y confianza. En esta guía te voy a contar, sin tecnicismos y al grano, todo lo que necesitas saber para clavar tu favicon.

Lo que aprenderás en este artículo:

• Por qué un favicon es tu mejor aliado para el branding (y cómo impacta en la percepción de tus usuarios y en Google).
• La guía exacta de formatos y tamaños para que se vea perfecto en todos los dispositivos, desde un PC hasta un iPhone.
• Mi método paso a paso para crear un favicon profesional gratis y en menos de 5 minutos, aunque no seas diseñador.
• El código y los plugins para añadirlo a tu web sin romper nada, explicado para humanos (especialmente si usas WordPress).

¿Qué demonios es un favicon y por qué debería importarte?

Vamos a lo básico. Un favicon (abreviatura de «favorite icon») es ese pequeño icono, normalmente de 16×16 o 32×32 píxeles, que representa a tu sitio web. Es, en esencia, la cara de tu marca en el navegador. Piensa en el icono de Gmail, la «F» de Facebook o el pajarito de Twitter. Los reconoces al instante, ¿verdad? Pues esa es la magia.

Pero su función va mucho más allá de ser un simple adorno. Ojo, que aquí es donde muchos se pierden.

Más que un simple icono: tu marca en miniatura

El favicon es un punto de anclaje visual para el usuario. Aparece en múltiples sitios, y cada uno de ellos es una oportunidad para reforzar tu marca:

• Pestañas del navegador: Es su ubicación más famosa. Ayuda a los usuarios a localizar tu página rápidamente cuando tienen 15 pestañas abiertas (todos lo hacemos).
• Marcadores o favoritos: Cuando alguien guarda tu web, el favicon aparece junto al nombre, haciendo que sea más fácil de encontrar en su lista.
• Historial de navegación: Similar a los marcadores, facilita la identificación visual de tu sitio.
• Resultados de búsqueda de Google: Desde hace un tiempo, Google muestra los favicons en los resultados de búsqueda en móviles (y a veces en escritorio). Un favicon nítido y profesional puede mejorar tu tasa de clics (CTR) porque destaca y transmite confianza.

En mi experiencia, un sitio sin favicon o con uno genérico (como el del hosting o la plantilla) grita «amateur». Es un pequeño detalle que, sumado a otros, construye la credibilidad de tu proyecto.

El impacto real en la experiencia de usuario (UX)

La usabilidad y la experiencia de usuario (UX) son claves para el SEO. Aunque un favicon no es un factor de ranking directo, sí que mejora la UX. Un usuario que puede navegar fácilmente entre tus pestañas y las de la competencia, o que encuentra tu web sin esfuerzo en sus favoritos, es un usuario más feliz. Y un usuario feliz es más propenso a volver, a permanecer más tiempo y, en última instancia, a convertir. Es una de esas pequeñas victorias que, acumuladas, marcan una gran diferencia.

Formatos y tamaños del favicon: la guía definitiva para no liarla

Aquí es donde empieza el lío técnico para muchos, pero te lo voy a simplificar. No necesitas 50 versiones del icono, pero sí entender las opciones principales para elegir bien. La verdad es que con tener los formatos clave bien configurados, tienes el 99% del trabajo hecho.

ICO vs PNG vs SVG: ¿cuál elijo?

La eterna pregunta. Cada formato tiene su propósito y, aunque el mundo se mueve hacia lo moderno, a veces lo clásico sigue siendo necesario. Te he preparado una tabla para que lo veas clarísimo.

Formato	Mejor para…	Compatibilidad	Mi recomendación
.ico	Máxima compatibilidad con navegadores antiguos.	⭐⭐⭐⭐⭐ (Universal)	Es el formato tradicional. Aunque los navegadores modernos soportan otros, sigue siendo una buena práctica tener un favicon.ico en la raíz de tu web por si acaso.
.png	El estándar actual. Buena calidad, soporta transparencias y es ligero.	⭐⭐⭐⭐⭐ (Todos los navegadores modernos)	La opción más segura y versátil para la mayoría de webs actualmente. Fácil de crear y con una calidad excelente.
.svg	El futuro. Gráficos vectoriales que escalan a cualquier tamaño sin perder calidad.	⭐⭐⭐⭐ (Navegadores modernos, pero no todos)	Si quieres estar a la última, es brutal. Es súper ligero y se ve perfecto siempre. Ideal si tu logo es simple. combínalo con un PNG como fallback.

Mi consejo de consultor: Usa un PNG como tu opción principal y, si puedes, genera también un SVG para los navegadores más modernos. No te compliques la vida más allá de esto.

La chuleta de tamaños que siempre tengo a mano

No necesitas mil tamaños, pero sí los más importantes para cubrir todos los dispositivos. Apunta estos:

• 32×32 píxeles: El tamaño estándar para la mayoría de navegadores de escritorio. Si solo puedes elegir uno, que sea este.
• 16×16 píxeles: Un tamaño más pequeño, a veces usado en la barra de marcadores.
• 180×180 píxeles: Este es el apple-touch-icon. Es el que usan los dispositivos iOS (iPhone, iPad) cuando un usuario guarda tu web en su pantalla de inicio. Ojo, este es clave.
• 192×192 píxeles: Para dispositivos Android y aplicaciones web progresivas (PWA).

Cómo crear un favicon paso a paso (y gratis)

No tienes que ser un crack de Photoshop para tener un favicon profesional. Te doy dos caminos, uno para vagos y otro para perfeccionistas.

Opción 1: Con un generador online (lo más rápido)

Esta es la vía que recomiendo al 80% de mis clientes. Es rápida, fácil y los resultados son más que decentes. Mi herramienta favorita es RealFaviconGenerator.net. Es una maravilla.

1. Prepara tu logo: Ten una versión de tu logo en alta calidad, preferiblemente cuadrada y en formato PNG o SVG.
2. Sube la imagen: Ve a la web de RealFaviconGenerator y sube tu logo.
3. Configura y optimiza: La herramienta te permitirá ajustar cómo se ve el icono en diferentes fondos (iOS, Android, etc.). Juega con los ajustes hasta que quede perfecto.
4. Descarga el pack: Te dará un archivo ZIP con todas las imágenes en los tamaños correctos y el código HTML que necesitas pegar en tu web. Brutal.

Opción 2: Diseñándolo tú mismo con cabeza

Si prefieres hacerlo tú, ten en cuenta estos consejos de diseño:

• Simplicidad es la clave: A 32 píxeles no hay espacio para detalles complejos ni texto. Usa la inicial de tu marca, un isotipo o una versión súper simplificada de tu logo.
• Alto contraste: Asegúrate de que se distingue bien sobre fondos claros y oscuros, ya que los navegadores tienen modos día/noche.
• Evita el espacio en blanco excesivo: El icono debe ocupar la mayor parte del lienzo para que sea visible.

Cómo añadir el favicon a tu web: el código que necesitas

Ya tienes los archivos, ahora toca ponerlos en tu web. Hay dos formas principales.

El método universal: el código HTML

Esta es la forma «correcta» y la que te da más control. El código que te genera una herramienta como RealFaviconGenerator debes pegarlo en la sección <head> de tu HTML. Suele ser algo así:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

Luego, subes los archivos de imagen a la carpeta raíz de tu servidor web vía FTP. Fácil si tienes conocimientos técnicos, un infierno si no.

La forma fácil en WordPress

Gracias a dios, en WordPress esto es mucho más sencillo. Desde hace ya varias versiones, puedes hacerlo directamente desde el personalizador.

1. Ve a tu panel de WordPress.
2. Navega a Apariencia > Personalizar.
3. Busca la sección Identidad del sitio.
4. Verás una opción llamada «Icono del sitio». Sube ahí una imagen cuadrada de al menos 512×512 píxeles.
5. WordPress se encargará de generar y enlazar los tamaños necesarios automáticamente. ¡Y listo!

Errores comunes con el favicon que veo cada día

Para terminar, te dejo una lista de los fallos que más me encuentro en auditorías SEO. Evítalos a toda costa:

• No tener favicon: El error más grave. Da una imagen muy poco profesional.
• Usar el favicon por defecto: El icono genérico de tu plantilla de WordPress o de tu proveedor de hosting. Es casi peor que no tenerlo.
• Un favicon ilegible: Intentar meter tu logo completo en 16 píxeles. El resultado es una mancha borrosa. Simplifica.
• Calidad pésima: Usar una imagen de baja resolución que se ve pixelada.
• Rutas rotas: Poner el código HTML pero subir los archivos a la carpeta equivocada, por lo que el navegador no los encuentra (error 404).

Para terminar: el pequeño detalle que marca la diferencia

Lo que debes llevarte claro de todo esto es que el favicon, aunque pequeño, tiene un gran impacto. Es un elemento fundamental de tu identidad visual, mejora la experiencia de usuario y aporta un toque de profesionalidad que te diferencia de la competencia. No es negociable, es una tarea obligatoria en el checklist de cualquier web que se precie.

Así que mi consejo final es simple: para de leer y ve a revisar tu web ahora mismo. ¿Tienes un favicon? ¿Se ve nítido y profesional en todos los sitios? Si la respuesta es no, ya sabes lo que tienes que hacer. Es una de esas optimizaciones de 5 minutos que te darán beneficios durante años.

Dudas que siempre me preguntan sobre los favicons

¿El favicon ayuda directamente al SEO?

No, un favicon no es un factor de ranking directo. Google no va a posicionarte mejor solo por tenerlo. Sin embargo, como te he contado, impacta indirectamente en métricas que sí son importantes para el SEO, como la experiencia de usuario (UX) y la tasa de clics (CTR) en los resultados de búsqueda. Un buen favicon genera confianza y reconocimiento, y eso siempre es bueno para el negocio.

He cambiado mi favicon pero sigue apareciendo el antiguo, ¿por qué?

Esto es súper común y suele ser por la caché. Tu navegador guarda una versión antigua para cargar la web más rápido. Prueba a limpiar la caché de tu navegador (con Ctrl+F5 o Cmd+Shift+R) o a probar en modo incógnito. A nivel de servidor, si usas plugins de caché en WordPress, vacíala también. Google también tarda un tiempo en rastrear y actualizar el icono en sus resultados, así que ten paciencia.

¿Puedo usar un GIF animado como favicon?

Técnicamente, algunos navegadores lo soportan, pero te lo desaconsejo totalmente. Un icono animando en la pestaña del navegador es extremadamente molesto y distrae al usuario. A nivel de UX, es un desastre. Céntrate en un icono estático, limpio y profesional. Menos es más.

Mi favicon se ve borroso, ¿cómo lo soluciono?

Esto suele pasar por dos motivos: o estás partiendo de una imagen de origen de muy baja calidad, o estás usando un tamaño incorrecto. Asegúrate de crear el favicon a partir de una imagen de alta resolución (idealmente un vector o un PNG grande) y genera los tamaños específicos que te he comentado (32×32, 180×180, etc.). No dejes que el navegador reescale una imagen pequeña, porque el resultado será un desastre.