Generar favicon e iconos de app para tu sitio

Publicado el 2026-02-27 · 3 min de lectura

#Favicon #PWA #Design

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

Subir — Haz clic en “Elegir archivo” y selecciona tu logo (PNG o SVG, cuadrado, 512×512 o más).
Fondo — Elige un color de fondo si tu logo tiene transparencia; también se usa como theme-color en el snippet.
Tamaños — Marca los tamaños que necesites (favicon 16/32, Apple 180, PWA 192/512, etc.).
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.
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.