Generador de favicon e iconos de aplicación

Qué hace esta herramienta

Un sitio web necesita más de una imagen pequeña para verse bien en todas partes. La pestaña de un navegador de escritorio pide un icono de 16 o 32 píxeles, Windows y los resultados de Google usan uno de 48, la pantalla de inicio del iPhone quiere 180 y Android y las aplicaciones web instaladas piden 192 y 512 mediante un archivo de manifiesto. Esta herramienta toma una imagen y crea todo el conjunto de una vez: favicon.ico, seis archivos PNG, el manifiesto web y las líneas de HTML que los conectan.

Todo se dibuja en tu navegador. La imagen no se sube, así que un logotipo aún sin publicar sigue siendo privado.

Cómo crear los iconos

1. Suelta tu logotipo en el recuadro o elígelo. Sirven PNG, JPG, WebP, GIF y SVG. Una imagen cuadrada de 512 píxeles o más da el mejor resultado, y un SVG se mantiene nítido en todos los tamaños porque se dibuja de nuevo para cada uno.
2. Mira la lista de vista previa. Usa Ajuste para conservar la imagen entera o para llenar el cuadrado y recortar el lado largo, Margen para dejar espacio alrededor y Esquinas redondeadas para una forma más suave. Activa el fondo para rellenar el icono con un color, que también será el color del tema en el manifiesto.
3. Escribe el nombre de la app y descarga archivos sueltos o todo el ZIP.

Qué obtienes

• favicon.ico contiene tres imágenes, de 16, 32 y 48 píxeles, en un solo archivo. Empieza con una cabecera de 6 bytes y una entrada de 16 bytes por imagen, así que el directorio mide 54 bytes antes de la primera imagen. Cada imagen interior es un PNG, que todos los navegadores actuales leen.
• favicon-16x16.png, favicon-32x32.png y favicon-48x48.png para los sitios que piden archivos separados.
• apple-touch-icon.png de 180 por 180 píxeles. iOS pinta de negro la transparencia y redondea las esquinas por su cuenta, así que este icono siempre es cuadrado y siempre lleva fondo, blanco si no elegiste ninguno.
• icon-192.png e icon-512.png para Android y las aplicaciones web instaladas.
• site.webmanifest, un pequeño archivo JSON que nombra la app y lista los dos iconos grandes.

Ponerlos en tu sitio

Sube los archivos a la raíz de tu sitio para que se abran en /favicon.ico y /icon-192.png, y pega las líneas generadas en el head de cada página. El navegador también pide /favicon.ico por su cuenta, incluso sin HTML, por eso importa el nombre del archivo. Si guardas los archivos en otra carpeta, cambia las rutas en el fragmento y en el manifiesto.

Consejos que ahorran tiempo

• Diseña para 16 píxeles. Las líneas finas y el texto pequeño desaparecen. Una forma gruesa o una o dos letras sobreviven.
• Usa el margen para iconos maskable. Android puede recortar el icono en círculo o en cuadrado redondeado. Mantener lo importante en el 80 por ciento central es seguro.
• Los navegadores guardan los favicon mucho tiempo. Tras cambiar uno, recarga sin caché o abre la página en una ventana privada para ver el nuevo.
• Revisa el contraste. Un logotipo oscuro sobre fondo transparente desaparece en un tema oscuro. Un fondo de color lo soluciona.