Favicon: qué es y cómo ponerlo en tu página web

Un favicon es el pequeño icono que identifica tu página web en las pestañas y los marcadores del navegador. También puede aparecer junto al resultado de tu sitio en Google. Para incorporarlo, prepara una versión sencilla de tu marca, configúrala en la web y comprueba cómo se ve en cada lugar.

Para qué sirve un favicon en tu negocio

Imagina que un cliente compara varias empresas y deja abiertas sus páginas. Un símbolo reconocible le ayuda a encontrar la tuya entre las pestañas. La definición de favicon de MDN describe su uso en navegadores y marcadores.

Su función es identificar. El nombre completo, la oferta y los datos de contacto siguen teniendo su espacio dentro de la página. Piensa en el icono como una versión pequeña de tu identidad, que debe entenderse incluso cuando apenas ocupa unos píxeles.

Prepara un símbolo que se entienda pequeño

Empieza con el archivo original de tu marca y elige su elemento más reconocible: una inicial, un símbolo o una forma sencilla. Evita incluir teléfono, eslogan o varias palabras.

Por ejemplo, una panadería con un logotipo formado por una espiga y su nombre podría probar solo la espiga. Es una propuesta de diseño: conviene compararla con la marca completa antes de aprobarla.

Revisa estas decisiones con quien prepara el archivo:

• Composición: deja espacio alrededor del símbolo para que no parezca cortado.
• Contraste: comprueba que los trazos se distingan sobre fondos claros y oscuros.
• Detalle: elimina elementos que desaparezcan al reducir la imagen.
• Consistencia: conserva los rasgos que permiten relacionarlo con tu negocio.

Pide una vista pequeña junto a otras pestañas. Ver el diseño ampliado puede ocultar problemas que aparecen en su uso real. Guarda también el original editable, para poder preparar nuevas versiones sin reconstruir la marca.

Elige tamaño y formato antes de subirlo

Para la Búsqueda de Google, el archivo debe ser cuadrado y medir al menos 8 × 8 píxeles. Google recomienda superar 48 × 48 píxeles; PNG e ICO están entre los formatos admitidos. Consulta sus requisitos oficiales para favicons.

Puedes pedir, por ejemplo, un PNG de 96 × 96 píxeles para esa configuración. Confirma además qué archivo necesita tu plataforma. Evita estirar una imagen diminuta: solicita una exportación desde el original.

Las fotografías del catálogo necesitan otro tratamiento; nuestra guía de SEO para imágenes explica cómo prepararlas según su función en la página.

Cómo ponerlo y comprobar la instalación

Si administras la web desde un panel, busca una opción como “icono del sitio” o consulta la documentación de tu plataforma. El nombre y la ubicación del ajuste varían.

Si trabaja un proveedor, envíale el archivo aprobado y solicita tres entregables: instalación, dirección del archivo y comprobación en las páginas principales. La configuración técnica habitual utiliza una etiqueta de enlace con el atributo rel="icon", descrita en la documentación de MDN.

Después haz una revisión sencilla:

1. Abre la página de inicio y una página de servicio.
2. Comprueba que ambas muestren el símbolo previsto.
3. Guarda la web como marcador y revisa su identificación.
4. Repite la prueba en otro navegador.
5. Anota cualquier diferencia y envíala al responsable con la dirección de la página.

Preguntas frecuentes

¿Qué diferencia hay entre un favicon y un logotipo?

El logotipo representa la marca en distintos materiales. El favicon es una adaptación para espacios pequeños del navegador; puede utilizar solamente una parte reconocible del logotipo.

¿Por qué mi favicon no aparece en Google?

Revisa que Google pueda rastrear la página principal y el archivo, y que la dirección del icono sea estable. Google necesita volver a procesarlos y no garantiza mostrarlo, aunque cumpla los requisitos.

¿Puedo cambiar el favicon sin rediseñar mi web?

Normalmente es un ajuste puntual. Pide al responsable que confirme cómo se configura en tu plataforma y qué páginas deben revisarse después.

¿Cómo sé si el diseño se entiende?

Muéstralo al tamaño de una pestaña y pide a alguien que identifique el negocio. Si necesita ampliarlo, prueba una versión con menos detalles.

Completa la identidad de tu sitio

Un favicon claro ayuda a reconocer tu web. Prepara el símbolo, acuerda su instalación y verifica el resultado. Si estás creando tu presencia digital, revisa las páginas web para negocios de Nexlab y consulta el alcance del diseño y la configuración.