Generador de favicon
Convierte una imagen o una letra en el juego completo de archivos de favicon, con el HTML para usarlos.
Tus archivos nunca salen de tu dispositivo
Suelta una imagen aquí
PNG, JPEG, WebP, GIF, BMP o AVIF. O cambia abajo a un ícono de letras.
Se abre en este dispositivo. No se sube nada.
Una imagen a la vez, de hasta 50 MB y unos 100 megapíxeles. Los íconos de letras usan 1 o 2 caracteres.
Cómo crear un favicon
- Elige una imagen, o cambia a Letras y escribe uno o dos caracteres con tus colores.
- Si usas una imagen, elige un recorte cuadrado centrado o ajustar con margen. Revisa las vistas previas a 16, 32, 48 y 180 píxeles.
- Pulsa Crear archivos de favicon, descarga el .zip y pega el HTML en tus páginas.
Qué contiene un juego de favicon
Un favicon es el ícono pequeño que aparece en la pestaña del navegador, en la lista de marcadores o en un resultado de búsqueda. Los navegadores buscan varios archivos distintos: favicon.ico para uso general y navegadores antiguos, íconos PNG de 16 y 32 píxeles para las pestañas, un ícono Apple touch de 180 píxeles para la pantalla de inicio del iPhone y el iPad, e íconos de 192 y 512 píxeles para Android y las aplicaciones web instalables. Un pequeño archivo site.webmanifest enumera los íconos de Android. Este generador de favicon los crea todos de una vez.
Esta herramienta dibuja cada tamaño por separado a partir de tu original, así que los tamaños pequeños se reducen desde la imagen completa en lugar de ampliarse desde una diminuta. El archivo .ico se escribe como un contenedor de tres imágenes PNG de 16, 32 y 48 píxeles. Los íconos de letras se dibujan directamente en cada tamaño, así que los bordes quedan nítidos.
Consejos
- Usa formas simples y gruesas con mucho contraste. Los detalles finos desaparecen a 16 píxeles.
- ¿Quieres una imagen cuadrada a partir de una parte de una foto? Primero usa Recortar imagen con 1:1.
- ¿Necesitas otros tamaños? Redimensionar imagen te da cualquier ancho y alto.
Preguntas frecuentes
¿Se sube mi imagen?
No. Los íconos se dibujan en tu navegador, en tu dispositivo, y el zip también se crea ahí. No se envía nada a ningún servidor.
¿Qué archivos obtengo?
favicon.ico (versiones de 16, 32 y 48 píxeles), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 píxeles), android-chrome-192x192.png, android-chrome-512x512.png y site.webmanifest, en un solo .zip.
¿Dónde pongo los archivos?
En la carpeta raíz de tu sitio web, para que se sirvan en direcciones como /favicon.ico. Luego pega en el head de tus páginas el fragmento HTML que aparece después de crear los archivos.
¿Con qué imagen debo empezar?
Una imagen cuadrada de al menos 512 × 512 píxeles da el resultado más limpio, porque el ícono más grande mide 512 píxeles. Las formas simples aguantan mucho mejor la reducción a 16 píxeles que las detalladas. Revisa las vistas previas de 16 y 32 píxeles.
¿Qué diferencia hay entre recortar y ajustar con margen?
Recortar toma un cuadrado centrado de la imagen y descarta el resto. Ajustar con margen conserva toda la imagen, la centra con un pequeño margen y rellena el espacio con tu color de fondo o lo deja transparente.
¿El archivo .ico es válido?
Sí. Contiene tres imágenes codificadas en PNG de 16, 32 y 48 píxeles, que todos los navegadores actuales leen.