FreeToolsForWeb
AyudaInvítame a un café

Generador de favicon: de una imagen a un paquete de favicon completo

Convierte cualquier logotipo en un paquete de favicon completo (favicon.ico, todos los tamaños PNG, icono táctil de Apple y webmanifest) con un clic.

Suelta aquí tu logotipo o haz clic para elegirlo

PNG, JPG o WebP: lo ideal es una imagen cuadrada de 512×512 o más. Todo se genera en tu navegador; tu logotipo nunca sale de tu dispositivo.

¿Encontraste un problema o algo que podría mejorar? Leemos todos los mensajes y lo arreglamos rápido.

Sube tu logotipo una vez y descarga un paquete de favicon completo de 27 archivos en un único ZIP: un favicon.ico real (con 16/32/48 incrustados), PNG de favicon, los nueve tamaños de icono táctil de Apple (57–180px), seis iconos de Android (36–192px) con manifest.json y los iconos de mosaico de Microsoft (70–310px) con browserconfig.xml, además de las etiquetas HTML exactas para pegar en el head de tu sitio.

Como todas las herramientas de este sitio, todo el proceso se ejecuta en tu navegador: tu logotipo se redimensiona, se empaqueta en formato ICO y se comprime en local. No se sube nada, así que no hay colas, ni marcas de agua, ni dudas de privacidad.

Cómo usarla

  1. Suelta tu logotipo: un PNG cuadrado de 512×512 o más da los resultados más nítidos (las imágenes que no son cuadradas se recortan desde el centro).
  2. Revisa la vista previa al píxel: así se verá exactamente tu icono en una pestaña del navegador a 16 y 32 px. Si se ve emborronado, simplifica el logotipo y vuelve a probar.
  3. Descarga el paquete completo en ZIP o coge los archivos sueltos.
  4. Descomprímelo en la carpeta raíz de tu sitio y pega las etiquetas HTML que te damos en tu <head>.

Preguntas frecuentes

¿Qué tamaños de favicon necesita un sitio web en 2026?

El mínimo estricto es favicon.ico más PNG de 16/32 px y un icono táctil de Apple de 180×180. Para una compatibilidad total con todos los navegadores, generaciones de iOS, lanzadores de Android y mosaicos de Windows, el juego completo clásico va de 16 px a 310 px en 27 archivos, que es justo lo que empaqueta este generador, junto con el manifest.json y el browserconfig.xml que los referencian.

¿El favicon.ico es un archivo ICO de verdad?

Sí: es un contenedor ICO auténtico con tres entradas codificadas en PNG (16, 32 y 48 píxeles), el formato que admiten todos los navegadores modernos y todas las versiones de Windows. No es un PNG con otro nombre.

¿Se sube mi logotipo a un servidor?

No. El redimensionado, el empaquetado ICO y la creación del ZIP se hacen en tu navegador con la API de canvas. Tu logotipo nunca sale de tu dispositivo, algo importante si es una marca aún no lanzada o un trabajo para un cliente.

¿Por qué mi favicon se ve borroso a 16 px?

Dieciséis píxeles es muy poco: los logotipos con detalle se convierten en un borrón a ese tamaño. Si la vista previa se ve emborronada, usa una marca simplificada: solo el símbolo del icono, una única letra o una forma contundente. Las grandes marcas tienen versiones simplificadas de su logotipo para el favicon precisamente por eso.

¿Dónde pongo los archivos del favicon en mi sitio web?

Ponlos en la raíz de tu sitio (para que estén accesibles en /favicon.ico, /apple-touch-icon.png, etc.) y añade las etiquetas link que te damos dentro de tu <head>. En la mayoría de las plataformas eso significa la carpeta public o static; en WordPress, usa Apariencia → Personalizar → Identidad del sitio o coloca los archivos a través de tu tema.

Qué incluye el paquete

• favicon.ico + PNG favicon-16/32/96: pestañas del navegador y marcadores; los navegadores piden /favicon.ico automáticamente aunque no haya etiqueta HTML.

• De apple-icon-57x57 a 180x180 (9 tamaños): el icono de la pantalla de inicio de todas las generaciones de iPhone y iPad, más apple-icon-precomposed.png para iOS antiguo.

• De android-icon-36x36 a 192x192 (6 densidades): iconos del lanzador de Android, referenciados con indicaciones de densidad desde manifest.json.

• ms-icon-70/144/150/310 + browserconfig.xml: los mosaicos del menú Inicio de Windows y el archivo de configuración que los asigna.

• manifest.json: indica a las instalaciones en Android/PWA el nombre de tu sitio, sus colores y sus iconos. Ábrelo y rellena los campos de nombre después de descargarlo.

Extrae todo en el directorio raíz de tu sitio para que las rutas del fragmento HTML funcionen, pega el fragmento en tu <head> y listo.

Consejos de diseño para un favicon que se reconozca de verdad

Pruébalo a 16 px antes de darlo por bueno: la vista previa de arriba dice la verdad. Elige una única forma contundente o una letra en lugar de un logotipo completo con texto; los logotipos de texto se vuelven ilegibles por debajo de 48 px. Mantén un contraste alto tanto con los temas claros como con los oscuros del navegador (un círculo o un cuadrado redondeado de fondo sutil ayuda a los iconos de línea fina). Y conserva el mismo favicon durante años: es como los visitantes que vuelven encuentran tu pestaña entre otras veinte.

Herramientas gratis relacionadas

  • Conversor de imágenes — Convierte entre AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP y SVG. La mayoría de las conversiones no salen de tu navegador.
  • Recortar imágenes — Recorta imágenes a cualquier tamaño o relación de aspecto en tu navegador: cuadrado, 16:9, 4:3 o libre.