Generador de favicon

Un solo archivo de icono tendría que servir una pestaña del navegador a 16 píxeles, una pantalla de inicio de móvil a 180 píxeles, un cajón de apps de Android hasta 512 píxeles, y una miniatura de la barra de tareas de Windows — superficies con reglas de resolución, manejo de proporción y composición de fondo radicalmente distintas, ninguna de las cuales comparte una única resolución de origen ideal. Históricamente por esto los sitios o bien enviaban solo un `favicon.ico` de baja resolución que se veía borroso en todas partes, o directamente se saltaban los iconos móviles y PWA. Generar cada tamaño desde una fuente y empaquetarlos juntos es lo que hace que un icono se vea nítido y correcto en todos a la vez, en lugar de aceptable en uno e incorrecto en el resto.

El manifiesto web existe por una razón relacionada pero distinta: es lo que permite que los navegadores Android y Chromium de escritorio ofrezcan "Instalar app" y muestren el sitio con su propio icono y nombre una vez instalado, en lugar de como un marcador con un icono genérico de globo. Un favicon y un icono PWA son gestionados por partes distintas de la plataforma, por lo que aquí se generan juntos tanto un conjunto de iconos simple como un manifiesto.

La pestaña del navegador es el renderizado más pequeño y más frecuentemente visto de un favicon, y es implacable: a 16×16 píxeles hay espacio para una forma marcada, dos como mucho, y prácticamente ningún espacio para texto más allá de una sola letra o número. Un logotipo completo con varios elementos que se ve pulido a tamaño normal normalmente se convierte en una mancha indistinta al tamaño de pestaña, porque el detalle que lo hace reconocible simplemente no tiene píxeles restantes en los que renderizarse.

Las imágenes de origen más fiables son un solo glifo, monograma, o icono simple sobre un fondo liso o transparente, idealmente proporcionado a 512×512 o más grande para que cada tamaño generado sea una reducción limpia en lugar de una ampliación. Si el logotipo existente es complejo, normalmente es mejor extraer o simplificar un solo elemento reconocible de él — un monograma, un símbolo, una forma distintiva — en lugar de reducir todo el conjunto y esperar que se mantenga coherente.

Un favicon con fondo transparente se adapta limpiamente tanto a los temas claros como oscuros de las pestañas del navegador, que es la opción correcta siempre que el propio diseño no necesite uno. Sin embargo, algunos destinos no pueden usar transparencia en absoluto — el icono táctil de Apple en particular es compuesto por iOS sobre un fondo sólido antes de que se aplique su propia máscara de esquinas redondeadas, así que una fuente transparente produce un logotipo flotando sobre negro en lugar del icono limpio que tiene cualquier otra app de iOS. Elegir un color de fondo sólido de antemano, ajustado a un color de marca en lugar de dejarlo en blanco o negro por defecto, es lo que mantiene el icono con un aspecto deliberado en cada superficie en lugar de simplemente correcto en algunas de ellas.