Inicio / Diseño / Generador de favicon e iconos de app
Iconos y marca

Generador de favicon e iconos de app

Sube un logo, previsualiza iconos en varios tamaños, descarga PNG y copia el snippet HTML para tu sitio o PWA.

Ningún archivo elegido
Usa un PNG o SVG cuadrado con buena resolución (mínimo 512×512 recomendado).
Se usa como relleno y como theme-color en el snippet HTML sugerido.
Elige qué tamaños generar. Haz clic en un icono o su etiqueta para descargar ese PNG.

Vista previa de iconos

Haz clic en cualquier icono o etiqueta para descargar ese tamaño en PNG. Guarda los archivos en tu proyecto (p. ej. /assets/icons).

Este generador funciona solo en tu navegador. Recuerda subir los PNG descargados y actualizar las rutas del snippet según tu proyecto.

Cualquier proyecto serio necesita un favicon claro en las pestañas del navegador, un icono Apple touch para iOS e iconos de app para Android y PWA. Esta herramienta te ayuda a generarlos a partir de una sola imagen: sube un logo cuadrado, elige tamaños, descarga los PNG y copia el snippet HTML en tu sitio.

Por qué importan el favicon y los iconos de app

  • Favicon — el icono pequeño en la pestaña del navegador y en los marcadores. Sin él, la pestaña se ve genérica y tu marca se reconoce menos.
  • Icono Apple touch — se usa cuando el usuario añade tu sitio a la pantalla de inicio en iPhone e iPad. El tamaño correcto (p. ej. 180×180) asegura un icono nítido.
  • Iconos PWA / Android — necesarios para “Añadir a pantalla de inicio” e instalación. Tamaños típicos: 192×192 y 512×512.

Una sola imagen cuadrada puede servir para todo. El generador se ejecuta por completo en tu navegador: tu logo no sale de tu dispositivo.

Imagen de origen recomendada

Usa una imagen cuadrada (PNG o SVG) de al menos 512×512 píxeles. Más resolución está bien; la herramienta escalará. Evita imágenes muy pequeñas o deformadas para que los iconos se vean nítidos en pantallas de alta densidad.

Inicio rápido con la herramienta

  1. Subir — Haz clic en “Elegir archivo” y selecciona tu logo (PNG o SVG, cuadrado, 512×512 o más).
  2. Fondo — Elige un color de fondo si tu logo tiene transparencia; también se usa como theme-color en el snippet.
  3. Tamaños — Marca los tamaños que necesites (favicon 16/32, Apple 180, PWA 192/512, etc.).
  4. Descargar — Haz clic en cualquier vista previa para descargar ese tamaño en PNG, o “Descargar todo en ZIP” para obtener todos de una vez.
  5. Snippet — Copia el bloque HTML y pégalo en el <head> de tu sitio. Sube los PNG a tu servidor (p. ej. /assets/icons/) y ajusta las rutas en el snippet si hace falta.

Dónde colocar los archivos

Una estructura habitual:

  • Pon los PNG de favicon e iconos en una carpeta como /assets/icons/ o en la raíz.
  • Actualiza el snippet para que los href apunten a esas rutas (p. ej. /assets/icons/favicon-32x32.png).
  • Añade site.webmanifest para PWA con las mismas rutas a los iconos 192×192 y 512×512.

Resumen

El generador de favicon e iconos de app te permite pasar de un logo a todos los tamaños necesarios y un snippet listo para pegar en <head>. Usa una imagen cuadrada en buena resolución, descarga los PNG e inserta el snippet en tu proyecto.

  1. Sube una imagen cuadrada (PNG o SVG, mínimo 512×512 recomendado).
  2. Elige el color de fondo y qué tamaños generar (favicon, Apple touch, PWA).
  3. Haz clic en una vista previa para descargar cada PNG y copia el snippet HTML en el <head> de tu sitio.

Preguntas frecuentes

Mínimo 512×512 píxeles para mejor calidad. Las imágenes cuadradas funcionan mejor; la herramienta escala y centra tu logo.

Favicon estándar: 16×16 y 32×32. Apple: 180×180. PWA: 192×192 y 512×512. El snippet que generamos los incluye.

No. Todo se ejecuta en tu navegador. Tu logo no sale de tu dispositivo.

Herramientas relacionadas

Espaciador de subtítulos Comprobador de meta título y descripción Combinar PDF Generador de Códigos QR con Estilo

Esta herramienta se proporciona únicamente para uso personal y educativo. No alojamos ni almacenamos ningún contenido o archivo multimedia del usuario en nuestros servidores. Todo el procesamiento ocurre localmente en su navegador. No estamos afiliados ni respaldados por ninguna red social, plataforma o empresa mencionada. Use este servicio bajo su propia responsabilidad y de acuerdo con los términos de servicio de cada plataforma.