Generador de favicon

Un favicon es ese pequeño icono que se ve en la pestaña de tu navegador, aparece junto a tu sitio en los marcadores y el historial, y se muestra junto a los resultados de búsqueda. Es pequeño, pero es una de las partes más visibles de tu marca. Cada vez que alguien abre una pestaña con tu sitio, ese pequeño cuadrado es lo primero que percibe, por eso un favicon nítido y reconocible importa mucho más de lo que su tamaño sugiere. Hacerlo bien solo requiere una buena imagen y un par de clics con esta herramienta.

Aquí está la trampa que la mayoría no espera: un solo favicon rara vez es suficiente. Los navegadores de escritorio solicitan favicons de 16 y 32 píxeles, los dispositivos Android y las aplicaciones web progresivas usan 192 y 512, las pantallas de inicio de iOS quieren un icono táctil grande y las tiendas de aplicaciones piden una imagen de 1024 píxeles. Redimensionar un logo a mano en todos estos tamaños significa abrir software de diseño, ajustar los tamaños del lienzo y exportar archivo tras archivo. Este generador de favicons hace todo eso por ti en unos segundos, convirtiendo una sola imagen subida en ocho iconos PNG del tamaño correcto.

Cuando subes tu imagen, el generador produce iconos de 16x16, 32x32, 48x48, 64x64, 128x128, 192x192, 512x512 y 1024x1024 píxeles. Ese conjunto cubre casi todas las situaciones a las que te enfrentarás: el icono pequeño de la pestaña, los tamaños medianos que solicitan los navegadores y los sistemas operativos, los iconos grandes que usan las pantallas de inicio móviles y los manifiestos de aplicaciones web, y la imagen a tamaño completo que exigen las tiendas de aplicaciones. Revisas cada resultado en una cuadrícula de vista previa y descargas solo los tamaños que realmente necesitas.

La forma más fácil de obtener buenos resultados es empezar con una imagen cuadrada. Los iconos siempre son cuadrados, y la herramienta escala tu origen para llenar un lienzo cuadrado, así que una imagen no cuadrada se estirará. Un PNG transparente de 512x512 o más es el punto ideal. Si tu logo tiene, digamos, mil píxeles de ancho pero solo cuatrocientos de alto, recórtalo a un cuadrado antes de subirlo en lugar de dejar que el generador lo distorsione.

Reducir un logo grande a 16 píxeles es realmente difícil. El texto desaparece, las líneas finas se difuminan y los degradados sutiles se convierten en ruido. El generador usa el suavizado de imagen de alta calidad del navegador para mantener los bordes lo más limpios posible en cada tamaño, pero toda herramienta tiene límites cuando un diseño está recargado. Los símbolos simples y audaces con fuerte contraste sobreviven el viaje hasta los 16 píxeles; las ilustraciones complejas rara vez lo logran.

La privacidad es una de las principales razones por las que la gente prefiere este enfoque. Toda la conversión ocurre dentro de tu navegador mediante la API canvas de HTML5. Tu imagen nunca se sube, almacena ni envía a ningún sitio, lo que hace que la herramienta sea una buena opción para productos no publicados, logos de clientes y cualquier cosa que prefieras no tener en un servidor de terceros. Cierra la pestaña al terminar y todo rastro de tu subida desaparece.

También conviene ser claro sobre lo que la herramienta no hace. Genera iconos PNG, que es lo que prácticamente todas las plataformas modernas aceptan. No crea un archivo .ico, no empaqueta todo en un archivo zip ni genera un manifiesto de aplicación web por ti. En la práctica eso rara vez es un problema: los navegadores modernos usan felizmente favicons PNG desde hace años, y el formato .ico es en su mayoría una herencia del pasado. Descarga los tamaños que quieras y luego añade un par de etiquetas link a tu página.

Conectar los iconos a un sitio web es sencillo. En la cabecera de tu página añades una etiqueta link que apunte a tu favicon principal, por ejemplo un PNG de 32x32, más un enlace apple-touch-icon para iOS y, si tienes una aplicación web progresiva, entradas de 192x192 y 512x512 en tu archivo manifest.json. Sube los archivos a tu servidor, apunta las etiquetas hacia ellos y el icono aparecerá en las pestañas, los marcadores y las pantallas de inicio.

Piensa en las situaciones cotidianas donde esto aparece. Un blogger quiere un icono de sitio adecuado para WordPress y no quiere abrir Photoshop. Un desarrollador lanza una aplicación web y necesita un favicon además de los iconos PWA en la carpeta del proyecto. Una startup prepara una ficha de App Store y necesita un icono cuadrado de 1024x1024 que también funcione como pequeño lanzador. Un estudiante construye un proyecto de clase y quiere que se vea terminado. Todos pueden usar la misma herramienta en menos de un minuto.

Las decisiones de diseño importan más que la herramienta aquí. Mantén el favicon cerca de la forma más simple de tu logo, usa los colores de tu marca y evita texto que solo tenga sentido en tamaños grandes. Si tu icono tiene fondo transparente, recuerda que las pestañas del navegador vienen en temas claros y oscuros, así que pruébalo contra ambos. Si tiene fondo sólido, se verá consistente en todas partes sin esfuerzo adicional.

Una nota práctica más: los navegadores almacenan en caché los favicons de forma agresiva. Después de actualizar el icono de tu sitio, es posible que sigas viendo el antiguo durante un tiempo. Una actualización forzada o una comprobación rápida en una ventana de incógnito confirmará que el nuevo icono está en línea. Mantener el archivo pequeño también ayuda, ya que el favicon se solicita en cada carga de página y suele ser uno de los primeros archivos que se descargan.

No necesitas experiencia en diseño ni software instalado para usar esto. Funciona completamente en tu navegador, en Windows, macOS, Linux e incluso en un teléfono, y no hay cuenta que crear ni nada que pagar. Sube tantas imágenes como quieras, tan a menudo como quieras, y descarga solo los tamaños que necesitas. Es una de esas pequeñas utilidades que te ahorran silenciosamente una tarea sorprendentemente tediosa.