Generador de favicons

Un favicon (abreviatura de 'favorite icon' o icono favorito) es el pequeño icono cuadrado que el navegador muestra junto al título de una página — en la pestaña del navegador, la barra de marcadores, el historial y a veces en los resultados de búsqueda. Normalmente se muestra a 16×16 o 32×32 píxeles y se ubica en la raíz de tu sitio como favicon.ico. Los sitios modernos también añaden un favicon.svg, un Apple touch icon e iconos PWA para pantallas de inicio. Un favicon reconocible mejora las tasas de clics en marcadores y resultados de búsqueda.

Empieza con 16×16 y 32×32 — los dos tamaños que los navegadores muestran en pestañas y marcadores — incluidos juntos en un único favicon.ico. Para cobertura completa añade también 48×48 (usado por Windows), un apple-touch-icon de 180×180 para iOS, y PNG de 192×192 y 512×512 para Android y pantallas de inicio PWA. Este generador produce todos estos tamaños a la vez desde una sola fuente, por lo que nunca necesitas cambiar el tamaño manualmente ni usar múltiples herramientas.

Elige una fuente — sube una imagen (PNG, JPG, SVG o WebP), escribe una a tres letras, o pega un emoji — luego elige un color de fondo, forma (cuadrado, redondeado o círculo) y relleno. La herramienta renderiza todos los tamaños de favicon en un canvas, empaqueta 16/32/48 en un favicon.ico, y te entrega un ZIP con todos los archivos más el fragmento HTML para pegar en tu <code>&lt;head&gt;</code>. Todo el proceso lleva menos de un minuto y no requiere software de diseño.

Sí — porque nada se sube realmente. Cada paso se ejecuta en tu navegador usando un <code>&lt;canvas&gt;</code> HTML y JavaScript: tu imagen se lee localmente, se redimensiona, se codifica en PNG e ICO, y se comprime en ZIP en tu dispositivo. Ningún archivo se envía jamás a un servidor, a diferencia de herramientas como favicon.io y RealFaviconGenerator.net que procesan tu imagen en la nube. Tu logotipo nunca sale de tu ordenador — importante si trabajas en un proyecto de cliente o en un producto no publicado.

Casi siempre es la caché del navegador. Los navegadores cachean los favicons de forma agresiva, así que haz una recarga forzada (Ctrl+F5), abre la URL del icono directamente (tusitio.com/favicon.ico) para confirmar que carga, o prueba en una ventana privada. También verifica que los archivos estén en la raíz de tu sitio, que las rutas en tus etiquetas <code>&lt;link&gt;</code> sean correctas (una barra inicial importa), y que hayas subido todos los tamaños. Los nuevos favicons pueden tardar un tiempo en actualizarse en marcadores y resultados de búsqueda — espera unas horas después de desplegar.

Sí — la API canvas y la descarga de archivos funcionan en Safari de iOS, Chrome para Android e Internet de Samsung. Puedes subir una foto desde tu carrete de cámara, escribir una letra, o pegar un emoji, y luego descargar el ZIP completo directamente en tu teléfono. Es útil para prototipar rápidamente un favicon cuando estás lejos de tu escritorio. El diseño se adapta a pantallas pequeñas, por lo que la herramienta es cómoda de usar a 375px.

Los iconos maskable (192×192 y 512×512 PNG listados en site.webmanifest) son los que usan Android y las PWA instaladas. Un icono maskable mantiene su contenido importante dentro de una zona segura central — aproximadamente el 80% del icono — para que siga viéndose bien cuando el sistema lo recorta en círculo, squircle o cuadrado redondeado. Este generador añade automáticamente ese relleno de zona segura a los iconos de 192 y 512 y los marca con <code>purpose: maskable</code>. No necesitas calcular manualmente el área segura.