Generador de favicon
Sube tu logotipo y recibe en un solo ZIP los iconos que necesita tu web: un favicon.ico con imágenes de 16, 32 y 48 píxeles, un PNG de 48 píxeles para Google, un Apple Touch Icon con fondo opaco para el iPhone, iconos de 192 y 512 píxeles para Android, un icono maskable con la zona segura resuelta y un site.webmanifest. Si subes un SVG, también se incluye icon.svg. Verás las vistas previas de la pestaña, de Google y de la pantalla de inicio y copiarás el código <head> ya preparado; todo se ejecuta en tu navegador.
- Gratis y sin registro
- Tu archivo no sale de tu dispositivo
- Hasta 50 MB por archivo
Añade la imagen de tu logotipo o icono para empezar. Sirven PNG, SVG, JPG y WebP; para un resultado óptimo usa una imagen cuadrada de al menos 512 × 512 píxeles.
Tu archivo no sale de tu dispositivo; las imágenes se procesan en tu navegador. No se añaden datos EXIF ni de ubicación al resultado.
Cómo crear un favicon
Añade tu logotipo
Sube un logotipo en PNG, SVG, JPG o WebP. Para un resultado óptimo usa una imagen cuadrada de al menos 512 × 512 píxeles; un SVG también sirve.
Define el nombre, los colores y el margen
Escribe el nombre del sitio y el nombre corto, elige los colores del tema y del fondo y añade margen interior si lo necesitas. Las vistas previas muestran cómo quedará el icono en una pestaña, en Google y en la pantalla de inicio.
Descarga el paquete y colócalo
Descarga el ZIP, sube los archivos a la carpeta raíz de tu sitio y añade a tus páginas el fragmento <head> que se muestra.
¿Qué se conserva?
Se conserva
- Las proporciones de tu logotipo: una imagen no cuadrada se ajusta dentro de un cuadrado, nunca se estira
- La transparencia (en los iconos estándar; si eliges un color de fondo, se rellena)
- Si subes un SVG, icon.svg se incluye tal cual
Cambia
- Cada icono se vuelve a muestrear a su propio tamaño con alta calidad
- El Apple Touch Icon y el icono maskable siempre tienen fondo opaco: el color que elijas, o blanco si está seleccionado «Transparente»
- En el icono maskable, el contenido queda en la zona segura del 80 %
No se traslada
- No se genera ningún vector (SVG) a partir de un PNG o un JPG; icon.svg solo existe si la imagen original es un SVG
- Los datos EXIF y otros metadatos no se añaden a los iconos
Cuándo usarlo
Un juego de iconos completo para una web nueva
Un único favicon.ico ya no basta: la pantalla de inicio del iPhone, Android y los resultados de Google esperan archivos distintos. Con una sola subida los tienes todos, con los nombres y tamaños correctos.
Que tu icono aparezca en Google
Google muestra el icono de tu sitio en los resultados a partir de un archivo cuadrado cuyo tamaño sea múltiplo de 48 píxeles, y ese archivo debe poder rastrearse. El paquete incluye ese archivo y su enlace para el <head>.
Una web que se puede añadir como una aplicación (PWA)
Si quieres que tu web se pueda añadir a la pantalla de inicio, necesitas un manifiesto e iconos de 192 y 512 píxeles. El icono maskable evita que tu logotipo se recorte cuando Android corta el icono en círculo o en cuadrado redondeado.
Limitaciones que conviene conocer
- Para un resultado óptimo usa una imagen cuadrada de al menos 512 × 512 píxeles; los iconos grandes hechos a partir de originales más pequeños se ven borrosos.
- Las líneas finas y el texto pequeño no se leen en iconos de 16 y 32 píxeles; funcionan mejor los logotipos gruesos y de mucho contraste.
- El color del tema solo se aplica a la barra de direcciones de los navegadores móviles y depende de los ajustes del navegador.
- Google puede tardar días o incluso semanas en actualizar el icono en los resultados, y los navegadores también guardan los iconos en caché.
Preguntas frecuentes
¿Qué archivos de favicon necesita una web?
El planteamiento actual: favicon.ico en la carpeta raíz, un PNG de 48 píxeles para Google, icon.svg si es posible, un apple-touch-icon.png de 180 píxeles para el iPhone, iconos de 192 y 512 píxeles para Android y un site.webmanifest. El generador crea todos y te da los enlaces para el <head>.
¿Qué es un icono maskable?
Un icono maskable mantiene su contenido dentro de una zona segura y tiene el fondo totalmente relleno, de modo que Android pueda recortarlo en círculo, en cuadrado redondeado o en otra forma según el dispositivo. Aquí el contenido se coloca en el área central del 80 % de la imagen de 512 píxeles.
¿Por qué el Apple Touch Icon es opaco y de esquinas rectas?
iOS muestra las zonas transparentes en negro y redondea él mismo las esquinas. Por eso el icono se genera totalmente relleno y sin esquinas redondeadas, con el color de fondo que elijas (blanco si está seleccionado Transparente).
¿Por qué mi icono no aparece en los resultados de Google?
El archivo del icono no debe estar bloqueado por robots.txt, debe enlazarse desde el <head> de la página de inicio y debe ser un cuadrado cuyo tamaño sea múltiplo de 48 píxeles. Cuando lo corrijas, puedes pedir la reindexación de la página de inicio en Search Console; la actualización puede tardar aun así días o semanas.
¿Qué pasa si subo una imagen que no es cuadrada?
Los iconos se ajustan dentro de un cuadrado sin deformarse y dejan espacio vacío a los lados. Si quieres que el marco llene el cuadrado, recórtala antes a 1:1 con la herramienta de recorte.
¿Crea un favicon SVG a partir de un PNG?
No. Convertir píxeles en vector de forma automática podría cambiar sin aviso el aspecto del icono, así que icon.svg solo se incluye cuando subes tú mismo un SVG.
¿Es gratis esta herramienta?
Sí, es totalmente gratis. No hay cuenta, suscripción ni marca de agua.
¿Se suben mis archivos a algún sitio?
No. Las imágenes se procesan en tu navegador y no salen de tu dispositivo. No se añaden datos EXIF ni de ubicación al resultado.