Generador de favicon e íconos de app

Cómo crear un favicon e íconos de app en cuatro pasos

1. Elige tu logo o escribe letras. Elige un logo en PNG, JPG, WebP o SVG, o escribe de 1 a 3 letras y elige un color de fondo.
2. Ajusta color, margen y esquinas, y revisa las vistas previas. Define el color de fondo, el color de las letras, el margen y las esquinas redondeadas. Activa la opción de rellenar para que todos los íconos tengan fondo. Luego revisa las vistas previas: pestaña del navegador con tema claro y oscuro, pantalla de inicio del teléfono, tamaño de resultado de búsqueda y el ícono maskable en tres máscaras.
3. Descarga el ZIP. Un solo ZIP trae todos los archivos y el fragmento de código. También puedes descargar los archivos uno por uno, o solo el .ico.
4. Sube los archivos a tu sitio y pega el fragmento. Pon los archivos en la carpeta raíz de tu sitio, o sigue los pasos de tu plataforma más abajo. Después copia el fragmento en el head de tus páginas.

El conjunto pequeño de archivos que necesita un sitio

El favicon es el ícono pequeño que aparece en la pestaña del navegador. Las guías antiguas piden decenas de tamaños; hoy basta un conjunto corto para navegadores, teléfonos y apps web.

Cómo diseñar un ícono que se lea a 16 píxeles

Un favicon se muestra de 16 a 32 píxeles. Las líneas finas, el texto pequeño y un logo completo se vuelven una mancha, así que el ícono debe ser más simple que tu logo.

• Usa de 1 a 3 letras gruesas, o un símbolo grueso tomado de tu logo.
• Elige un contraste alto entre las formas y el fondo. Usa nuestro comprobador de contraste de color para probar tu par.
• Llena casi todo el cuadrado. Un margen pequeño mantiene la marca grande.
• Pruébalo en una pestaña clara y en una oscura. Un logo oscuro y transparente desaparece en un tema oscuro, así que dale fondo.

Las letras son la opción más rápida. Un logo funciona cuando su forma principal es simple, como un monograma o una hoja. Si el tuyo tiene mucho detalle, recorta la parte que destaque.

Íconos de app y la zona segura maskable

Cuando alguien instala tu sitio como app, Android puede recortar el ícono en círculo o en cuadrado redondeado, según el teléfono. Un ícono maskable está pensado para eso.

Un ícono maskable debe ser opaco, sin píxeles transparentes. Mantén todo lo importante dentro de un círculo centrado cuyo radio sea el 40% del ancho del ícono. Lo que quede fuera puede recortarse. La herramienta dibuja el anillo de la zona segura sobre el ícono en tres máscaras, para que veas qué se salva.

En el manifiesto, mantén los propósitos separados: icon-192.png e icon-512.png como "any", e icon-maskable-512.png como "maskable". No escribas "any maskable" en un mismo archivo, porque una imagen no puede servir para ambos.

El fragmento del head y la trampa de los tamaños del ICO

La herramienta escribe un fragmento listo para pegar, con un comentario sobre cada línea. Enlaza favicon.ico con sizes="32x32", luego icon.svg si lo tienes, y después el ícono de Apple y el manifiesto.

El atributo sizes importa. Sin él, Chrome puede elegir el marco equivocado del .ico y mostrar un ícono borroso. El SVG va en segundo lugar, para que lo use el navegador que sepa leerlo.

Pega el fragmento dentro del head de cada página, o en tu plantilla compartida. Sube los archivos a las rutas que usa, normalmente la raíz, como /favicon.ico.

Cómo agregar los íconos en un sitio con Next.js

En el App Router, lo más simple son las convenciones de archivos. Revisa la documentación actual de Next.js para tu versión, porque los detalles cambian.

• Pon favicon.ico en la carpeta app. Next.js agrega la etiqueta link por ti.
• Si quieres, agrega icon.svg o icon.png, y apple-icon.png, en la misma carpeta. Cada uno recibe su propia etiqueta.
• Para el manifiesto, crea app/manifest.ts, o coloca site.webmanifest en public/.
• ¿Prefieres public/? Pon ahí los archivos y define el campo icons en los metadatos, o pega el fragmento en tu layout.

