Qué es
Un favicon (abreviatura de "favorite icon", icono favorito) es la pequeña imagen cuadrada que aparece junto al título de tu página en una pestaña del navegador, en una lista de marcadores y a veces en el historial y las sugerencias de búsqueda. Suele ser una versión simplificada de un logotipo — lo bastante pequeño como para reconocerse al tamaño de unos pocos píxeles, como una letra, una forma sencilla o un icono.
Sin uno, los navegadores muestran en su lugar un icono genérico de página en blanco — el mismo marcador de posición que se usa para cualquier web que no haya configurado uno, lo que deja claro de inmediato que este detalle en concreto nunca se configuró.
En qué afecta
Un favicon ausente es un detalle pequeño, pero también es uno de los detalles pequeños más visibles: aparece en cada página de tu web, en cada pestaña del navegador, para cada visitante, todo el tiempo. Cuando alguien tiene varias pestañas abiertas, el favicon suele ser la única forma de reconocer visualmente tu pestaña entre la fila — un icono genérico en blanco lo hace más difícil y transmite en silencio "esta web nunca se terminó del todo".
Es también uno de los logros más rápidos de toda esta lista: a diferencia de las decisiones de contenido o diseño, un favicon se crea y añade en cuestión de minutos, sin ningún mantenimiento posterior una vez colocado.
Cómo solucionarlo
- Crea una imagen cuadrada sencilla (idealmente una versión simplificada de tu logo) — hay herramientas gratuitas de generación de favicons que convierten automáticamente un logo existente en los formatos y tamaños de archivo correctos.
- Guarda el resultado como
favicon.icoofavicon.svgy súbelo a la carpeta raíz de tu web (o donde tu plataforma de hosting espere los archivos de icono). - Añade
<link rel="icon" href="/favicon.ico">(o el equivalente en SVG) dentro de la sección<head>de tu página. - Si usas un creador de webs (Squarespace, Wix, Webflow, WordPress), busca un campo de subida para "favicon" o "icono del sitio" en la configuración general de tu web en lugar de editar código directamente.
- Recarga la página en una pestaña nueva del navegador (o borra la caché) para confirmar que aparece el nuevo icono — los favicons a veces se guardan en caché y tardan en actualizarse.