creado para el día del lanzamiento
Convierte una imagen a icono online
OneImageTool convierte un logotipo, un avatar, una mascota o una marca de producto en los archivos de icono que necesita un sitio web o una app real. Sube una imagen, dale forma cuadrada limpia, previsualízala en pestañas del navegador y pantallas de inicio del móvil, y guarda favicon.ico, iconos PNG, archivos Apple Touch Icon y un manifiesto PWA. Si el origen aún necesita retoques, recórtalo en cuadrado primero, o comprime una exportación demasiado grande — ambas herramientas también funcionan en tu navegador.
Todo funciona en tu navegador. Eso importa cuando el origen es el logotipo privado de un cliente, la marca de una app sin lanzar o una idea rápida que no quieres enviar a otro servidor. Ajusta el relleno, el color de fondo y el radio de esquina mientras ves las vistas previas de dispositivo en vivo.
Favicon para sitios web
Crea un icono de pestaña del navegador a partir del mismo origen. Usa Recortar para una marca contundente, o Ajustar con relleno cuando el logotipo necesite aire.
ICO de acceso directo
Descarga un ICO multitamaño para la compatibilidad de favicon heredada y los accesos directos de escritorio. Los tamaños más pequeños están ajustados para verse nítidos en la vista previa de la pestaña.
Iconos de app y PWA
Genera tamaños PNG más grandes para pantallas de inicio y avisos de instalación. El pack incluye un manifiesto web preconfigurado y un fragmento HTML.
Vista previa multidispositivo
A diferencia de las vistas previas de solo pestaña, OneImageTool muestra maquetas de la pantalla de inicio de iOS, el banner de instalación de Android y el mosaico de Windows — todas actualizándose en vivo mientras editas.
una descarga, muchas superficies
Qué genera la herramienta de imagen a icono
Un buen flujo de trabajo no te entrega un único gráfico diminuto. Las páginas de destino, la documentación, las apps, las PWA y los proyectos personales necesitan varios recursos más fragmentos HTML. Consigue el conjunto compatible con el navegador en un solo ZIP.
El pack incluye favicon.ico, tamaños PNG comunes, un manifiesto web, un fragmento HTML y un README — cubriendo la configuración normal de un sitio web y una PWA.
- favicon.icoICO
- favicon-16x16.png … 512x512.pngPNG
- apple-touch-icon.pngiOS
- android-chrome-192x192.pngPWA
- site.webmanifestJSON
- favicon-html.txtHTML
- README.txtDOC
cinco pequeños movimientos
Cómo usar el conversor de imagen a icono
Sube
Suelta un PNG, JPG, WebP o SVG. Los orígenes cuadrados funcionan mejor, pero las imágenes anchas también valen.
Da forma
Elige Ajustar, Recortar o Estirar. Observa cómo se actualizan al instante las vistas previas de navegador, iOS y Android.
Da estilo
Añade relleno, redondea esquinas, conserva la transparencia o elige un mosaico de fondo sólido.
Previsualiza
Revisa las maquetas de la pestaña de 16px y la pantalla de inicio. Si el icono de la pestaña es ilegible, añade relleno o un fondo sólido.
Descarga
Guarda el pack de iconos completo con favicon.ico, archivos PNG, manifiesto, fragmento HTML y README.
de diminuto a listo para instalar
Mejores tamaños para la salida de imagen a icono
Los iconos aparecen en lugares muy distintos. Una pestaña del navegador necesita un símbolo contundente con casi ningún detalle. Una pantalla de instalación de PWA puede mostrar una marca más grande. Este conversor crea todos los tamaños comunes a partir de una imagen de origen.
| Tamaño | Uso común | Vista previa en la herramienta | Consejo |
|---|---|---|---|
| 16×16 | Pestañas del navegador, favicon heredado | Maqueta de pestaña del navegador | Usa una silueta fuerte, con mínimo detalle |
| 32×32 | PNG de favicon moderno, pestañas HD | Cuadrícula de tamaños | Predeterminado práctico para el HTML del favicon |
| 48×48 | Accesos directos de escritorio, mosaicos de Windows | Maqueta de mosaico de Windows | Mantén la forma centrada |
| 180×180 | Apple Touch Icon | Maqueta de pantalla de inicio de iOS | Un fondo sólido suele verse más limpio en iOS |
| 192×192 | Android Chrome, PWA | Maqueta de instalación de Android | Se usa en los iconos de manifest.json |
| 512×512 | Splash de PWA, interfaz de instalación | Cuadrícula de tamaños | Parte de un origen de alta calidad |
haz que la versión diminuta se vea clara
Lista de comprobación de diseño antes de descargar
Los favicons son pequeños — las líneas finas, el texto diminuto, las fotos recargadas y las capturas de pantalla suelen volverse borrosos. Usa las vistas previas en vivo de la pestaña y la pantalla de inicio para probar la legibilidad antes de exportar.
Si la vista previa de la pestaña de 16px cuesta de leer, prueba un recorte más contundente, más relleno o un fondo sólido. Las formas centradas con contraste claro sobreviven mucho mejor al salto de imagen grande a icono.
Logotipos simples, mascotas planas, marcas cuadradas, iniciales contundentes y símbolos de alto contraste.
Fotos detalladas, contornos finos, capturas de pantalla, palabras largas y marcas que tocan los bordes.
pega y publica
Dónde colocar los archivos de icono generados
Para sitios estáticos, pon los archivos en la raíz pública o en una carpeta de recursos copiada a producción. Pega el fragmento HTML dentro del <head>. Mantén estables las URL del favicon tras el lanzamiento para que los marcadores y los accesos directos instalados conserven el mismo icono.
Las cachés de favicon son tercas durante las pruebas — usa una ventana privada o cambia el nombre de los archivos mientras experimentas.
public/
├── favicon.ico
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest