Generador de Favicon
Genera todos los tamaños de favicon que necesita un sitio web a partir de una sola imagen, incluido un archivo ICO multirresolución. Los navegadores, los marcadores, las pantallas de inicio del móvil y las barras de pestañas piden tamaños distintos, y aquí se genera el conjunto completo de una vez. Es gratis, no requiere cuenta y no añade ninguna marca de agua a tu resultado.
Generador de Favicon
Añade tus archivos. Los ajustes recomendados ya están listos para procesar con un clic.
PDF, Word, imágenes, audio, vídeo, archivos comprimidos y más
Hasta 100 archivos · 250 MB · Sin cuenta- 1Añadir archivos
- 2Elige una acción
- 3Descarga o sigue trabajando
Cuándo necesitas esto
Cómo funciona
La imagen se centra en un cuadrado transparente, nunca se recorta, y se remuestrea a cada tamaño estándar; un origen pequeño se amplía para que se generen igualmente todos los tamaños. El Apple touch icon lleva detrás el color de tu tema, porque iOS convierte la transparencia en negro. Los iconos PNG, un favicon.ico multirresolución, el manifiesto web y las etiquetas para pegar se entregan juntos en un ZIP.
A 16 × 16 píxeles el detalle desaparece. Los iconos diseñados como marcas simplificadas se leen mucho mejor que un logotipo detallado o una fotografía reducida.
Qué contiene el ZIP
| Archivo | Tamaño | Lo usa |
|---|---|---|
| favicon.ico | 16, 32, 48 y 64 px | Pestañas y marcadores del navegador, y todo lo que pide /favicon.ico directamente |
| favicon-16x16.png, favicon-32x32.png | 16 y 32 px | Pestañas del navegador, mediante las etiquetas de head-snippet.html |
| favicon-48x48.png | 48 px | Un PNG de reserva para un CMS o herramienta que lo pida en ese tamaño |
| apple-touch-icon.png | 180 px | Pantallas de inicio de iPhone y iPad |
| android-chrome-192x192.png, android-chrome-512x512.png | 192 y 512 px | Pantallas de inicio de Android y apps web instalables, mediante site.webmanifest |
| site.webmanifest | - | El nombre del sitio, el color del tema y los iconos de Android |
| head-snippet.html | - | Las etiquetas exactas que hay que pegar en el <head> de tus páginas |
Cómo instalar el conjunto
- Sube todos los archivos a la raíz de tu sitio, para que https://tusitio.com/favicon.ico abra el icono.
- Pega el contenido de head-snippet.html dentro del <head> de cada página, o una sola vez en la plantilla del sitio.
- El nombre del sitio y el color del tema que indiques se escriben en site.webmanifest y en la etiqueta theme-color.
- Los navegadores guardan los favicons en caché con fuerza. Comprueba el icono nuevo en una ventana privada antes de pensar que no ha funcionado.
Cómo conseguir un resultado nítido
- Una imagen ancha o alta se encaja dentro del cuadrado con espacio transparente alrededor, nunca se recorta. Recórtala antes al símbolo si quieres que la marca llene el icono.
- Parte de al menos 512 × 512 px, el tamaño del icono más grande del conjunto. Un origen más pequeño recibe igualmente todos los tamaños, ampliado.
- iOS muestra en negro las zonas transparentes de un icono de pantalla de inicio, así que apple-touch-icon.png se rellena con el color de tu tema; los demás iconos conservan la transparencia.
- Para un icono de aplicación de Windows con tamaños de 128 y 256 px, usa el Convertidor de Imagen a ICO; este conjunto está pensado para sitios web.
Preguntas frecuentes
¿Qué imagen de origen debería usar?
Una imagen cuadrada, de 512 × 512 como mínimo, con una forma sencilla y rotunda. El detalle fino y el texto pequeño desaparecen a tamaño de favicon.
¿Sigo necesitando un archivo ICO?
Continúa siendo la opción más compatible, sobre todo con los navegadores antiguos, así que el ICO se genera junto con los tamaños PNG.
¿Cómo hago un favicon.ico a partir de un PNG o JPG?
Añade la imagen y descarga el ZIP. El favicon.ico que contiene incluye versiones de 16, 32, 48 y 64 px, junto con iconos PNG para navegadores, iPhone y Android, el manifiesto web y las etiquetas para pegar en tu página.
Mi logo es ancho. ¿Se cortará?
No. Una imagen ancha o alta se encaja dentro del cuadrado con espacio transparente alrededor, así que no se pierde ninguna letra de un logotipo de texto. Para un icono más contundente, recorta antes el logo a su símbolo.
¿Se conserva la transparencia?
Sí, en favicon.ico y en los iconos PNG, así que el icono queda bien en barras de pestañas claras y oscuras. La excepción es el Apple touch icon: iOS mostraría en negro sus zonas transparentes, así que se rellena con el color de tu tema.
Herramientas gratuitas relacionadas
Abre un archivo .ico, mira cada tamaño que contiene, guárdalo como PNG y añade o quita tamaños.
Convierte imágenes PNG, JPG o WebP en archivos de icono ICO multitamaño para Windows.
Cambia el tamaño de las imágenes por píxeles o porcentaje manteniendo la proporción.
Redondea las esquinas de una foto y descárgala en PNG o WebP transparente. Esquinas redondeadas, squircle o círculo, con vista previa. Gratis, sin cuenta.
Empaqueta varias imágenes en una sola sprite sheet PNG con transparencia y obtén un mapa JSON con la posición y el tamaño de cada una. Gratis.