Generador de Favicon & Iconos PWA

El favicon es el ancla visual de tu identidad digital. Cuando los usuarios navegan con decenas de pestañas abiertas, el favicon les permite identificar tu página al instante. Además:

• Visibilidad en Resultados de Búsqueda: Google y Bing muestran el favicon junto a los resultados de búsqueda móviles y de escritorio para reforzar la confianza del usuario y mejorar el porcentaje de clics (CTR).
• Marcadores e Historial: Los navegadores utilizan el favicon para indexar visualmente el historial de navegación y la barra de marcadores.
• Salud del Servidor (Prevención de Errores 404): Los navegadores y arañas web solicitan automáticamente la ruta /favicon.ico por defecto. Disponer del archivo en la raíz evita miles de peticiones 404 en tus registros de acceso.

Elegir el formato adecuado garantiza compatibilidad universal y máxima calidad gráfica:

• favicon.ico (Binario Multirresolución): El formato contenedor tradicional de Windows. Un auténtico archivo .ico agrupa internamente varias resoluciones (16×16, 32×32 y 48×48 píxeles), permitiendo a sistemas antiguos y accesos directos elegir la capa óptima automáticamente.
• PNG (Portable Network Graphics): El estándar moderno para navegadores web. Ofrece canal alfa de transparencia de 32 bits, compresión sin pérdida y nitidez absoluta en pantallas Retina (ej. favicon-32x32.png y apple-touch-icon.png).
• SVG (Scalable Vector Graphics): Formato vectorial basado en XML compatible con navegadores modernos (Chrome, Firefox, Safari, Edge). Escala a cualquier tamaño sin pixelarse y permite adaptar colores al tema oscuro mediante @media (prefers-color-scheme: dark). Puedes optimizar tus vectores con nuestro Optimizador de SVG.

Cada entorno de visualización y sistema operativo requiere resoluciones específicas:

• 16×16 px: Pestañas de navegadores de escritorio estándar.
• 32×32 px: Pestañas en pantallas de alta densidad (Retina) y accesos directos de escritorio.
• 48×48 px: Barra de tareas de Windows y tamaño recomendado para resultados de búsqueda de Google.
• 180×180 px (Apple Touch Icon): Utilizado por iOS y iPadOS al guardar la web en la pantalla de inicio del iPhone o iPad. Apple aplica automáticamente el redondeo squircle estándar.
• 192×192 y 512×512 px (Iconos PWA): Necesarios para Chrome en Android y el archivo Web App Manifest para instalación de aplicaciones y pantallas de carga (splash screens).

Para enlazar correctamente todos los iconos generados, añade estas etiquetas dentro de la sección <head> de tu web:

<!-- Favicon estándar multirresolución -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Pantalla de inicio iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Web App Manifest para Android / PWA -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0f172a">

Nota histórica: La sintaxis antigua rel="shortcut icon" se diseñó para Internet Explorer. Los estándares actuales especifican rel="icon" para favicons normales y rel="apple-touch-icon" para dispositivos Apple. Puedes generar también meta etiquetas sociales completas con nuestro Generador de Meta Tags.

Es fundamental diferenciar entre iconos de navegación y capacidades de aplicación web:

• Favicon de Pestaña: Solo identifica visualmente la pestaña o marcador del navegador. No habilita instalación ni trabajo offline.
• Apple Touch Icon: Icono específico para el mosaico de la pantalla de inicio en dispositivos iOS a través de Safari.
• Web App Manifest (manifest.json): Archivo JSON que define el nombre de la app, URL de inicio, color del tema y resolución de iconos. Aunque los iconos son obligatorios para el diálogo de instalación, una PWA completa requiere además conexión segura HTTPS y un Service Worker para gestión de caché offline.

Diseñar un favicon efectivo requiere simplificar los elementos visuales al máximo:

• Simplifica la Silueta: Los logotipos complejos con texto pequeño o degradados pierden legibilidad a 16×16 píxeles. Utiliza una única letra distintiva, isotipo o forma geométrica sólida.
• Alto Contraste en Temas Claros y Oscuros: Las pestañas de los navegadores pueden ser oscuras (modo incógnito, tema oscuro) o claras. Diseña con fondos contrastados o bordes protectores para que el icono destaque en cualquier entorno.
• Proporción Cuadrada (1:1): Utiliza siempre imágenes de origen cuadradas (512×512 o 1024×1024 px) con el motivo centrado para evitar recortes inesperados.

El peso de los favicons es reducido (pocos kilobytes), pero una correcta gestión de caché es vital:

• Caché Agresiva en Servidor: Los navegadores almacenan los favicons de forma muy persistente. Configura cabeceras HTTP de larga duración (ej. Cache-Control: public, max-age=31536000).
• Forzar Actualización (Cache-Busting): Si renuevas tu favicon y los navegadores siguen mostrando la versión antigua, añade un parámetro de versión a las etiquetas HTML (ej. /favicon-32x32.png?v=2).

Conversión de Logotipo Corporativo Cuadrado a Pack Completo

Genera todas las resoluciones en un único proceso, preservando la transparencia alfa y los bordes suavizados para pantallas Retina y móviles.

Configuración de PWA para Aplicaciones Web

Proporciona la estructura exacta requerida por los navegadores móviles para activar el botón de instalación en pantalla de inicio con pantalla de bienvenida corporativa.