Generador de Favicon
Un favicon mal configurado o ausente genera un error 404 visible en las DevTools del navegador y puede afectar la percepción de profesionalismo de un sitio. Esta herramienta genera todos los tamaños necesarios —desde 16×16 hasta 512×512— en un solo paso, ya sea a partir de texto (iniciales de una marca) o de una imagen propia.
Por qué se necesitan múltiples tamaños de favicon
Un set completo de favicons necesita al menos 5 tamaños: 16px (pestañas), 32px (escritorio), 180px (iOS home screen), 192px y 512px (PWA Android). Servir solo favicon.ico es insuficiente para sitios modernos.
El tamaño clásico 16×16 px es el que aparece en las pestañas del navegador. A 32×32 lo usan algunas barras de marcadores y atajos de escritorio en Windows. A 180×180 (apple-touch-icon) lo carga iOS cuando el usuario guarda el sitio en el home screen. A 192×192 y 512×512 lo requiere el Web App Manifest para PWAs: el de 512 se usa en la pantalla de splash al abrir la app en Android.
Servir un solo favicon.ico de 16×16 es técnicamente válido pero insuficiente para una experiencia completa. Los navegadores modernos priorizan PNG sobre ICO, y los metadatos correctos en <head> indican al navegador qué tamaño usar en cada contexto.
Modo texto: favicons desde iniciales de marca
Para proyectos sin un logo definitivo, crear un favicon con 1-2 letras sobre fondo de color es la solución más rápida y legible en tamaño pequeño. Las iniciales deben ser máximo 2 caracteres: más letras se vuelven ilegibles a 16×16 px. Fontes sans-serif bold (como Inter Bold o Roboto Black) tienen mejor legibilidad que serif a tamaños pequeños.
La forma del contenedor influye en la percepción: squircle (superelipse) es el estilo que usa iOS para sus iconos de apps y se percibe más moderno que el cuadrado recto. El circle es ideal para proyectos de fotografía o portfolios personales; rounded para SaaS corporativos.
Implementación correcta en el HTML
Una vez descargados los PNGs, el HTML del <head> debe incluir las etiquetas correspondientes. La configuración mínima recomendada: <link rel="icon" sizes="32x32" href="/favicon-32.png">, <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png"> y una referencia al Web App Manifest que declare los iconos de 192 y 512.
Para Next.js, desde v13.3 con App Router, basta colocar un archivo favicon.ico en la carpeta /app y el framework genera automáticamente los metadatos. En WordPress, el favicon se configura desde Apariencia → Personalizar → Identidad del sitio y se puede subir un PNG de 512×512 que WP escala automáticamente.
- ▸16px y 32px: para pestañas y favoritos del navegador
- ▸180px: apple-touch-icon para iOS (guardar en pantalla de inicio)
- ▸192px y 512px: requeridos por el Web App Manifest para PWAs
- ▸Forma squircle: estilo iOS moderno — más legible en contextos de apps que el cuadrado recto
Sobre Generador de Favicon
Generador de favicon en todos los tamaños estándar (16x16 hasta 512x512 PNG). Modo texto (1-2 letras con 4 fuentes) o subir imagen propia. Forma rounded, circle, square o squircle. Color de fondo y texto personalizables. Preview en vivo. Descarga directa al navegador.
Preguntas frecuentes
¿Generador de Favicon es gratis?+
Sí, Generador de Favicon es 100% gratuita y sin límite de uso. No requiere registro, no tiene marca de agua y no muestra anuncios intrusivos. Toolram se mantiene con publicidad lateral discreta y donaciones.
¿Mis datos salen de mi navegador?+
Sí. La generación es local en tu navegador con Web Crypto API o JavaScript puro.
¿Funciona en móvil generador de favicon?+
Sí. Generador de Favicon está optimizada para Chrome, Safari, Firefox y Edge — tanto en escritorio como en iOS y Android. El layout es responsive y funciona sin instalación.
¿Para qué se usa generador de favicon?+
Generador de Favicon se usa para generación rápida de elementos útiles. Crea favicons en 16, 32, 64, 128, 256 y 512px desde texto o imagen. Es ideal para profesionales que necesitan resolver la tarea rápido sin instalar software ni crear cuentas.
¿Hay límite de uso?+
No, podés usar la herramienta tantas veces como quieras. Los archivos pesados (PDF, imágenes) están limitados solo por la memoria de tu navegador, no por nosotros.
Herramientas relacionadas
Generador de Paleta de Colores
Paletas armónicas: monocromática, análoga, complementaria, triádica.
Conversor de color HEX/RGB/HSL
Convierte entre HEX, RGB, HSL y formato Tailwind. Color picker incluido.
Generador de códigos QR
Crea códigos QR para URLs, texto, WiFi o vCard. Descarga PNG.
Generador de contraseñas
Crea contraseñas seguras de hasta 64 caracteres con un click.