Un favicon es la pequeña imagen que identifica un sitio web en las pestañas y marcadores del navegador. El nombre proviene de "ícono favorito". Ofrece a los lectores una forma visual de encontrar un sitio entre las páginas abiertas, incluso cuando una pestaña es demasiado estrecha para mostrar su título. Los motores de búsqueda también pueden mostrar el favicon de un sitio junto al resultado. La definición de favicon de MDN describe estos usos comunes del navegador.
El círculo segmentado naranja deSearchVector es un ejemplo. El diagrama de portada utiliza su icono real para explicar la conexión entre un archivo de imagen, el HTML de una página y el navegador. Es un diagrama didáctico, no una captura de pantalla de un resultado de búsqueda.
¿Listo para implementar uno? Vaya a la configuración de HTML o solución de problemas de íconos faltantes.
Favicon, logo e imagen social: ¿cuál es cuál?
Un logotipo es la identidad visual más amplia de una empresa. Puede incluir un símbolo, un nombre completo y un eslogan. Un favicon es una pequeña aplicación de esa identidad, normalmente un símbolo simplificado que sigue siendo reconocible en tamaños pequeños. Reducir una marca denominativa completa a menudo hace que sus letras sean indistinguibles.
| Asset | Principal job |
|---|---|
| Favicon | Identificar la página en una pestaña del navegador o marcador |
| Logotipo de encabezado | Identificar la marca dentro del diseño de página |
| Vista previa social imagen | Ilustra un enlace compartido con una imagen más grande |
| Icono de la pantalla de inicio | Representa un sitio web guardado o una aplicación web instalada en un dispositivo |
Cambiar el logotipo del encabezado no necesariamente actualiza el favicon. Estos pueden ser archivos separados controlados por diferentes configuraciones. Del mismo modo, reemplazar una imagen de vista previa social no repara el ícono de pestaña que falta. Empiece por identificar la superficie que está mal y luego busque el ajuste que la proporciona.
Elija un ícono que sobreviva a los tamaños pequeños
Comience con un lienzo cuadrado y una silueta simple. Exporte una imagen de origen de gran tamaño y luego obtenga una vista previa de ella en 16×16 y 32×32 como una práctica comprobación del diseño. Esas vistas previas prueban la legibilidad; no son una afirmación de que cada navegador muestre el ícono en un tamaño fijo. Busque trazos que desaparezcan, letras abarrotadas y áreas transparentes que se fusionen con el fondo de la pestaña.
Revise la marca contra fondos claros y oscuros. Un contorno fino y oscuro puede desaparecer en una pestaña oscura, mientras que un símbolo pálido puede desaparecer en una pestaña clara. Una forma sólida con un contraste deliberado suele ser más fácil de reconocer. No confíe únicamente en el color: un contorno distintivo aún ayuda cuando los íconos son visualmente similares.
Conserve un archivo fuente que su equipo pueda editar. Exportar una copia más grande de una miniatura borrosa no restaura sus detalles. Para cambiar la marca, apruebe el ícono pequeño junto al logotipo principal para que el sitio web, los marcadores y los accesos directos guardados se sientan relacionados.
Agregar un favicon con un ejemplo HTML real
SearchVector sirve un PNG real de 512×512 en su URL de imagen de favicon. Esta declaración mínima apunta a ese activo existente en el sitio SearchVector:
Coloque la declaración dentro del del documento. La ruta relativa a la raíz se resuelve a partir del nombre de host actual: en SearchVector solicita /favicon.png de SearchVector; en su dominio solicita ese archivo de su dominio. Para su propio sitio, cargue su propio recurso de marca y utilice su ruta real. Copiar la etiqueta sin cargar la imagen deja una referencia rota.
El atributo rel identifica el recurso como un icono. El href lo ubica, el tipo describe su formato y el tamaños describe las dimensiones de la imagen. Escribir “512x512” no cambia el tamaño de un archivo. Inspeccione la imagen exportada y mantenga la declaración precisa.
SearchVector también declara alternativas SVG e ICO. Los navegadores pueden seleccionar entre declaraciones de iconos utilizando atributos como tipo y tamaño, como se explica en la referencia de enlaces de iconos de MDN. Por lo tanto, las declaraciones múltiples no son automáticamente un problema, pero las alternativas obsoletas pueden explicar apariencias inconsistentes.
Si utiliza un CMS, comience con la configuración del icono del sitio. Si utiliza un marco, utilice su mecanismo de metadatos establecido. Luego inspecciona el HTML resultante: una carga exitosa en una pantalla de administración es solo una parte del trabajo. Evite agregar una segunda configuración competitiva antes de verificar lo que ya genera la plantilla existente.
Qué Google necesita para la apariencia de búsqueda
La documentación del favicon deLa página de inicio debe declarar el ícono. Googlebot necesita acceso a esa página de inicio y Googlebot-Image necesita acceso al archivo de icono. Mantenga estable la URL del icono y utilice una marca representativa del sitio. Google admite un favicon por nombre de host: un subdominio puede tener el suyo propio, pero un subdirectorio no obtiene un favicon de búsqueda independiente.
La elegibilidad no garantiza la visualización. Después de un cambio, Google necesita volver a rastrear y procesar la página de inicio; su documentación dice que esto puede llevar días o semanas. Los propietarios de sitios pueden solicitar la indexación de la página de inicio a través de la inspección de URL. Cambiar el nombre de la imagen repetidamente no es un sustituto útil para verificar el acceso y permitir el tiempo de procesamiento.
Solucionar problemas de un favicon faltante o desactualizado
Separe tres observaciones: qué declara el HTML, qué devuelve la URL de la imagen y qué muestra el navegador. Una discrepancia entre ellos le indica dónde investigar. Mantenga un breve registro de la URL de la página, la URL del ícono y el resultado en lugar de cambiar varias configuraciones a la vez.
| Síntoma | Siguiente check |
|---|---|
| No hay ícono en ninguna página | Inspeccione el encabezado para ver si hay una declaración de ícono; abra la URL de su imagen directamente |
| La página de inicio funciona, el artículo no | Compare plantillas y relativa a la raíz versus relativa a la página rutas |
| Icono antiguo en un navegador | Compare un perfil de navegador nuevo e inspeccione todas las alternativas declaradas |
| La URL de la imagen abre una página web | Compruebe si hay una redirección, desafío de acceso o respuesta HTML alternativa |
| El navegador funciona, la búsqueda no | Revise la declaración de la página de inicio, el acceso de rastreo y la elegibilidad de búsqueda por separado |
Una respuesta etiquetada como 200 es insuficiente si el servidor envía una página de inicio de sesión o un respaldo HTML genérico. En el panel Red del navegador, inspeccione la URL final de la solicitud del ícono, el tipo de contenido de la respuesta y la vista previa. En realidad, un PNG debería decodificarse como PNG. También verifique si una CDN todavía sirve un archivo más antiguo después de actualizar el origen.
Para una investigación de caché, abra la imagen directamente y compárela con un perfil de navegador nuevo. Borrar un caché puede ayudar a aislar la causa, pero los usuarios no deberían necesitar realizar un reinicio especial para que el sitio web funcione. Verifique el activo implementado y la configuración de caché antes de tratar una actualización local como una solución permanente.
Ejemplo resuelto: una página anidada pierde su ícono
Considere un sitio ficticio cuya página de inicio muestra el ícono correcto, mientras que un artículo bajo /blog/ no lo muestra. Ambas plantillas contienen href="favicon.png", sin la barra diagonal inicial. Suponiendo que no hay una anulación de URL base, esa ruta relativa se resuelve junto a la página actual. Es posible que funcione en la raíz mientras solicita una ubicación diferente para el artículo.
El desarrollador abre la solicitud de icono del artículo y descubre que devuelve el HTML alternativo del sitio en lugar de una imagen. La solución es confirmar que la imagen existe en la raíz del sitio y cambiar la declaración compartida a href="/favicon.png". Luego vuelven a comprobar la página de inicio y el artículo. Ahora ambos solicitan el mismo activo.
Este es un ejemplo de diagnóstico trabajado, no un incidente SearchVector reportado. Su lección es inspeccionar la URL solicitada antes de reemplazar la obra de arte. Una imagen perfectamente válida no puede ayudar si una plantilla anidada solicita el archivo incorrecto.
Una verificación final antes de cerrar la tarea
- Abra la página de inicio y una página anidada; confirme que ambos declaren el ícono deseado.
- Abra cada alternativa declarada y verifique que pertenezca a la marca actual.
- Confirme que la imagen deseada se cargue sin autenticación ni HTML alternativo.
- Inspeccione el ícono pequeño en el navegador claro y oscuro. apariciones.
- Revise la elegibilidad Google por separado, luego registre el cambio y permita tiempo de procesamiento.
Para una revisión más amplia del sitio web, continúe con el Website Checker de SearchVector o el Web Page Crawler. Mantenga las comprobaciones de imagen directa y HTML anteriores como evidencia de su favicon; Una revisión general de la página no garantiza cómo un motor de búsqueda mostrará su marca.
Una tarea de favicon terminada tiene una imagen reconocible, una declaración correcta y una URL de recurso funcional en todas las plantillas de página. Primero verifique esas piezas de concreto. Luego supervise la apariencia de la búsqueda sin confundir una actualización retrasada con una implementación defectuosa del navegador.
