Publicar un sitio nuevo
Genera de una vez todos los iconos de una web corporativa a partir del logotipo.
Generador de favicon
Importa una imagen cuadrada: la herramienta genera favicon.ico, los PNG de 16 a 512 px, el icono de Apple y las etiquetas HTML para copiar.
- Portapapeles
- Exportar
Tus archivos se procesan localmente en el navegador y nunca se envían a nuestros servidores.
Elige preferiblemente una imagen cuadrada PNG, JPEG o WebP de hasta 25 MB.
Suelta tu archivo aquí
Tamaño recomendado: hasta 25 MB
¿Necesitas más opciones?
Reúne varias herramientas de edición en un mismo espacio, con tu archivo abierto y sus cambios en curso.
Abrir el editor completo¿Te ha resultado útil esta herramienta?
¿Cómo funciona esta herramienta?
El favicon es el pequeño icono que aparece en la pestaña del navegador, los marcadores, el historial y la pantalla de inicio de un móvil. Cada uso espera un tamaño concreto, de 16 px en una pestaña a 512 px para una aplicación web instalada. Este generador crea a partir de una sola imagen el archivo favicon.ico, los PNG de 16 a 512 px y las etiquetas HTML que hay que pegar en el <head> de tu sitio.
Importa una imagen PNG, JPEG o WebP de hasta 25 MB, mejor cuadrada y de al menos 512 × 512 px. Pulsa Generar favicons: la imagen se convierte primero a PNG y luego se reduce a seis tamaños cuadrados, 16, 32, 48, 180, 192 y 512 px.
Una imagen que no es cuadrada se reduce sin deformarse y se centra, con márgenes transparentes. Los archivos llevan los nombres que esperan navegadores y sistemas: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180 px), android-chrome-192x192.png y android-chrome-512x512.png.
El archivo favicon.ico reúne las versiones de 16, 32 y 48 px en un único contenedor ICO, que leen todos los navegadores actuales y Windows. Las etiquetas HTML recomendadas aparecen con un botón Copiar etiquetas, y Descargar los archivos guarda los siete archivos en tu dispositivo.
Cómo utilizar esta herramienta
Importa el logotipo
Elige una imagen cuadrada, mejor un PNG con fondo transparente o de color liso.
Genera los favicons
Pulsa Generar favicons y revisa la vista previa de cada tamaño, sobre todo 16 y 32 px.
Instálalos en el sitio
Descarga los archivos, colócalos en la raíz del sitio y pega las etiquetas HTML en el <head>.
Casos de uso
Sustituir un favicon borroso
Vuelve a crear tamaños nítidos desde un logotipo en alta resolución en lugar de ampliar un antiguo icono de 16 px.
Preparar una aplicación web
Obtén los iconos de 192 y 512 px para declararlos en el manifiesto de una PWA.
Ejemplos
Logotipo rectangular de 600 × 400 px
A 32 × 32 px, el logotipo se reduce con un factor de 32 ÷ 600 ≈ 0,053 y mide unos 32 × 21 px, centrado con una franja transparente de algo más de 5 px arriba y abajo. Un logotipo cuadrado ocuparía todo el icono.
Entrada
logo.png de 600 × 400 px, fondo transparenteResultado
7 archivos: favicon.ico (16, 32, 48 px) y 6 PNG cuadrados de 16 a 512 pxEtiquetas HTML para pegar
Las rutas empiezan por /: si colocas los archivos en una subcarpeta, cambia los valores href.
Entrada
Archivos colocados en la raíz del sitioResultado
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> y después los enlaces a favicon-32x32.png, favicon-16x16.png, apple-touch-icon.png y los dos iconos de AndroidConsejos y buenas prácticas
- Simplifica el logotipo para los tamaños pequeños: a 16 px, el texto y los detalles finos no se leen; mejor un símbolo o una inicial.
- Para el icono de Apple (180 px), usa una imagen con fondo sólido: iOS rellena la transparencia y redondea las esquinas por su cuenta.
- Después de publicar, vacía la caché o abre una ventana privada: los navegadores conservan mucho tiempo el favicon anterior.
- Puede que el navegador pida permiso para descargar varios archivos a la vez; acéptalo para obtener los siete archivos.
Fuentes y referencias
- WHATWG, HTML Living Standard — Link type icon (se abre en una pestaña nueva)Página en inglés
Preguntas frecuentes
¿Qué tamaños se generan?
16, 32 y 48 px para pestañas y accesos directos, 180 px para la pantalla de inicio de iOS, 192 y 512 px para Android y las aplicaciones web instaladas, y un favicon.ico con 16, 32 y 48 px.
¿Sigo necesitando un favicon.ico?
Sigue siendo útil: algunos navegadores, lectores de feeds y herramientas piden directamente /favicon.ico sin leer tus etiquetas HTML.
Mi imagen no es cuadrada, ¿se deforma?
No. Se reduce para caber entera en el cuadrado y se centra; las zonas vacías quedan transparentes. Recórtala antes si quieres que ocupe todo el icono.
¿La herramienta crea el archivo site.webmanifest?
No. Proporciona los iconos de 192 y 512 px; añádelos a la lista icons del manifiesto de tu aplicación web.
¿Puedo obtener un favicon SVG?
No, la herramienta genera imágenes PNG e ICO. Si tu logotipo existe en SVG, puedes declararlo además con <link rel="icon" type="image/svg+xml">.
¿Se sube mi logotipo a un servidor?
No. La conversión, los redimensionados y la creación del archivo ICO se hacen en tu navegador.
Herramientas relacionadas
Continúa con estas herramientas
Herramientas similares o complementarias a esta.
Herramientas similares
Recorta una foto en círculo, redondea sus esquinas y añade un borde, con fondo transparente.
Imágenes y diseño gráficoNuevaUsar esta herramienta
Quita un fondo blanco o de color liso y obtén un PNG transparente, sin subir tu imagen.
Imágenes y diseño gráficoNuevaUsar esta herramienta
Dibuja un marco sobre la imagen, fija una proporción (1:1, 4:5, 16:9…) y descarga la parte recortada.
Imágenes y diseño gráficoDestacadaUsar esta herramienta
También te puede interesar
GuíaFormatosPrincipiante
PNG, JPEG, WebP o AVIF: ¿qué formato elegir?
Elige el formato de imagen adecuado para una foto, una captura, un recurso transparente o una interfaz, sin sacrificar innecesariamente la calidad ni el rendimiento.
31 de agosto de 202625 min