Generador de favicons
Sube un logo cuadrado y obtén todos los iconos que necesita un sitio moderno: favicon.ico, favicons PNG, el Apple touch icon, iconos de Android y PWA, un manifest web y las etiquetas para pegar en tu página. Todo se crea en tu navegador.
Se ejecuta en tu navegador: no se sube nada.
Leyendo…
Cargado: ·
Ajustes
Donde subirás los archivos, por ejemplo / o /icons/.
Se usa en el Apple touch icon y en el manifest.
Archivos
-
·
HTML para el <head>
Copiadosite.webmanifest
CopiadoCómo se usa
- Suelta un PNG, SVG, JPEG o WebP cuadrado (al menos 512×512 px si es de mapa de bits).
- Indica el nombre de la app y los colores si quieres un manifest web, y la carpeta donde pondrás los iconos.
- Descarga el ZIP, sube los archivos a esa carpeta y pega el fragmento en el <head> de tus páginas.
Preguntas frecuentes
¿Se sube mi logo?
No. Los iconos se dibujan con el canvas de tu navegador y se comprimen en tu dispositivo.
¿Qué tamaño debe tener la imagen original?
Cuadrada y de al menos 512×512 px, o un SVG. Una imagen que no sea cuadrada se centra y se muestra entera, con espacio vacío alrededor.
¿Qué incluye el paquete?
favicon.ico con imágenes de 16, 32 y 48 px, favicon-16x16.png y favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png y 512x512.png, site.webmanifest, y favicon.svg cuando partes de un SVG.
¿Por qué el Apple touch icon tiene fondo?
iOS rellena de negro las zonas transparentes, así que este icono se dibuja sobre el color de fondo que elijas. Los demás iconos siguen siendo transparentes.
¿Sigo necesitando favicon.ico?
Sí, ponlo en la raíz del sitio: algunos navegadores, lectores de feeds y rastreadores piden /favicon.ico sin leer tu HTML.
¿Qué hace el margen?
Deja un espacio alrededor del logo, lo que ayuda en los iconos que el sistema operativo redondea o recorta.