Generador de favicon: todas las medidas que necesita una web
Entra una imagen; salen favicon.ico, apple-touch-icon, iconos del manifiesto y las etiquetas para pegar.
Arrastra tus archivos aquí
o haz clic para elegirlos desde tu dispositivoFormatos admitidos: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG
Un archivo por operaciónHasta 20 MB por archivo5 operaciones al díaQuita los límites con Pro✓ Funciona sin conexión
Tus archivos se quedan en tu dispositivo
Esta herramienta se ejecuta por completo en tu navegador. No se sube nada, no se guarda nada, e incluso puedes desconectarte de internet antes de empezar.
Ejemplo
Ejemplo: todos los favicons de una web a partir de un logo PNG de 1024 × 1024
El logo es un PNG de 1024 × 1024 píxeles: una hoja verde sencilla, centrada, sobre fondo transparente. Ajustes: «Imagen completa», margen 10 %, «Esquinas redondeadas», fondo blanco y, como nombre del sitio, «Huerto de Lucía».
- Con un margen del 10 %, la hoja ocupa el 80 % de cada icono: 12,8 de los 16 px del icono más pequeño y 409,6 de los 512 px del más grande.
- Pulsa «Crear favicons» y descarga el ZIP con los siete archivos.
- Súbelos a la raíz de la web y pega las cuatro líneas de favicon-tags.html en la cabecera (head) de cada página.
| Archivo | Medida | Para qué |
|---|---|---|
| favicon.ico | 16, 32 y 48 px | Pestañas, marcadores y quien pide /favicon.ico |
| favicon-96x96.png | 96 × 96 px | Resultados de búsqueda (múltiplo de 48) |
| apple-touch-icon.png | 180 × 180 px | Pantalla de inicio del iPhone y el iPad: cuadrado y opaco |
| web-app-manifest-192x192.png | 192 × 192 px | Android |
| web-app-manifest-512x512.png | 512 × 512 px | Android y web instalada como aplicación |
| site.webmanifest | – | Nombre, los dos iconos y el color #ffffff |
| favicon-tags.html | – | Las líneas para pegar en la cabecera |
Siete archivos con la hoja sobre un cuadrado blanco de esquinas redondeadas; el de Apple es un cuadrado blanco entero. No hay favicon.svg porque el logo era PNG, y en el manifiesto el nombre corto queda en «Huerto de Lu».
Cómo funciona
- Añade tu logo: mejor un SVG cuadrado; si no, un PNG o JPG de al menos 512 × 512 px.
- Elige cómo se coloca en el cuadrado —la imagen completa con un margen opcional, o rellenando el cuadrado—, además de la forma y el fondo.
- Pulsa «Crear favicons» y descárgalo todo junto en un ZIP.
- Pon los archivos en la raíz de tu web y pega las etiquetas de favicon-tags.html en el <head> de tus páginas.
Preguntas frecuentes
- ¿Qué medidas debe tener un favicon?
- Un favicon.ico reúne 16 × 16, 32 × 32 y 48 × 48 píxeles; los dispositivos de Apple usan un PNG de 180 × 180, y Android y las aplicaciones web, 192 × 192 y 512 × 512. Google muestra el icono en los resultados a 48 × 48 o un múltiplo, por eso se añade un PNG de 96 × 96. Este generador los crea todos a partir de una sola imagen.
- ¿Qué archivos obtengo y para qué sirve cada uno?
- favicon.ico reúne 16, 32 y 48 px en un solo archivo, para los navegadores y rastreadores que piden /favicon.ico directamente. favicon-96x96.png es para los resultados de búsqueda, donde Google quiere un múltiplo de 48 px. apple-touch-icon.png (180 px) es el icono de la pantalla de inicio del iPhone y el iPad. Los dos PNG web-app-manifest y site.webmanifest son para Android y las aplicaciones web instaladas. Si partes de un SVG, obtienes además favicon.svg, y favicon-tags.html contiene las líneas para el <head>.
- ¿Mejor partir de un SVG o de un PNG?
- De un SVG, si lo tienes. Así cada tamaño se dibuja desde el vector: el icono de 16 px se dibuja a 16 px en lugar de reducirse desde una imagen grande, y además obtienes favicon.svg, que prefieren los navegadores modernos. Con PNG o JPG, usa uno de al menos 512 × 512 px; un logo muy detallado no sobrevive a 16 px en ningún caso, y para eso están el margen y un símbolo más sencillo.
- ¿Por qué el icono de Apple sale cuadrado y con fondo?
- Porque el iPhone pinta de negro las zonas transparentes y redondea él mismo las esquinas. Por eso apple-touch-icon.png siempre es un cuadrado entero y opaco, con el fondo que elijas; si eliges «Transparente», con fondo blanco. Los demás archivos sí llevan la forma y la transparencia elegidas.
- ¿Qué pongo en «Nombre del sitio»?
- El nombre de tu web: va al archivo site.webmanifest, que usan Android y las webs instaladas como aplicación. Si tiene más de 12 caracteres, el nombre corto se queda con las palabras enteras que caben («Huerto de Lucía» queda en «Huerto de»), así que un nombre breve se ve mejor bajo el icono. Puedes dejarlo vacío.
- ¿Por qué Google muestra un globo en lugar de mi icono?
- Google tiene que poder rastrear el icono y la página de inicio que lo enlaza, y el icono debe ser cuadrado y con un lado múltiplo de 48 px; el archivo de 96 px de aquí está hecho para eso. Una vez publicados los archivos, los resultados de búsqueda pueden tardar días o semanas en reflejar el cambio.
- ¿Se sube mi logo?
- No. Cada archivo se dibuja en esta página con el canvas de tu navegador, y el ZIP también se arma aquí. No se envía nada a ningún servidor.
Herramientas relacionadas
• Redimensionar imagen Ajusta una o muchas imágenes a medidas exactas o elige un tamaño preparado para cada red social. ◩ Quitar el fondo de una imagen Personas, productos, ropa, comida o mascotas recortados automáticamente, sin que la imagen salga de tu dispositivo. ⇄ Convertir imagen Un único conversor para todos los formatos habituales, incluidos el HEIC del iPhone y el SVG, sin salir del navegador. • Recortar imagen en círculo Una foto de perfil redonda, transparente alrededor, sin subir la foto.