Generar favicons

Por qué un icono se convirtió en nueve archivos

Cada archivo del juego existe porque algo concreto lo lee, y no lee ningún otro. favicon.ico, con 16, 32 y 48, sigue siendo lo que un navegador busca por defecto en la raíz del sitio, y lo primero que revisa buena parte del software antiguo. favicon-16x16.png y favicon-32x32.png son lo que prefieren los navegadores actuales para la pestaña, porque un PNG al tamaño exacto le gana a cualquier escalado. apple-touch-icon.png, de 180 píxeles, es lo que iOS pone en la pantalla de inicio, y como no admite transparencia se compone sobre un fondo sólido para que no llegue con las esquinas negras. android-chrome-192x192.png y 512x512.png son lo que usa una aplicación web progresiva instalada para el icono del lanzador y la pantalla de bienvenida, declarados en site.webmanifest.

Servir un solo PNG grande para todos funciona mal en todas partes, y es el atajo más común. El navegador descarga medio megabyte para dibujar dieciséis píxeles, iOS ignora las reglas de transparencia y pone tu logo sobre un cuadrado negro, y el icono del lanzador queda recortado por la máscara que aplique la plataforma. El juego es tedioso justamente porque cada consumidor es exigente.

El fragmento HTML importa tanto como las imágenes. Los navegadores no descubren por sí solos la mayoría de estos archivos (solo favicon.ico en la raíz se encuentra por convención), así que las etiquetas link son las que los conectan, y el manifiesto necesita la suya. El fragmento usa rutas relativas a la raíz, que funcionan sin cambios siempre que los archivos estén en la raíz del sitio; si los pones en una subcarpeta, hay que ajustar las rutas tanto del fragmento como del manifiesto.

Diseña primero para 16 píxeles. A ese tamaño hay espacio para una forma y quizá dos colores: nada de texto, nada de degradados, nada de detalles finos y, desde luego, nada de logotipo completo con el nombre. Una imagen de origen cuadrada, contundente y de alto contraste, de al menos 512 píxeles, o un SVG, da el juego más limpio; la vista previa muestra la versión de 16 px con honestidad y no de forma halagadora, porque es la que te decepcionará más adelante. Las imágenes que no son cuadradas se rellenan con transparencia hasta quedar cuadradas, en lugar de recortarse o estirarse.

Si buscas otra cosa

El juego que se genera aquí es el núcleo práctico moderno. Si necesitas toda la larga cola (imágenes de mosaico de Windows, el icono de máscara para pestañas fijadas de Safari, browserconfig de Microsoft, los tamaños antiguos de Apple), RealFaviconGenerator los cubre y además revisa tu sitio publicado, algo realmente útil que esta herramienta no puede hacer.

En un proceso de compilación, generar iconos a mano es directamente el tipo de trabajo equivocado. favicons, pwa-asset-generator y los plugins de frameworks basados en sharp producen el juego completo a partir de un archivo de origen cada vez que publicas, así que los iconos no pueden quedar desactualizados cuando cambia el logo, que es lo que en la práctica siempre pasa.