Generador de Favicon e Iconos .ico
Convierte cualquier imagen en un .ico multitamaño y en iconos PNG.
Los iconos se generan aquí, no en un servidorConvertir una imagen a .ico: para tu web, el escritorio o una carpeta
o arrástrala y suéltala aquí, o pégala desde el portapapeles (Ctrl+V)
PNG · JPG · WebP · GIF · SVG
Vista previa a tamaño real
Elige una imagen y aquí van a aparecer tus íconos, cada uno a su tamaño real.
Cada ícono se muestra al tamaño exacto en píxeles que va a tener. Si el de 16 px no se entiende, simplifica el diseño: quita texto y detalles finos.
Cómo funciona
Todo pasa en tu navegador: la imagen no se sube a ningún servidor y no hay que registrarse.
Los SVG se rasterizan a 512 px antes de reducirse. Las fuentes y las imágenes externas que el SVG cargue por URL no se van a ver.
Sobre este generador de favicon e iconos .ico
Un favicon es el iconito cuadrado que el navegador muestra en la pestaña, en los marcadores y junto al resultado de Google en la búsqueda. Un juego completo moderno son cuatro archivos: un favicon.ico con las versiones de 16 y 32 píxeles dentro, un SVG para los navegadores que pueden escalarlo, un apple-touch-icon de 180×180 para iOS, y dos PNG de 192 y 512 referenciados desde un manifest de aplicación web. Esta herramienta arma los cuatro a partir de una sola imagen fuente — PNG, JPG, WebP o SVG — en tu navegador, y el .ico final es un contenedor multitamaño real ensamblado byte por byte en la página.
Arrastra un PNG, JPG, WebP o SVG y obtén un solo archivo favicon.ico que contiene varios tamaños cuadrados a la vez — 16, 32, 48, 64, 128 y 256 píxeles —, más cada tamaño como PNG suelto si prefieres enlazarlos por separado. La imagen se dibuja en un canvas en cada tamaño, se codifica como PNG y el contenedor ICO se arma byte por byte en la propia página: seis bytes de cabecera, dieciséis bytes por cada tamaño y después los datos de imagen. Ese es todo el formato: por eso no hace falta subir nada para generar un .ico real con varios tamaños dentro.
En español, quien busca esto muchas veces no busca un favicon. Las búsquedas hermanas piden convertir una imagen a icono de escritorio, a icono para carpeta o a icono para Windows, y todas terminan en el mismo sitio: al cambiar el icono de una carpeta o de un acceso directo, Windows solo acepta archivos .ico y un PNG no le sirve. El .ico que descargas aquí incluye los cuatro tamaños que Microsoft recomienda para iconos de aplicación y del Explorador — 16, 32, 48 y 256 —, así que sirve igual en la pestaña de un navegador que en el escritorio. Más abajo están los pasos exactos para aplicarlo a una carpeta.
Para la web el archivo es la parte fácil; la difícil es que 16 por 16 píxeles son 256 píxeles en total. Un logo completo con el nombre de la marca se convierte en una mancha gris a ese tamaño. Lo que sobrevive es una letra, un símbolo o una forma fuerte, en un color que se distinga tanto en tema claro como oscuro. Recorta tu logo hasta quedarte con la marca antes de generar nada, deja algo de aire en los bordes para que no se vea apretado dentro de una máscara redondeada y luego juzga la vista previa de 16 píxeles, no la de 256: la pequeña es la que la gente va a ver.
Dos límites que conviene decir claro. Esta herramienta redimensiona y vuelve a codificar, no optimiza: el canvas siempre escribe PNG de 8 bits con canal alfa y sin paleta, así que un editor de iconos que cuantice colores te dará un archivo más pequeño. Son unos pocos KB y casi nunca importa, pero es cierto. Lo segundo: la salida es rasterizada. Un SVG que le pases se convierte en píxeles en cada tamaño y el .ico guarda píxeles, no vectores. Si quieres un icono que se vea nítido a cualquier densidad, publica el propio .svg con rel="icon" sizes="any" y deja el .ico como respaldo.
Todo ocurre en esta pestaña: la imagen se decodifica, se redimensiona y se codifica localmente, y los bytes del ICO los arma el JavaScript de la página. No se sube nada, no hay cola de espera y ningún servidor guarda tu imagen. Un favicon acaba siendo público, así que esto no es tanto un argumento de privacidad como uno práctico: no hay cuenta, ni marca de agua, ni límite diario, ni espera, y el logo de un cliente que aún no se anuncia no sale de tu equipo. Un efecto secundario útil: al reprocesar la imagen en un canvas se pierden los metadatos del archivo original, así que el EXIF de la foto de origen nunca llega al icono.
Tamaños de favicon: para la web y para iconos de Windows
Detrás de la misma búsqueda hay dos trabajos distintos. Uno es el favicon de un sitio web: el iconito de la pestaña, de los marcadores y del resultado de Google. El otro es un icono de Windows: el de una carpeta, un acceso directo o el escritorio. El archivo es el mismo formato — un .ico con varios tamaños dentro —, pero lo que necesitas de cada lado no coincide, así que aquí van los dos por separado, con lo que dicen las fuentes originales y no lo que se repite en foros de hace diez años.
| Qué publicar | Para qué sirve | Qué dice la fuente |
|---|---|---|
| favicon.ico con 16 y 32 dentro | Pestañas, marcadores y el respaldo automático | El estándar HTML: si el documento no declara ningún enlace de icono, el navegador puede pedir /favicon.ico en la raíz del sitio y usarlo como si estuviera declarado. |
| icon.svg | Un solo archivo nítido a cualquier densidad de pantalla | sizes="any" representa un icono escalable como un SVG. El soporte es amplio pero reciente en Safari: caniuse registra favicons SVG desde Safari 26.0 y Safari de iOS 26.0, y exige servir el archivo como image/svg+xml. |
| apple-touch-icon.png de 180×180 | El icono al guardar tu sitio en la pantalla de inicio de iPhone o iPad | El ejemplo de Apple declara 152, 167 y 180 más uno por defecto, y su documentación aclara que si no hay coincidencia exacta usa el icono más pequeño que sea mayor que el pedido: con uno de 180 alcanza. |
| PNG de 192×192 y 512×512 en el manifest | El aviso de instalación de Chrome y el icono de la app instalada | Los criterios de instalación de web.dev: el manifest “debe incluir un icono de 192px y otro de 512px”. Van como PNG aparte porque un .ico no puede pasar de 256. |
| 16, 32, 48 y 256 en un mismo .ico | Carpetas, accesos directos y aplicaciones de Windows | Microsoft: “el juego completo incluye 16x16, 32x32, 48x48 y 256x256… se requiere el formato de archivo .ico”. |
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">El lado de Windows es el que casi nadie explica. El Explorador no acepta un PNG cuando cambias el icono de una carpeta: el cuadro “Cambiar icono” solo lee archivos de icono (.ico) y ejecutables o DLL que lleven iconos dentro. De ahí que la mitad de las búsquedas de esto sean, en realidad, “convertir imagen a ico”. Con el archivo ya descargado, el camino es este:
- Guarda el .ico en una carpeta estable — Documentos, o una carpeta “Iconos” propia. Windows apunta a la ruta del archivo, no guarda una copia, así que si lo borras o lo mueves el icono vuelve al de siempre.
- Haz clic derecho sobre la carpeta y elige Propiedades.
- Abre la pestaña Personalizar y pulsa Cambiar icono.
- Pulsa Examinar, selecciona tu archivo .ico y acepta dos veces. Si el escritorio no se actualiza, pulsa F5.
- Para un acceso directo el camino cambia un poco: Propiedades > pestaña Acceso directo > Cambiar icono.
Dos advertencias honestas sobre el .ico de Windows. La primera es el techo del formato: en la estructura ICONDIRENTRY de Microsoft el ancho y el alto ocupan un solo byte cada uno, así que 256×256 es la imagen más grande que un .ico puede describir; no existe un icono .ico de 512. La segunda es la compresión: las imágenes que van dentro de este contenedor se guardan como PNG, algo que Windows lee sin problema desde Vista, aunque la propia guía de Microsoft — escrita en la época de Windows 7 y sin actualizar — recomienda comprimir únicamente la imagen de 256×256. Herramientas muy antiguas o Windows XP pueden no leer entradas PNG; si necesitas compatibilidad con esa época, usa un editor de iconos que escriba entradas BMP clásicas.
Errores frecuentes con favicons y cómo solucionarlos
Estos son los errores que aparecen una y otra vez en sitios reales — la mayoría se arreglan rápido una vez sabes qué buscar.
| El error | Qué se ve | La solución |
|---|---|---|
| Usar el logo entero en vez de la marca | El favicon de 16 píxeles queda como una mancha gris — ningún texto sobrevive a ese tamaño | Recorta el logo hasta quedarte con una sola letra, un símbolo o una forma antes de generar nada, y juzga la vista previa de 16 px |
| Un .ico con solo la versión de 16 píxeles | Icono borroso en cualquier pantalla retina o de alta densidad | Incluye 16 y 32 dentro del mismo .ico, y declara sizes="16x16 32x32" en la etiqueta link |
| Sin /favicon.ico en la raíz del sitio | Pestaña con icono roto en lectores RSS, apps de marcadores y rastreadores viejos que piden /favicon.ico directamente | Deja siempre una copia en la raíz, aunque además lo declares con etiquetas <link> |
| JPG como fuente con bordes que parecen transparentes | El favicon terminado lleva un rectángulo blanco o negro alrededor | El JPG no tiene canal alfa — parte de un PNG, WebP o SVG |
| Marca azul oscura en una barra de pestañas oscura | El favicon desaparece en navegadores con tema oscuro | Añade un contorno, o publica una versión SVG que cambie de color con @media (prefers-color-scheme: dark) |
| Declarar tamaños que el archivo no contiene | Elección de tamaño errática entre navegadores | El estándar HTML prohíbe listar tamaños que no están de verdad en el archivo — declara solo lo que tu .ico contiene |
| MIME type text/html en el servidor | El navegador pide el icono con el Content-Type equivocado y no lo muestra | Sirve el .ico como image/vnd.microsoft.icon o image/x-icon, y el .svg como image/svg+xml |
Comparativa con otros generadores de favicon
Comparación honesta. Todas las herramientas listadas hacen un trabajo real — la diferencia está en qué te pide cada una y qué te devuelve.
| Herramienta | En tu navegador | Requiere cuenta | Marca de agua | .ico multitamaño | SVG de entrada | Lote |
|---|---|---|---|---|---|---|
| Este generador | Sí — no se sube nada | No | Ninguna | Sí (16 / 32 / 48 / 64 / 128 / 256) | Sí | Una imagen a la vez |
| favicon.io | En su servidor (sube archivos) | No | Ninguna | Sí | Solo generadores de texto y emoji | Una a la vez |
| realfavicongenerator.net | En su servidor (sube archivos) | No para lo básico, sí para proyectos guardados | Ninguna en el plan gratuito | Sí, más archivos manifest y config | Sí | Una a la vez |
| Canva (función favicon) | En su servidor | Sí (cuenta Canva) | En el plan gratuito para algunas plantillas | Solo PNG, no .ico | No es entrada nativa | Una a la vez |
| Adobe Express | En su servidor | Sí (cuenta Adobe) | Ninguna en el plan pagado, algunos límites en el gratis | Solo PNG, no .ico | Sí en planes pagados | Una a la vez |
La razón por la que esta herramienta existe como algo aparte: el contenedor .ico es una especificación de Microsoft de los años 90 que cualquier navegador sabe leer en unas 200 líneas de código, pero casi todos los generadores hospedados envuelven ese trabajo con una subida y una capa de anuncios o un registro. Esta página hace la codificación en tu propia pestaña. Esa es la única diferencia real — el .ico resultante son exactamente los mismos bytes que produciría cualquiera de las otras.
Tablas de referencia
Preguntas frecuentes
¿Sirve para el icono de una carpeta o del escritorio en Windows?
Sí, y es justo para lo que la mayoría de la gente llega aquí. Windows solo acepta archivos .ico al cambiar el icono de una carpeta o de un acceso directo, no PNG ni JPG. Descarga el .ico con los tamaños 16, 32, 48 y 256 — el juego que Microsoft documenta para iconos de aplicación y del Explorador —, guárdalo en una carpeta que no vayas a mover y aplica clic derecho > Propiedades > Personalizar > Cambiar icono. Los pasos completos están más abajo en esta página.
¿Cuántos tamaños necesito de verdad para una web?
Muchos menos de los que dicen las guías viejas. Con un favicon.ico que lleve 16 y 32 píxeles dentro tienes cubiertas las pestañas y los marcadores. Añade un apple-touch-icon de 180×180 para la pantalla de inicio de iPhone y iPad: Apple elige el icono más pequeño que sea mayor que el tamaño pedido, así que uno solo basta. Y si publicas un manifest de aplicación web, Chrome exige además un icono de 192 y otro de 512 píxeles, que van como PNG aparte porque un .ico no puede pasar de 256.
¿Conserva la transparencia si mi logo no tiene fondo?
Sí, siempre que el archivo de origen la tenga. Un PNG, un WebP o un SVG con fondo transparente llegan con su canal alfa intacto a cada tamaño del .ico, porque las imágenes que van dentro del contenedor se guardan como PNG. Un JPG es otra historia: el formato no tiene canal alfa, así que lo que tú ves como “fondo blanco” es fondo blanco de verdad y seguirá ahí. Si necesitas el icono sin fondo, parte de un PNG o un SVG.
¿Dónde pongo el archivo de favicon en el servidor?
El favicon.ico principal va en la raíz de tu dominio — https://tudominio.com/favicon.ico — porque los navegadores piden esa URL automáticamente aunque tu HTML no declare ningún enlace de icono. Eso es lo que el estándar HTML llama el respaldo automático: si el <head> no tiene un <link rel="icon">, el navegador puede pedir /favicon.ico y usarlo como si lo hubieras declarado. El apple-touch-icon y el SVG pueden vivir donde quieras siempre que la ruta en el href de la etiqueta link coincida, pero la convención es dejarlos todos en la raíz (/apple-touch-icon.png, /icon.svg) y así el navegador los encuentra aunque el HTML falle.
¿Por qué se ve borroso mi favicon en pantallas retina?
Porque una pestaña que se ve de 16 píxeles CSS de ancho ocupa 32 píxeles reales en una pantalla 2×, y la especificación HTML es explícita en que los valores de sizes son píxeles del dispositivo, no píxeles CSS. Si tu .ico solo lleva la versión de 16 px dentro, el navegador la escala a 32 y sale el resultado difuso. La solución es incluir 16 y 32 dentro del mismo .ico — el contenedor está diseñado para eso — y declarar sizes="16x16 32x32" en la etiqueta link para que el navegador sepa qué está eligiendo.
¿Se puede tener un favicon que cambie con el tema oscuro del navegador?
Sí, y solo con el icono SVG, no con el .ico. Dentro de un SVG puedes consultar el tema del navegador con @media (prefers-color-scheme: dark) y cambiar los colores de relleno; Chrome, Edge y Firefox lo respetan cuando el icono se enlaza con type="image/svg+xml". El .ico queda como respaldo para el modo claro, lo cual está bien porque las barras de pestañas en tema claro suelen ser justo eso, claras. Safari sigue ignorando los favicons SVG en la mayoría de las versiones, así que un icono sensible al tema es una función de navegadores modernos, no universal.
¿Cuál es la diferencia entre un favicon y el icono de una app?
Un favicon vive dentro de un navegador y representa un sitio web: aparece en la pestaña, en los marcadores y en el historial. El icono de una app representa una aplicación en el lanzador o en la pantalla de inicio del sistema operativo. En los equipos modernos casi siempre parten de la misma imagen, pero usan archivos y tamaños distintos: los navegadores quieren 16, 32 y a menudo SVG; iOS quiere un apple-touch-icon de 180×180; Android y las PWA instaladas quieren PNG de 192 y 512 declarados en un manifest de aplicación web. Esta herramienta arma todos a partir de una sola imagen fuente para que la misma marca cumpla los tres papeles.