Sin subida, 100% local, sin cuenta

Generador de favicons

Carga tu logo o icono y descarga todos los tamaños estándar de favicon como PNG. Incluye Apple Touch Icon e iconos PWA. Nada abandona tu dispositivo.

Cómo funciona Generador de favicons

El generador de favicons toma cualquier imagen que proporciones y la redimensiona a las dimensiones estándar de favicon usando la API drawImage de Canvas: 16x16, 32x32, 48x48, 180x180 (icono táctil de Apple), 192x192 (Android Chrome) y 512x512 (manifiesto PWA). Los seis tamaños se generan en tu navegador, junto con un favicon.ico multitamaño que agrupa las imágenes de 16x16, 32x32 y 48x48 en un único archivo heredado. Tu imagen fuente nunca sale de tu dispositivo.

Un conjunto completo de favicons cubre toda la gama de iconos de pestañas del navegador, marcadores, accesos directos a la pantalla de inicio y pantallas de presentación de PWA. Usar una imagen fuente de alta resolución (al menos 512x512 píxeles) da al algoritmo de reducción más detalle con el que trabajar. Las etiquetas HTML link que necesitas para referenciar cada archivo generado se muestran en un fragmento que puedes copiar directamente en el elemento head de tu página.

Escrito por Bastien Sulyan

Cómo usar Generador de favicons, paso a paso

  1. Arrastra tu imagen fuente al área de carga. Usa una imagen cuadrada de 512 px o más para mejores resultados.
  2. Previsualiza los seis tamaños generados en el panel de resultados.
  3. Descarga los seis archivos PNG y el favicon.ico desde el panel de resultados.
  4. Copia el fragmento HTML con las etiquetas link para todos los tamaños.
  5. Coloca los archivos PNG en la raíz de tu sitio y pega las etiquetas link en el head de tu página.

Casos de uso comunes

  • Un desarrollador configura un nuevo sitio web y necesita todos los tamaños de favicon generados a partir del logotipo de la marca sin una suscripción a una herramienta de diseño.
  • Un autor de PWA genera los iconos de 192x192 y 512x512 requeridos en el manifiesto de la aplicación web para la instalación en la pantalla de inicio.
  • Un bloguero renueva la identidad de su sitio y reemplaza el favicon predeterminado con un icono personalizado construido a partir de su logotipo.
  • Un freelancer produce rápidamente el conjunto completo de favicons para un proyecto de cliente sin esperar a instalar software de diseño.

Preguntas frecuentes

¿Qué formatos de imagen puedo usar como fuente?

Cualquier formato que el navegador pueda decodificar funciona como entrada: JPEG, PNG, WebP, GIF y SVG. Para fuentes SVG, el navegador rasteriza el vector a un Canvas antes de redimensionar, por lo que los PNG de salida son imágenes rasterizadas independientemente.

¿Por qué mi favicon se ve borroso en la pestaña del navegador?

Los tamaños de 16x16 y 32x32 son muy pequeños. Si la imagen fuente contiene detalles finos o líneas delgadas, no sobrevivirán a la reducción. Un diseño sencillo y llamativo con formas claras funciona mucho mejor en tamaños pequeños que una ilustración compleja.

¿La herramienta genera archivos ICO?

Sí. Además de los seis PNG, la herramienta ensambla un favicon.ico que reúne las imágenes de 16x16, 32x32 y 48x48 en un único archivo, el que todavía buscan en la raíz del sitio los navegadores Windows más antiguos y algunos rastreadores. Los navegadores modernos se conforman con los enlaces PNG, así que publicar ambos no cuesta nada y deja que cada cliente elija.

¿La imagen fuente se procesa en un servidor?

No. Las llamadas drawImage de Canvas que producen cada tamaño se ejecutan en tu pestaña del navegador. La imagen fuente se lee desde tu disco local y los seis PNG de salida se crean en memoria y se ofrecen como descargas. Ningún dato de archivo pasa por un servidor.

¿Qué tamaño debo usar para el icono táctil de Apple?

iOS e iPadOS usan el PNG de 180x180 píxeles referenciado por la etiqueta link apple-touch-icon. Este tamaño se usa cuando un usuario añade tu sitio a su pantalla de inicio en un dispositivo Apple. La herramienta genera este archivo junto con los otros tamaños.

¿Puedo usar una imagen rectangular como fuente?

Sí, pero la salida tendrá barras laterales o superiores para encajar en el canvas cuadrado. Para mejores resultados, comienza con una imagen cuadrada o recorta tu imagen fuente a un cuadrado antes de usar la herramienta.

Herramientas relacionadas

Mantén todo en local, explora herramientas complementarias.

Todas las herramientas de imagen