ESC

Sube tu imagen base

Arrastra y suelta tu imagen aquí

PNG, JPG o SVG cuadrados (hasta 8 MB) ofrecen la mejor calidad.

Consejos rápidos

  • Usa una imagen de al menos 1024×1024 px para obtener resultados nítidos.
  • Mantén el contenido importante centrado; los tamaños pequeños recortan más.
  • Los PNG transparentes se ven mejor en temas oscuros del navegador.
  • Ajusta las rutas del snippet generado según tu despliegue.

Snippet HTML

Pega estas líneas dentro de la etiqueta de tu sitio.

Vista previa del manifest


                

¿Por qué usar el Generador de Favicons?

Paquete completo

Descarga PNG, favicon.ico, manifest y browserconfig en un solo ZIP.

Escalado inteligente

Centra y ajusta tu logotipo automáticamente en cada resolución.

Snippet listo para usar

Recibe las líneas listas para copiar y pegar.

Privacidad total

Todo ocurre en tu navegador; no subimos tus archivos.

¿Cómo utilizar el Generador de Favicons?

1

Sube tu imagen

Carga un logotipo cuadrado en PNG, JPG o SVG (máx. 8 MB).

2

Elige tamaños y estilo

Selecciona los tamaños necesarios, el color de fondo y el radio de esquina.

3

Genera la vista previa

Revisa cada icono y copia el snippet HTML si lo necesitas.

4

Descarga el paquete

Obtén el ZIP con PNG, favicon.ico, manifest y browserconfig.

Preguntas frecuentes

Un PNG cuadrado con transparencia de 1024x1024px o mayor ofrece los resultados más nítidos en todos los tamaños. SVG también funciona y escala perfectamente a cualquier resolución. JPG funciona pero no puede tener fondo transparente — la herramienta añadirá un color de fondo sólido. Para obtener la mejor calidad: empieza con al menos 512x512px, mantén el diseño centrado y usa el mínimo de detalles, ya que los favicons se muestran a tamaños tan pequeños como 16x16px.

El generador produce iconos PNG en: 16, 24, 32, 40, 48, 57, 64, 72, 96, 120, 128, 144, 150, 180, 192, 256, 384 y 512 píxeles cuadrados. El preajuste "Moderno" cubre los 5 tamaños más esenciales; el preajuste "Completo" genera los 18. favicon.ico contiene las versiones de 16, 32 y 48px incrustadas en un solo archivo para compatibilidad con navegadores antiguos.

favicon.ico es un formato contenedor multi-resolución heredado compatible con todos los navegadores desde IE 5. Los navegadores modernos (Chrome, Firefox, Safari, Edge) prefieren los favicons PNG porque admiten mayor profundidad de color y transparencia con tamaños de archivo más pequeños. La mejor práctica es incluir ambos: favicon.ico para compatibilidad heredada, y etiquetas <link rel="icon" type="image/png"> que apunten a archivos PNG del tamaño adecuado para navegadores modernos.

El icono Apple Touch (180x180px) se usa cuando un usuario añade tu sitio web a la pantalla de inicio de su iPhone o iPad. Sin él, iOS usa una captura de pantalla de tu página como icono, lo que resulta poco profesional. Añade <link rel="apple-touch-icon" href="/apple-touch-icon.png"> al <head> de tu HTML. Esta herramienta genera el PNG de 180px e incluye la línea HTML correcta en el snippet HTML. iOS moderno (10+) solo necesita 180px.

Las Progressive Web Apps (PWAs) requieren iconos de 192x192 y 512x512 listados en el archivo site.webmanifest. El icono de 192px aparece en la pantalla de inicio de Android cuando el usuario instala tu PWA. El icono de 512px se usa para la pantalla de bienvenida de la PWA. Esta herramienta genera ambos archivos PNG y crea un site.webmanifest con el array de iconos correcto. Añade <link rel="manifest" href="/site.webmanifest"> al <head> de tu HTML para habilitar la instalación de la PWA.

El snippet HTML generado incluye: una etiqueta <link rel="icon"> para el favicon estándar, un <link rel="apple-touch-icon"> para los iconos de pantalla de inicio de iOS, un <link rel="manifest"> que apunta al site.webmanifest para soporte PWA, y un <meta name="msapplication-config"> que apunta al browserconfig.xml para los tiles de Windows. Pega todas las líneas dentro del <head> de tu HTML. Actualiza las rutas si tus iconos están en una subcarpeta.

Sí. Los navegadores modernos (Chrome 80+, Firefox 41+, Safari 15+) admiten favicons SVG mediante <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Los favicons SVG escalan perfectamente a cualquier resolución y admiten el modo oscuro mediante CSS @media (prefers-color-scheme: dark). Activa la opción "Incluir favicon.svg" en esta herramienta para añadir el SVG a tu paquete. Mantén también los archivos ICO y PNG como alternativa para Safari 14 y navegadores más antiguos.

No. Todo el redimensionado, la conversión de formato y el empaquetado ocurre íntegramente en tu navegador mediante JavaScript. Tu imagen nunca llega a ningún servidor. Nada se almacena, registra ni transmite — el proceso es completamente privado y funciona sin conexión una vez que la página se ha cargado.

¿Qué es un generador de favicons?

Un generador de favicons toma una sola imagen y produce todos los tamaños de icono que tu sitio necesita: favicon.ico, Apple touch icons, iconos de manifest para Android, todo. Subes una vez y descargas un paquete listo para publicar.

¿Qué obtienes?

Un archivo ICO multi-resolución, PNGs individuales desde 16x16 hasta 512x512, un Apple touch icon, más el snippet HTML y el site.webmanifest que puedes copiar directamente a tu proyecto. Todo sigue los estándares actuales de navegadores y PWA.

Casos de uso comunes

Lanzar un sitio nuevo y necesitar todos los iconos de una vez. Hacer rebranding y reemplazar favicons en múltiples propiedades. Desarrollar una PWA y necesitar los iconos del manifest en las dimensiones exactas.

Consejos para mejores resultados

Empieza con una imagen cuadrada de al menos 1024x1024 píxeles. Los PNG transparentes te dan más flexibilidad. Mantén el diseño simple -- los favicons son diminutos y los detalles finos se pierden.

Privacidad

Todo el redimensionado y empaquetado ocurre en tu navegador. Tu imagen nunca toca un servidor y nada se guarda al cerrar la pestaña.

Seguridad y Privacidad

La seguridad de tus datos es nuestra prioridad

Procesamiento Local

Todo el procesamiento ocurre en tu navegador

Sin Transferencia de Datos

Tus datos no se envían a nuestros servidores

Sin Almacenamiento de Datos

No se almacenan ni comparten datos

Cifrado SSL

Cifrado SSL para conexión segura

Siguiente Paso

También en MoreOnlineTools