Acerca de esta herramienta
El favicon es el pequeño icono de un sitio que aparece en las pestañas y los marcadores del navegador. Esta herramienta reúne los tamaños más habituales para preparar un conjunto de iconos rápidamente.
Cómo usarla
- Selecciona o arrastra una imagen PNG, JPG/JPEG o WebP sin animación.
- Ajusta la imagen completa o recorta el centro, elige el fondo y configura un margen interior del 0 % al 30 % por lado.
- Genera los iconos y revisa las vistas de 16×16 y 32×32 a tamaño real y la simulación de pestaña.
- Descarga los iconos por separado o en ZIP y copia el HTML que corresponde a los archivos generados.
Tamaños disponibles
- favicon.ico contiene tres imágenes: 16×16, 32×32 y 48×48.
- También se crean favicon-16x16.png, favicon-32x32.png y favicon-48x48.png.
Consejos para crear iconos
- Ajustar la imagen completa mantiene sus proporciones y rellena el espacio libre con el fondo elegido. Recortar el centro toma el cuadrado central. Ninguna de las dos opciones deforma la imagen.
- El margen se calcula por cada lado del tamaño de salida. Con un 10 % de margen, la imagen ocupa aproximadamente el 80 % central del ancho y del alto.
- Para tamaños como 16×16 convienen siluetas sencillas y un contraste claro. Las fotos complejas o los textos pequeños pueden perder legibilidad; comprueba las vistas a tamaño real.
Admite PNG, JPG/JPEG y WebP sin animación. El límite es de 100 MiB por archivo, 40 millones de píxeles por imagen y 16.384 píxeles por lado. Las imágenes grandes pueden necesitar más tiempo y memoria.
Cómo usar los iconos en tu sitio
- Coloca los iconos descargados en tu sitio y añade el HTML generado a la sección head de la página. Las rutas parten de la raíz del sitio; si guardas los archivos en otra carpeta, ajusta las rutas.
- El HTML solo incluye los archivos que se han generado y puedes copiarlo directamente. Si necesitas iconos para la pantalla de inicio de Apple o tamaños para Android y PWA, usa las herramientas relacionadas.
- La pestaña simulada te ayuda a comprobar si el diseño se distingue en poco espacio. Su aspecto real puede variar entre navegadores.
Privacidad
Las imágenes, los emojis y los iconos generados se procesan únicamente en tu navegador y no se envían a ningún servidor.
La herramienta no guarda automáticamente las imágenes ni los resultados. Descarga los iconos que quieras conservar antes de borrar o salir de la página y guarda también el material original.
Preguntas frecuentes
¿Qué es favicon.ico?
Es un archivo de iconos habitual en los sitios web. Puede reunir varios tamaños para que el navegador elija el adecuado en pestañas, marcadores y otros lugares.
¿Qué tamaños de favicon conviene preparar?
Esta herramienta ofrece los tamaños habituales de 16×16, 32×32 y 48×48. Para tamaños mayores u otras combinaciones, usa el generador de favicones de varios tamaños.
¿Qué diferencia hay entre un favicon PNG y uno ICO?
Cada PNG tiene un único tamaño en píxeles, mientras que un ICO puede incluir varios. La descarga ofrece ambos formatos para que uses los que necesita tu sitio.
¿Dónde debo guardar los archivos del favicon?
Las referencias generadas apuntan por defecto a la raíz del sitio, por ejemplo /favicon.ico. Puedes usar otra carpeta, siempre que la ruta de la referencia coincida con la ubicación real del archivo.
¿Por qué no aparece de inmediato el nuevo icono?
El navegador puede conservar el favicon anterior en caché. Comprueba el archivo y su ruta y después prueba a recargar la página, borrar la caché correspondiente o abrir de nuevo la pestaña.