Generador de Favicon
NuevoTendencia 🔥Genera todos los tamaños de favicon desde una sola imagen
Cómo usar Generador de Favicon
- 1Upload a square image (PNG recommended)
- 2The tool generates all standard favicon sizes automatically
- 3Download individual sizes or a ZIP of all files
- 4Copy the HTML snippet to add favicons to your website
Acerca de Generador de Favicon
Upload a single image and generate all standard favicon sizes (16x16, 32x32, 48x48, 180x180, 192x192, 512x512) plus an ICO file, ready for use in any website.
Características principales de Generador de Favicon
- Genera seis tamaños estándar: 16x16, 32x32, 48x48, 96x96, 180x180 y 512x512
- Incluye el Apple Touch Icon 180x180 para marcadores en pantalla de inicio iOS
- Botón de descarga individual para cada tamaño
- Fragmento de etiqueta HTML link listo para usar para cada tamaño generado
- Salida PNG con transparencia preservada de la imagen fuente
- Generación instantánea en el navegador — no se requiere carga
- Funciona mejor con imágenes fuente cuadradas de 512x512 o más
- Copia con un clic para el bloque completo de fragmento HTML
Formatos compatibles
Formatos de entrada
Formatos de salida
A square source image at 512x512 pixels or larger is strongly recommended for sharp results at all sizes.
Ejemplos
Agregar favicon a un nuevo sitio web
Suba el logo, haga clic en Generar favicons, descargue todos los tamaños y pegue el fragmento HTML en el head de su documento.
Entrada
512x512 square logo PNG
Salida
Six PNG files (16 to 512px) plus HTML snippet
Generar Apple Touch Icon para PWA
Descargue solo el tamaño 180x180 para la etiqueta de enlace Apple Touch Icon en su manifiesto de aplicación web progresiva.
Entrada
New brand logo PNG
Salida
Fresh set of all standard favicon sizes
Generate Apple Touch Icon for PWA
Download just the 180x180 size for the Apple Touch Icon link tag in your Progressive Web App manifest.
Entrada
App icon PNG
Salida
180x180 Apple Touch Icon PNG
Casos de uso comunes
- Agregar un conjunto completo de favicons a un nuevo proyecto de sitio web
- Actualizar un favicon obsoleto con un logo de marca renovado
- Generar el Apple Touch Icon para marcadores en pantalla de inicio iOS
- Crear todos los tamaños de íconos requeridos para un manifiesto de PWA
- Proporcionar múltiples tamaños de favicon para mejor compatibilidad
- Garantizar coherencia de marca con favicon coincidente en todos los navegadores
Solución de problemas
El favicon aparece borroso en tamaños pequeños (16x16, 32x32)
Solución
Comience con una imagen fuente de al menos 512x512 píxeles. El algoritmo necesita suficiente detalle para producir un ícono pequeño nítido.
El favicon no aparece en la pestaña del navegador
Solución
Limpie la caché del navegador y recargue la página con fuerza. Los navegadores almacenan en caché los favicons agresivamente.
La imagen fuente no cuadrada aparece distorsionada
Solución
Recorte primero su imagen fuente a cuadrado usando la herramienta Crop Image, luego genere los favicons desde la versión cuadrada.
Preguntas frecuentes
What image size should I upload?
At least 512x512 pixels for best results.
What formats are generated?
PNG files for all sizes plus a multi-size ICO file.
¿Puedo generar un archivo .ico?
Actualmente la herramienta genera archivos PNG para todos los tamaños. La mayoría de los navegadores modernos aceptan favicons PNG. Para formato .ico, convierta el PNG 16x16 o 32x32 con la herramienta Convertidor de imagen.
¿Cómo uso los favicons generados en una app React o Next.js?
Coloque los archivos PNG en su carpeta public y agregue las etiquetas HTML link al head de su documento. Next.js tiene una API de metadata integrada que acepta rutas de favicon directamente.
How do I add the favicons to my website?
Download the generated PNG files and place them in your website root or an assets folder. Then paste the provided HTML link tag snippet into the head section of your HTML file.
Why is my favicon not showing after adding the HTML snippet?
Browsers cache favicons aggressively. After updating your site, perform a hard reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear the browser cache to see the new favicon.
Can I generate a .ico file?
Currently the tool generates PNG files for all sizes. Most modern browsers accept PNG favicons. For .ico format, convert the 16x16 or 32x32 PNG using the Image Converter tool.
How do I use the generated favicons in a React or Next.js app?
Place the PNG files in your public folder and add the HTML link tags to your document head or app layout. Next.js has a built-in metadata API that accepts favicon paths directly.