Reinicia el servidor de desarrollo y abre /favicon.ico para confirmar que se sirve. Deja una sola copia.

Cómo agregar los íconos en WordPress

WordPress tiene un ajuste de Ícono del sitio que genera los tamaños por ti. Los menús cambian según la versión.

• Abre Apariencia, luego Personalizar, luego Identidad del sitio, y busca Ícono del sitio (el nombre exacto cambia según la versión).
• Con un tema de bloques, el mismo ajuste puede estar en el Editor del sitio o en el Personalizador, según tu versión.
• Sube una imagen cuadrada de al menos 512 por 512 píxeles. Usa icon-512.png del ZIP.
• Guarda y publica, y abre tu sitio en una ventana privada para comprobarlo.

No necesitas el fragmento. WordPress agrega sus propias etiquetas.

Cómo agregar los íconos en Wix

En Wix, cambiar el favicon requiere un plan Premium con un dominio conectado. Los nombres de los menús cambian, así que revisa la página de ayuda de Wix.

• En el panel, abre Configuración y busca Favicon (el nombre exacto cambia según la versión).
• Sube el PNG del ZIP, por ejemplo icon-512.png.
• Guarda y publica tu sitio.

El ícono puede tardar de unos minutos a unos días en aparecer. Wix se encarga del head, así que omite el fragmento.

Cómo agregar los íconos en Squarespace

Squarespace lo llama "Browser Icon" y está en Design. Los nombres de los menús cambian, así que revisa su página de ayuda.

• Abre Design y busca Browser Icon.
• Sube un solo PNG de unos 100 a 300 píxeles y de menos de 100 KB. No acepta archivos .ico.
• Usa icon-192.png del ZIP, o cambia el tamaño de un PNG a ese rango.
• Guarda y comprueba en una ventana privada.

Toma una sola imagen para la pestaña, así que omite el fragmento.

Por qué no aparece tu favicon

Los navegadores guardan los favicons en caché con fuerza, así que un ícono viejo suele quedarse.

• Abre la dirección del ícono directamente, como tusitio.com/favicon.ico. Si ves un error, el archivo está en otro lugar o bloqueado.
• Actualiza la página a la fuerza, o ábrela en una ventana privada.
• Revisa la ruta en la etiqueta link. Un error de escritura o una diagonal inicial que falta es lo más común.
• Verifica que cualquier persona pueda llegar al archivo, sin inicio de sesión ni reglas que lo bloqueen.
• Ten paciencia con los buscadores. Su ícono pide una imagen cuadrada de al menos 8 por 8 píxeles (se recomienda más de 48 por 48) en una dirección estable que puedan rastrear. Puede tardar días o semanas, y no podemos prometer que aparezca.

La imagen para compartir y las metaetiquetas

La misma página crea una imagen para compartir de 1200 por 630 píxeles, la que se ve cuando alguien comparte tu enlace. Las redes sociales aconsejan al menos 1200 por 630 píxeles (cerca de 1.91 a 1), un mínimo de 200 por 200 y hasta 8 MB.

Algunas tarjetas grandes usan una proporción de 2:1, así que los bordes pueden recortarse: mantén el texto lejos de ellos. La herramienta muestra la proporción de contraste de tu texto, y nuestro comprobador de contraste de color revisa más a fondo.

También escribe metaetiquetas: og:title, og:type, og:url, og:image, og:image:alt y las etiquetas twitter: de tarjeta. La dirección de la imagen es un marcador. Cuando subas la imagen, reemplázala por la dirección https absoluta real.

Las plataformas guardan las vistas previas en caché, así que una imagen vieja puede quedarse después de cambiarla. La herramienta no consulta ni revisa ningún otro sitio.

Tu logo se queda en tu navegador

Todo se hace en tu navegador. Tu logo no se sube, no necesitas cuenta y funciona sin conexión después de la primera carga. Un SVG que agregues se limpia de scripts y controladores de eventos, y solo se muestra como imagen.

Preguntas frecuentes