Generador de favicons
Convierte una sola imagen en un conjunto completo de favicons —favicon.ico, iconos PNG, icono Apple touch, iconos de Android Chrome y un manifiesto de aplicación web— por completo en tu navegador. Sube un logo o una imagen cuadrada, ajusta el fondo, el relleno y las esquinas redondeadas, y luego copia el HTML listo para pegar.
- Genera favicon.ico más iconos PNG de 16, 32, 48, 180, 192 y 512 px en un solo paso
- Suelta PNG, JPG, WebP, SVG o GIF y previsualiza a los tamaños reales de favicon
- Define un color de fondo, relleno y esquinas redondeadas con vista previa en vivo
- Produce un site.webmanifest con nombre de la app, nombre corto y color de tema
- Copia el fragmento HTML <link> o descarga todo en un único ZIP
Arrastra una imagen aquí, o haz clic para elegir un archivo
Una imagen cuadrada de 512×512 o mayor da los iconos más nítidos.
Se admiten PNG, JPG, WebP, SVG y GIF.
Estos campos solo rellenan el site.webmanifest, que se usa cuando tu sitio se instala como una app (PWA). No cambian las imágenes de los iconos.
Resumen
Una imagen de origen se convierte en cada icono que se espera que sirva un sitio moderno, junto con el marcado que los conecta.
- 01
Todos los tamaños que piden los navegadores
Genera 16 px (pestaña y marcador), 32 px (pestañas de alta densidad y la barra de tareas de Windows), 48 px (iconos de sitio de Windows), 180 px (pantalla de inicio de iOS) y 192 / 512 px (instalación de Android y PWA).
- 02
favicon.ico multiframe
Los navegadores siguen solicitando /favicon.ico por defecto. El .ico generado empaqueta fotogramas de 16, 32 y 48 px en un solo archivo, para que el navegador elija el correcto en lugar de escalar un único mapa de bits.
- 03
Fondo, relleno y esquinas
Mantén la transparencia o rellena con un color sólido, añade relleno para que la marca respire dentro de las máscaras de Android e iOS, y redondea las esquinas: cada cambio se vuelve a renderizar al instante en todos los tamaños.
- 04
Manifiesto de app web instalable
Escribe un site.webmanifest válido con name, short_name, theme_color y las entradas de iconos de 192 / 512 px que Chrome y Android usan para el aviso de instalación de «Añadir a la pantalla de inicio» y la pantalla de bienvenida.
- 05
Marcado que coincide con los archivos
Genera exactamente las etiquetas <link rel="icon">, apple-touch-icon y manifest: los nombres de archivo ya coinciden, así que es pegar y listo.
- 06
100% local, sin subidas
La decodificación, el redimensionado y el ensamblaje del .ico se ejecutan todos en tu navegador con la Canvas API. Los logos y los activos de marca nunca tocan un servidor.
Cómo usarla
De un logo en crudo a iconos conectados en cinco pasos.
- 01
Sube un origen cuadrado: un logo o una marca de 512×512 o mayor mantiene nítidos los tamaños pequeños.
- 02
Elige un fondo transparente o sólido; iOS rellena la transparencia con negro, así que elige un color si el icono apunta a las pantallas de inicio de Apple.
- 03
Añade un poco de relleno (para que las máscaras adaptativas no recorten la marca) y redondea las esquinas si quieres una forma fija.
- 04
Define el nombre, el nombre corto y el color de tema: la vista previa del site.webmanifest se actualiza a medida que escribes.
- 05
Descarga el ZIP, coloca los archivos en la raíz de tu sitio y pega el fragmento HTML en el <head> de cada página.
Detalles
El paquete completo, ajustado a cómo carga los iconos realmente cada plataforma.
- favicon.ico con fotogramas incrustados de 16 / 32 / 48 px para pestañas, marcadores y la barra de tareas de Windows
- PNG independientes de 16, 32 y 48 px para las declaraciones modernas de <link rel="icon">
- apple-touch-icon.png de 180 px para la pantalla de inicio de iOS e iPadOS
- Iconos android-chrome de 192 y 512 px referenciados por el manifiesto para la instalación y la pantalla de bienvenida
- site.webmanifest con name, short_name, theme_color, background_color y entradas de iconos
- Fondo transparente o sólido con relleno y radio de esquina ajustables, aplicado a cada tamaño
- Entrada PNG, JPG, WebP, SVG y GIF: el SVG se rasteriza con nitidez en cada tamaño de destino
- ZIP en un clic más HTML listo para copiar y una vista previa del manifiesto en vivo
Casos de uso
Allí donde un proyecto necesita verse terminado en la barra de pestañas y en la pantalla de inicio.
-
Publicar un sitio nuevo
Reemplaza el solitario favicon de 16 px que dejó una herramienta de build por un conjunto completo que se mantiene nítido en las pestañas Retina y los mosaicos fijados.
-
Hacer un sitio instalable
Obtén los iconos de 192 / 512 px y el manifiesto que necesita una PWA para que Chrome muestre el aviso de instalación y Android renderice un icono de pantalla de inicio y una pantalla de bienvenida en condiciones.
-
Rebranding de una sola pasada
Suelta el nuevo logo y regenera todo el conjunto de iconos en segundos, sin buscar cada tamaño a mano.
-
Herramientas internas y paneles
Dale a un panel de administración o a un proyecto paralelo un icono de pestaña reconocible para que deje de perderse entre veinte pestañas abiertas.
-
Proyectos con frameworks
Rellena la carpeta public/ (Astro, Vite, SvelteKit) o app/ (Next.js) con un conjunto completo en lugar del predeterminado del framework.
-
Entregar a un desarrollador
Entrega un ZIP más el marcado exacto de <head> para que cualquiera pueda conectarlo sin adivinar nombres de archivo ni tamaños.
Ver también
Si tu origen está en un formato que preferirías normalizar primero, pásalo por Conversor de imágenes para obtener un PNG limpio. Para reducir un logo sobredimensionado antes de generar los iconos, prueba Compresor de imágenes para que el origen siga siendo ligero sin perder el detalle del que dependen los tamaños pequeños.
Buenas prácticas
A 16 px no hay dónde esconderse: estos hábitos mantienen el icono legible en todas partes.
- Parte de un origen cuadrado y de alta resolución (512×512 o mayor); la herramienta puede reducir el detalle, pero no inventarlo.
- Simplifica la marca: elimina los eslóganes y los trazos finísimos que se convierten en una mancha por debajo de 32 px.
- Para las pantallas de inicio de Apple usa un fondo sólido: iOS reemplaza la transparencia por negro y no redondea por ti.
- Deja alrededor de un 10-15% de relleno para que las máscaras adaptativas de Android (círculo, squircle, cuadrado redondeado) nunca recorten el logo.
- Haz coincidir theme_color con tu marca y background_color con el icono para que la pantalla de bienvenida de la PWA se vea intencionada.
- Verifícalo en una pestaña real, una pestaña fijada y en «Añadir a la pantalla de inicio» del móvil antes de darlo por terminado.
Limitaciones
La herramienta se encarga del redimensionado y el empaquetado; algunas cosas siguen dependiendo del origen y de la plataforma.
- Ampliar un origen diminuto añade píxeles, no detalle: los iconos pequeños seguirán viéndose blandos.
- Los GIF animados se aplanan a su primer fotograma estático.
- Los SVG se rasterizan por tamaño; efectos como filtros o fuentes externas pueden renderizarse distinto que en un editor.
- Las esquinas redondeadas se hornean en los PNG, así que las plataformas que aplican su propia máscara pueden redondear una segunda vez; deja el radio en 0 si el SO ya da forma a los iconos.
- El manifiesto cubre los campos habituales; los iconos maskable, las capturas de pantalla y los accesos directos para PWA avanzadas se añaden a mano.
- Los navegadores almacenan los favicons en caché de forma agresiva: puede hacer falta un refresco forzado o una consulta de versión para ver una actualización.
Preguntas frecuentes
Formatos, tamaños, el manifiesto, la instalación y el clásico problema de la caché.
¿Qué archivos genera?
Un favicon.ico (fotogramas de 16/32/48 px), iconos PNG de 16, 32, 48, 180, 192 y 512 px y un site.webmanifest, además de un fragmento HTML listo para copiar y una vista previa del manifiesto en vivo.
¿De qué tamaño debe ser mi imagen de origen?
Una imagen cuadrada de al menos 512×512. Los orígenes cuadrados más grandes se reducen limpiamente a cada tamaño; cualquier cosa menor de 512 se verá blanda en cuanto Android y la PWA soliciten los iconos grandes.
¿Puedo usar un SVG?
Sí: SVG, PNG, JPG, WebP y GIF funcionan todos. El SVG se rasteriza a un PNG nítido en cada tamaño de destino, lo cual es ideal porque escala sin pérdida de calidad.
¿El fondo debe ser transparente o sólido?
La transparencia va bien para las pestañas del navegador. Pero iOS rellena la transparencia con negro en la pantalla de inicio, así que elige un fondo sólido si tu icono apunta a apple-touch-icon.
¿Mi imagen se sube a algún sitio?
No. Toda la decodificación, el redimensionado y el ensamblaje del .ico ocurren localmente en tu navegador con la Canvas API. La imagen nunca sale de tu dispositivo.
¿Dónde coloco los archivos?
En la raíz de tu sitio, al mismo nivel que index.html (public/ en la mayoría de los frameworks). Luego pega el fragmento HTML en el <head> de cada página.
¿Sigo necesitando favicon.ico?
Sí. Los navegadores solicitan /favicon.ico automáticamente, y Windows se apoya en él para la barra de tareas y los mosaicos fijados. El fragmento lo referencia junto a los iconos PNG para una cobertura completa.
Actualicé el icono pero el navegador muestra el antiguo?
Los favicons se almacenan en caché con fuerza. Haz un refresco forzado (Ctrl/Cmd+Shift+R), reabre la pestaña o añade una consulta de versión como favicon.ico?v=2 para forzar a los navegadores a obtener el nuevo archivo.
Herramientas relacionadas
Combina esto con la conversión y la compresión de imágenes para preparar activos de origen limpios para tus iconos.