Cargando...
Cargando...
Suelta una imagen y obtén cada tamaño de favicon que necesita un sitio moderno — favicon.ico, tamaños PNG para navegadores, Apple y Android, más fragmentos de HTML y manifiesto listos para pegar.
Un generador de favicon convierte una imagen fuente en la familia de archivos de íconos que necesita un sitio web moderno: el archivo .ico legado que los navegadores obtienen automáticamente, los pequeños tamaños PNG que se muestran en pestañas y marcadores, el ícono de 180 píxeles apple-touch-icon que se utiliza cuando un usuario de iPhone agrega tu sitio a su pantalla de inicio, y las imágenes de 192/512 píxeles que Android obtiene del manifiesto web. Hacer esto a mano significa abrir un editor de imágenes, exportar siete archivos separados y escribir un largo bloque de etiquetas <link> en tu HTML. Este generador ejecuta toda la tubería en tu navegador: suelta una imagen, obtén cada tamaño y copia el fragmento HTML y del manifiesto correspondiente. Tu imagen nunca sale de la página.
Sube un PNG, JPG, WebP o SVG que sea cuadrado y tenga al menos 512×512 píxeles. Una fuente no cuadrada se ajusta a un lienzo cuadrado para que el logotipo nunca se recorte, pero los pequeños detalles se ven más nítidos cuando la fuente ya es cuadrada.
Déjalo transparente si tu logotipo se ve bien tanto en el chrome claro como en el oscuro del navegador. Cambia a un color sólido si tu ícono tiene un primer plano claro que desaparecería contra una pestaña blanca — la mayoría de las pestañas empresariales siguen siendo muy claras.
Mira cuidadosamente las vistas previas de 16 y 32 píxeles. La mayoría de los logotipos pierden detalle a ese tamaño. Si el resultado es un borrón, simplifica la fuente — menos colores, trazos más gruesos, menos tipografía fina — y vuelve a subir.
Usa Descargar todo para obtener favicon.ico más los seis tamaños PNG. Colócalos en la raíz de tu sitio. El .ico contiene internamente PNGs de 16, 32 y 48 px, que es lo que esperan los navegadores actuales como Chrome, Firefox y Edge.
Copia el fragmento HTML en el <head> de cada página. Guarda el fragmento site.webmanifest junto a los íconos para que Android muestre la imagen correcta en la pantalla de inicio cuando alguien agrega tu sitio.
1. Decodifica la imagen subida utilizando el cargador de imágenes nativo del navegador.
2. Para cada tamaño objetivo (16, 32, 48, 180, 192, 512), dibuja en un lienzo cuadrado.
3. Ajusta la fuente para que el lado más largo se ajuste al lienzo — nunca recortes, nunca estires.
4. Vuelve a codificar el lienzo como un PNG a través de canvas.toBlob('image/png').
5. Para favicon.ico, ensambla los PNGs de 16/32/48 en una estructura ICONDIR + ICONDIRENTRY.
6. Concatena los bytes PNG después de las entradas de directorio de 16 bytes — esto es un .ico multi-resolución válido.Los navegadores modernos y los dispositivos Apple aceptan bytes PNG incrustados dentro de un contenedor .ico — no es necesario codificar el formato obsoleto BMP-con-máscara-AND que originalmente se envió con Windows 95. El contenedor es solo un encabezado de seis bytes (reservado + tipo + cuenta), una entrada de directorio de 16 bytes por imagen incluida (tamaño + profundidad de bits + desplazamiento + longitud), y los payloads PNG concatenados. Eso es lo que produce esta herramienta, y es lo que Chrome, Firefox, Safari y Edge obtienen cuando solicitan /favicon.ico desde tu servidor.
Referencia: Wikipedia — Formato de archivo ICO
| Imagen fuente | Qué esperar |
|---|---|
Logotipo cuadrado en negrita, 1024×1024 PNG, fondo transparente | Nítido en cada tamaño. Las vistas previas de 16 y 32 px aún se ven claramente. Se puede usar directamente en un sitio de producción. La entrada ideal. |
Logotipo horizontal amplio, 2000×400 | Con un marco en una superficie cuadrada con bandas vacías arriba y abajo. La marca de texto sigue siendo legible a 192 y 512 pero ilegible a 16 y 32 — el texto es demasiado pequeño. Recorta a una marca cuadrada antes de subir. |
Logo fotográfico con un contorno de degradado delgado | El degradado y el contorno desaparecen a 16 y 32 px. Usa una versión simplificada y de alto contraste del mismo logo para activos del tamaño de un ícono. La pérdida de detalle es un problema de origen, no un problema de exportación. |
SVG sin ancho o alto explícito | Se renderiza al 300×150 predeterminado que el navegador asigna a los SVG sin un tamaño derivado de viewBox. Agrega atributos de ancho/alto o un viewBox al SVG de origen antes de subir. Caso extremo de SVG — corrige el origen. |
Recorta el sujeto de cualquier foto con IA en el dispositivo — no se requiere carga.
Reduce archivos JPG, PNG o WebP en tu navegador con un control deslizante de calidad interactivo.
Ajusta, filtra, rota y recorta fotos en el navegador — sin subidas, sin marca de agua.
Compón memes y collages de capturas de pantalla con capas reales — pega, arrastra, recorta, subtitula, exporta.
Última actualización