Generador de favicon
Convierte cualquier imagen (idealmente cuadrada) en un juego completo de favicons para tu sitio: un favicon.ico multi-resolución (16, 32 y 48 px), los PNG para navegadores modernos (16, 32, 192 y 512 px), el apple-touch-icon de 180 px y el fragmento HTML listo para pegar en el <head>. Descárgalo todo en un ZIP. Elige si ajustar la imagen con relleno o rellenar el cuadrado recortando al centro, y un color de fondo o transparencia. Todo ocurre en tu navegador: tu imagen no se sube a ningún servidor.
Suelta tu imagen aquí
o haz clic para elegirla
PNG · JPG · WEBP · SVG · mejor 512×512
Sube una imagen (mejor cuadrada) para generar los iconos.
Iconos generados
Añádelo al <head> de tu web
Sube los archivos a la raíz de tu sitio y pega este código.
Cómo crear tu favicon
- Arrastra una imagen o haz clic para elegirla (mejor cuadrada y de al menos 512 px).
- Elige si ajustarla con relleno o rellenar el cuadrado recortando al centro.
- Selecciona un color de fondo o déjalo transparente.
- Pulsa «Generar iconos» y revisa la vista previa de cada tamaño.
- Descarga cada icono o el ZIP con todo, y copia el fragmento HTML en el <head> de tu web.
Preguntas frecuentes
¿Qué es un favicon?
Es el pequeño icono que aparece en la pestaña del navegador, en los marcadores y en el historial. Ayuda a identificar tu sitio de un vistazo y refuerza tu marca.
¿Qué archivos genera esta herramienta?
Un favicon.ico multi-resolución (con 16, 32 y 48 px dentro), iconos PNG de 16, 32, 192 y 512 px, un apple-touch-icon de 180 px para iOS, y un fragmento HTML con las etiquetas <link> correspondientes. Todo se puede descargar junto en un ZIP.
¿Qué tamaño debe tener mi imagen?
Lo ideal es una imagen cuadrada de al menos 512×512 px para que los tamaños grandes se vean nítidos. Si no es cuadrada, elige «Ajustar» (añade relleno) o «Rellenar» (recorta al centro).
¿Cuál es la diferencia entre .ico y .png?
El .ico es el formato clásico que entienden todos los navegadores (incluidos los antiguos) y puede contener varios tamaños en un solo archivo. Los .png son para navegadores modernos y usos concretos, como el apple-touch-icon. Usar ambos da la máxima compatibilidad; por eso el fragmento HTML los incluye.
¿Dónde coloco los archivos y el código?
Sube los archivos a la raíz de tu sitio (la misma carpeta que tu index) y pega el fragmento HTML dentro de la etiqueta <head> de tus páginas. Si los colocas en otra ruta, ajusta los href.
¿Puedo usar transparencia?
Sí. Deja el fondo en «Transparente» y los PNG conservarán el canal alfa. Ten en cuenta que algunos contextos (como ciertos iconos de iOS) se ven mejor con un fondo sólido; en ese caso, elige un color.
¿Se sube mi imagen a algún servidor?
No. Los iconos se generan en tu navegador con la API Canvas; tu imagen no sale de tu dispositivo y la herramienta funciona sin conexión una vez cargada.
¿Admite SVG como entrada?
Si tu navegador puede mostrar el SVG, se rasteriza a los tamaños indicados. Para logos vectoriales suele dar muy buen resultado, porque se escala sin perder nitidez.