Generador de favicons e iconos de app

Acerca de esta herramienta

Qué archivo usa cada plataforma

Un navegador de escritorio toma el icono de sus pestañas y marcadores de <link rel="icon">: normalmente el PNG de 16 píxeles en una pantalla normal y el PNG de 32 píxeles en una de alta densidad. Cuando una página no indica ningún icono, el navegador pide /favicon.ico.

El iPhone y el iPad usan apple-touch-icon.png, de 180 píxeles, cuando alguien añade el sitio a la pantalla de inicio. Android y las web apps instaladas leen la lista icons del web manifest: 192 píxeles para la pantalla de inicio, 512 píxeles para la pantalla de carga y el icono maskable donde el launcher da forma a los iconos por su cuenta. mstile-150x150.png es para los mosaicos de versiones antiguas de Windows y se incluye para que el conjunto esté completo.

Por qué favicon.ico sigue importando

Los navegadores piden /favicon.ico por su cuenta para todo lo que no tiene un head HTML que indique un icono: un PDF, una imagen o una respuesta JSON abierta en una pestaña. Los lectores de feeds, los rastreadores y otras herramientas también suelen buscarlo ahí. El formato ICO puede contener varios tamaños en un solo archivo, y este contiene 16, 32 y 48 píxeles, cada uno guardado como datos PNG, que Windows lee desde Vista y que todos los navegadores actuales leen.

Iconos maskable y la zona segura

Los launchers de Android recortan los iconos de las apps en un círculo, un cuadrado redondeado u otra forma. Para sobrevivir a ese recorte, un icono normal suele reducirse y colocarse sobre una placa blanca. Un icono maskable, en cambio, cubre todo el cuadrado con un fondo opaco y mantiene todo lo importante dentro de la zona segura: un círculo centrado cuyo diámetro es el 80 % del ancho del icono. Lo que quede fuera de ese círculo puede cortarse.

Esta herramienta rellena el icono maskable con el color de fondo de la app y deja un margen de al menos el 14 % en cada lado alrededor de tu imagen. Revisa la vista previa redonda y añade margen si se corta alguna esquina de la imagen.

Apple ignora la transparencia

iOS no conserva los píxeles transparentes en un icono de la pantalla de inicio: los pinta de negro, y redondea las esquinas por su cuenta. Por eso el Apple touch icon que se genera aquí es siempre opaco y cuadrado, relleno con el color de fondo de la app, con un margen de al menos el 8 % y sin tu radio de esquina.

Cómo funciona

Los iconos los dibujan los paquetes de imagen de Go compilados a WebAssembly, en un hilo en segundo plano de tu navegador, con remuestreo Catmull-Rom. Una imagen original muy grande se reduce primero en la página para que cada cambio se redibuje rápido. Tu imagen no se sube.