Añade tu logotipo y unos pocos datos para obtener todos los iconos, una imagen para compartir y las etiquetas head en un solo .zip. Obtienes favicon.ico, los iconos PNG y de Apple, un web manifest, una imagen para compartir de 1200 por 630 y las etiquetas head para pegar. Tu imagen nunca sale de este dispositivo. Es gratis.
Cómo crear tus iconos y etiquetas, paso a paso
- Elige un Logotipo o imagen, o suéltalo en la página. Funciona mejor un logotipo cuadrado de 512 px o más.
- Elige el estilo de la Imagen para compartir: Logotipo sobre color o Foto completa.
- Rellena el Nombre del sitio, el Título de la página, la Descripción, la Dirección de la página y el usuario de X.
- Elige el Color de fondo y el Color del tema, que tiñe la barra del navegador del teléfono.
- Revisa la vista previa de la tarjeta para compartir y de los iconos.
- Pulsa Descargar .zip y Copiar HTML.
- Sube los archivos a tu carpeta de archivos y luego pega las etiquetas en el head de tus páginas.
Qué hay en el paquete
favicon.ico contiene iconos de 16, 32 y 48 píxeles para todos los navegadores. favicon-16.png y favicon-32.png son las versiones nítidas que usan los navegadores modernos. apple-touch-icon.png es para las pantallas de inicio de iPhone y iPad, y los iconos de Android más site.webmanifest se usan cuando alguien instala tu sitio. og-image.png es la imagen que se muestra cuando se comparte tu enlace, y head.html tiene todas las etiquetas listas para pegar.
Conseguir una buena imagen para compartir
Las apps de chat y los sitios sociales muestran la imagen a unos 1200 × 630 y luego la recortan o la reducen para tarjetas más pequeñas, así que mantén el título corto y el logotipo claro. El estilo Logotipo pone tu logotipo sobre el color de fondo junto al título. El estilo Foto llena la tarjeta con tu imagen y pone el título sobre una sombra suave, lo que funciona mejor con fotos anchas. Las imágenes para compartir necesitan una dirección https:// completa, así que rellena la dirección de la página.
Comprobar que funciona
Tras subir los archivos, abre tu página y mira su código fuente para ver las etiquetas. Muchos sitios guardan en caché las tarjetas para compartir, así que si sigue apareciendo una imagen antigua, añade una versión a la dirección de la imagen, como og-image.png?v=2, o pide a la herramienta de vista previa de enlaces de la plataforma que vuelva a descargar la página.
Consejos
- Usa un logotipo sencillo que se mantenga claro a 16 píxeles.
- Elige un color de fondo que combine con tu marca.
- Escribe una descripción breve que dé ganas de hacer clic.
- Revisa después tu página con el escaneo previo al lanzamiento.
Para un conjunto más completo de etiquetas, como robots y datos de artículos, mira el generador de etiquetas meta, y para solo un icono, el generador de favicon.
Quién lo usa
Personas que lanzan un sitio personal, un portafolio, una tienda o la página de un pequeño negocio, y desarrolladores que quieren todos los iconos y archivos para compartir de una sola vez.
Preguntas
¿Dónde pongo los archivos?
Sube todo lo que hay en el .zip a la carpeta de archivos de tu sitio y luego pega las etiquetas en el head de tus páginas.
¿Necesito todos los iconos?
Usar el conjunto completo hace que tu icono se vea bien en los navegadores, en las pantallas de inicio de los teléfonos y cuando tu sitio se instala.
¿Se sube mi logotipo?
No. Todo se crea en tu navegador.