Cómo los sitios web exponen logotipos, favicons e imágenes de vista previa sociales
Descubra qué archivos representan la identidad de un sitio, dónde los descubren los navegadores y cuándo tiene permiso para reutilizarlos.
Un sitio web puede utilizar varias imágenes para representar la misma marca. El encabezado tiene un logotipo ancho, la pestaña del navegador muestra un pequeño favicon, un teléfono guarda un ícono de aplicación cuadrado y un enlace compartido muestra una vista previa social grande. Estos archivos están relacionados, pero no son intercambiables.
Saber dónde se declara cada uno ayuda cuando audita sus propios activos de identidad, migra un sitio, verifica las vistas previas de enlaces o recopila un kit de marca autorizado. También evita un error común: ampliar un favicon de 32 píxeles porque era el archivo similar a un logotipo más fácil de encontrar.
Comience con el logotipo del encabezado visible
Inspeccione el logo en la navegación. Puede ser:
- Un
<img>con una fuente PNG, WebP o SVG - Marcado SVG en línea
- Un fondo CSS
- Texto diseñado con una fuente de marca.
- Una
<imagen>con variantes responsivas
Registre la fuente del elemento, las dimensiones naturales, el texto alternativo y el enlace. Si srcset está presente, verifique todos los candidatos. Para un vector en línea, conserve el SVG completo y sus estilos.
Utilice la guía de iconos web y sprites SVG cuando la marca se construya a partir de símbolos o máscaras.
Compruebe si el encabezado utiliza una pequeña derivada.
El espacio de navegación es limitado, por lo que el archivo mostrado puede optimizarse para un encabezado corto en lugar de ser un archivo maestro. Busque en la biblioteca de medios, la página de la marca, el kit de prensa, el pie de página y los metadatos estructurados del sitio para obtener una versión más grande o con una composición diferente.
Una marca denominativa ancha y una marca cuadrada deben almacenarse como funciones separadas. No cortes uno mecánicamente y lo llames el otro.
Cómo funcionan los enlaces de favicon
Los favicons suelen declararse en el encabezado del documento:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/icon-32.png" sizes="32x32">
Los navegadores pueden seleccionar entre varios iconos según el formato y el tamaño. Algunos todavía solicitan /favicon.ico por convención incluso cuando existen otros enlaces.
El valor sizes describe las dimensiones previstas del archivo. Un SVG puede usar cualquier porque escala. Inspeccione el archivo real en lugar de confiar en una declaración obsoleta.
Los favicons están diseñados para ser reconocidos en tamaños pequeños. A menudo simplifican el logotipo completo, eliminan palabras o ajustan el espaciado. No son adecuados como logotipo de un sitio web grande.
Iconos táctiles de Apple
Los sitios pueden proporcionar un ícono para guardar una página en la pantalla de inicio de un dispositivo Apple:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Suele ser una imagen rasterizada cuadrada más grande. Su fondo y tratamiento de esquinas pueden diferir del favicon. Los dispositivos Apple pueden aplicar su propio enmascaramiento, así que mantenga las obras de arte importantes alejadas de los bordes extremos.
Durante una migración, verifique que el archivo siga siendo accesible en la ruta declarada y que reciba el tipo de contenido correcto.
Manifiestos de aplicaciones web
El manifiesto de una aplicación web puede enumerar varios íconos de aplicaciones:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
La página vincula el manifiesto:
<link rel="manifest" href="/site.webmanifest">
Los iconos de manifiesto pueden incluir un propósito como enmascarable. Un ícono enmascarable necesita un relleno seguro porque los lanzadores pueden recortarlo en círculos, cuadrados redondeados u otras formas.
Descargue el manifiesto, resuelva las rutas de los iconos relacionados con él y registre cada propósito. No asuma que el ícono de la aplicación de 512 píxeles es el logotipo maestro oficial; puede ser un activo de producto especialmente acolchado.
Abrir imágenes de gráficos
Las plataformas sociales suelen utilizar metadatos de Open Graph:
<meta property="og:image" content="https://example.com/social/article-cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A guide to responsive website images">
El archivo representa la página cuando se comparte. Un artículo suele tener su propia portada, mientras que una página de inicio puede utilizar una tarjeta a nivel de marca. Una imagen social suele contener diseño, texto o un recorte amplio que no aparece en la página visible.
Compruebe que la URL sea absoluta, pública, utilice HTTPS y devuelva una imagen real sin autenticación. Los rastreadores de vista previa no comparten la sesión de su navegador.
Imágenes de tarjetas de Twitter
Las páginas también podrán declarar:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/social/article-cover.jpg">
Cuando existen campos de tarjeta de Twitter y Open Graph, las plataformas siguen sus propias reglas alternativas. Manténgalos consistentes a menos que exista una razón deliberada para separar el arte.
Evite incrustar detalles esenciales sólo como texto pequeño dentro de la imagen. El título y la descripción de la página deben contener el significado de los metadatos.
Imágenes de datos estructurados
Artículo, Producto, Organización y otros objetos de esquema pueden contener URL de imágenes. Estos pueden superponerse con portadas visibles o metadatos sociales.
El JSON-LD renderizado necesita una inspección adecuada porque algunas aplicaciones lo inyectan con JavaScript. Para su propio sitio, utilice la prueba de resultados enriquecidos de Google u otro validador que tenga en cuenta la representación. No concluya que falta el esquema basándose únicamente en un raspador de texto que elimina las etiquetas de secuencia de comandos.
Una imagen incluida en el esquema debe representar con precisión la entidad y seguir siendo rastreable.
Encuentre recursos con herramientas para desarrolladores
Para una página:
- Inspeccione el logotipo del encabezado y sus candidatos responsivos.
- Busque en el encabezado del documento los campos de ícono, manifiesto, Open Graph y Twitter.
- Abra el manifiesto y resuelva las rutas de sus iconos.
- Inspeccione JSON-LD para ver las propiedades de imagen relevantes.
- Utilice el panel Red para confirmar la carga de cada archivo.
- Registrar dimensiones, formato, rol y declaración de fuente.
El descargador de logotipos ExtractPics puede recopilar archivos de imágenes públicas de la página renderizada. Los SVG en línea, los manifiestos y los metadatos estructurados aún merecen una revisión manual.
Cree un inventario de activos de marca
Utilice roles distintos en lugar de una carpeta de "logotipo":
| Rol | Forma típica | Uso previsto |
|---|---|---|
| Marca denominativa principal | ancho | Encabezado, documentos, asociaciones. |
| marca de marca | Cuadrado o compacto | Avatares y espacios pequeños |
| favicon | Pequeño, simplificado | Pestañas y marcadores del navegador |
| Toque el icono | cuadrado | Atajos móviles guardados |
| Icono de aplicación enmascarable | Cuadrado acolchado | Lanzadores de aplicaciones web instalables |
| Vista previa social | tarjeta ancha | Enlaces compartidos |
| Portada del artículo | Generalmente paisaje | Página de contenido individual |
Guarde las variantes claras y oscuras por separado. Registre el tamaño mínimo, el espacio libre, los requisitos de fondo y el archivo de diseño fuente, si lo posee.
Errores comunes de migración
Copiando solo el logo visible
El encabezado sobrevive, pero los íconos del navegador y las vistas previas de enlaces aún apuntan al dominio anterior.
Usar URL de metadatos relativos incorrectamente
Los rastreadores sociales funcionan de manera más confiable con URL públicas absolutas. Pruebe la página implementada, no solo el HTML local.
Ampliar un favicon
Los íconos pequeños están simplificados y rasterizados para una visualización pequeña. Encuentre la marca vectorial o el gran activo oficial.
Olvidar el comportamiento de la caché
Los navegadores y las plataformas sociales almacenan en caché iconos e imágenes de vista previa. Es posible que un archivo corregido no aparezca inmediatamente. Cambie la URL deliberadamente cuando sea necesario realizar versiones.
Perder relleno enmascarable
Reemplazar el ícono de una aplicación especialmente diseñado con ilustraciones de borde a borde puede provocar recortes en los dispositivos instalados.
La lista de verificación de migración de imágenes de sitios web incluye estas comprobaciones junto con la validación de contenido-imagen.
Los logotipos son activos de identidad protegidos
Que un logotipo se pueda descargar públicamente no significa que sea gratuito para su uso sin restricciones. Los logotipos suelen estar protegidos por derechos de autor y marcas comerciales. Los usos legítimos pueden incluir su propia marca, un cliente autorizado, una marca de socio oficial proporcionada para su exhibición o informes y comentarios de conformidad con la ley aplicable.
No utilice la marca de otra empresa para implicar respaldo o afiliación. Siga las pautas de su marca y solicite permiso cuando sea necesario.
La guía de licencia y fuente de imágenes explica cómo conservar la evidencia del permiso.
Mejore la configuración de identidad de su propio sitio
Los propietarios de sitios web deberían:
- Utilice un SVG nítido o un ráster responsivo adecuado para el logotipo visible.
- Proporciona formatos y tamaños de favicon probados.
- Incluya un ícono táctil de Apple cuando sea relevante.
- Mantenga un manifiesto válido con los íconos de aplicaciones apropiados.
- Proporcione imágenes de Open Graph específicas de la página.
- Agregue metadatos alternativos de imágenes significativos cuando sea posible.
- Mantenga todos los activos públicos accesibles para los rastreadores sin cookies de sesión.
- Utilice dominios y URL canónicos coherentes en los metadatos.
- Pruebe las tarjetas de vista previa después de la implementación.
Los archivos deben compartir una identidad visual sin ser cultivos idénticos.
Asigne un trabajo a cada activo de marca
No existe un único archivo de "logotipo del sitio web". La marca de encabezado ancha, el favicon pequeño, el ícono de aplicación cuadrado, la imagen de datos estructurados y la tarjeta social resuelven diferentes problemas de diseño. Tratar el primero que encuentra como maestro generalmente termina con un ícono de pestaña borroso o una vista previa para compartir mal recortada.
Registre cada activo por trabajo y luego pruebe las URL públicas después de la implementación. Durante una migración, verifique el encabezado y los metadatos del documento por separado. Si la marca pertenece a otra persona, limítese a los archivos y contextos que haya aprobado su propietario.