Generador de favicons
Todos los iconos de un sitio
Origen
Opciones
En iPhone, las zonas transparentes del icono de la pantalla de inicio se ven en negro: elige un fondo para una imagen transparente.
Manifiesto web
Vista previa y archivos
Los iconos se dibujan en tu navegador: la imagen no se envía a ningún sitio.
Código HTML
Pégalo en el <head> de tus páginas y coloca los archivos del ZIP en la raíz del sitio.
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#b91c1c">
site.webmanifest
{
"name": "Mon site",
"short_name": "Site",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#b91c1c",
"background_color": "#ffffff",
"display": "standalone"
}
Acerca de la herramienta
Este generador crea todos los iconos que necesita un sitio web a partir de una sola fuente. Puedes partir de una imagen PNG, JPEG, SVG o WebP de hasta 20 MB, o de una o dos letras sobre un cuadrado de color con esquinas redondeadas ajustables. El margen interior y el fondo, transparente o de color, se aplican a todos los tamaños.
Obtienes un favicon.ico con imágenes de 16, 32 y 48 px, archivos PNG de 16 y 32 px, un apple-touch-icon de 180 px, iconos Android de 192 y 512 px y un archivo site.webmanifest con el nombre del sitio y sus colores. La vista previa muestra el icono en una pestaña clara y otra oscura y en la pantalla de inicio de un móvil, y las etiquetas link en HTML están listas para copiar.
Cómo usarla
- En «Origen», elige «Letras» y ajusta colores y redondeo, o «Imagen importada» y pulsa «Elegir una imagen (PNG, JPEG, SVG, WebP)».
- En «Opciones», ajusta el «Margen interior» y desmarca «Fondo transparente» si quieres un «Color de fondo».
- Completa el «Manifiesto web»: «Nombre del sitio», «Nombre corto», «Color del tema» y «Color de fondo de la aplicación».
- Revisa la «Vista previa y archivos» y pulsa «Descargar todo (ZIP)».
- Pulsa «Copiar el HTML» y pega las etiquetas en el head de tus páginas.
Preguntas frecuentes
¿Qué archivos incluye el ZIP?
favicon.ico (16, 32 y 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png de 180 px, android-chrome-192x192.png, android-chrome-512x512.png y site.webmanifest. Colócalos en la raíz del sitio, porque el HTML generado apunta a esas rutas.
¿Se envía mi imagen a un servidor?
No. Los iconos se dibujan en un canvas dentro de tu navegador, y el archivo ICO y el ZIP se generan ahí mismo. La imagen importada no se envía a ningún sitio y tampoco se guarda entre visitas.
¿Por qué mi icono sale con fondo negro en iPhone?
iOS muestra en negro las zonas transparentes del icono de la pantalla de inicio. Si tu imagen tiene transparencia, desmarca «Fondo transparente» y elige un color de fondo: se aplicará a todos los tamaños generados.
¿Qué imagen de partida da mejor resultado?
Una imagen cuadrada de al menos 512 px, o un SVG, ya que el icono más grande que se genera mide 512 px. Una imagen rectangular se centra sin deformarse. Los detalles finos desaparecen a 16 px, así que un logotipo sencillo o unas iniciales se leen mejor.