Cómo crear un juego completo de favicons para tu sitio
Qué genera esta herramienta
Un favicon rara vez es un solo archivo. Los navegadores, los móviles y las aplicaciones web instaladas piden cada uno una resolución distinta, así que un sitio necesita una pequeña familia de iconos en lugar de una única imagen. Esta herramienta parte de un único origen — una imagen que subes, una o dos letras de texto o un emoji — y lo genera en todos los tamaños que espera un sitio moderno.
Los iconos terminados se devuelven como archivos PNG, acompañados de un site.webmanifest y de un fragmento HTML que los enlaza con tu página, de modo que no queda ninguna duda sobre qué etiqueta apunta a cada archivo.
Tres puntos de partida
Puedes subir una imagen en PNG, JPG, SVG o WebP y dejar que la herramienta la reduzca a cada tamaño de icono. Para una marca de texto, escribe uno o dos caracteres y elige una fuente y un color de texto: resulta práctico cuando el logotipo aún no está listo. La vía del emoji te deja escoger de una selección o pegar cualquier emoji que admita tu sistema.
Sea cual sea el origen, se aplican los mismos ajustes de estilo: color de fondo, redondeo de esquinas mediante un control de border-radius y un interruptor de fondo transparente para los iconos que no deben apoyarse sobre un cuadrado macizo. Si aún no tienes decidido el color de marca, el generador de gradientes CSS es un buen sitio para probar combinaciones y quedarte con uno como fondo; y una vez exportados los iconos, el marcado del head que los declara va junto a las etiquetas que escribe el generador de meta tags.
Un ejemplo concreto
Supongamos que escribes la letra A, pones un fondo azul y subes el border-radius para suavizar las esquinas. La vista previa se actualiza en todos los tamaños a la vez, y la descarga te entrega favicon-16x16.png, favicon-32x32.png y favicon-48x48.png para las pestañas del navegador y los mosaicos de Windows, apple-touch-icon.png a 180×180 para las pantallas de inicio de iOS, y android-chrome-192x192.png y android-chrome-512x512.png para Android y las instalaciones PWA, todo dentro de un mismo ZIP.
Tamaños, formatos y las etiquetas link
Cada tamaño cumple una función: 16×16 y 32×32 aparecen en las pestañas del navegador, 48×48 cubre Windows, 180×180 es el touch icon de Apple, y 192×192 y 512×512 alimentan Android y el manifest de la aplicación web. El fragmento generado los declara con etiquetas <link rel="icon">, <link rel="apple-touch-icon"> y <link rel="manifest">, más un meta theme-color, listo para pegar directamente en tu <head>.
La salida es PNG y no un archivo .ico multirresolución heredado, y cualquier navegador actual acepta favicons PNG a través de estas etiquetas link. Si quieres que los iconos redondeados se integren en la barra de pestañas, activa el fondo transparente para que las esquinas queden libres en lugar de mostrar un cuadrado de color.