Generador de Favicon

Los navegadores modernos usan múltiples tamaños de favicon: 16x16 y 32x32 píxeles para las pestañas del navegador, 180x180 para Apple Touch Icon (iOS), y 192x192 para Android. Nuestro generador crea automáticamente todas las variantes de tamaño desde tu diseño.

Los favicons modernos deben ser archivos PNG (o ICO para compatibilidad heredada). El formato SVG también es soportado por los navegadores modernos y escala perfectamente. Nuestro generador proporciona PNG en todos los tamaños requeridos, que es compatible con todos los navegadores modernos.

Descarga los archivos de favicon de nuestra herramienta, súbelos a tu servidor web (normalmente en la carpeta raíz) y agrega estas etiquetas a tu sección HTML: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> y <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.

Los favicons pueden tardar en actualizarse debido al caché del navegador. Intenta forzar un hard reload (Ctrl+Shift+R en Windows, Cmd+Shift+R en Mac). También asegúrate de que el archivo esté en la ubicación correcta y que las rutas en las etiquetas HTML sean exactas.

Sí, pero es posible que debas simplificarlo. Los logos complejos con texto y múltiples elementos se ven mal a 16x16 píxeles. Considera usar solo el elemento icónico de tu logo (un símbolo o inicial) para el favicon.

Favicon.ico es un formato contenedor que puede incluir múltiples imágenes en un solo archivo (16x16, 32x32, 48x48). Era el estándar pero requiere software especial para crearlo. Los favicons PNG modernos son más simples de crear, más ligeros y compatibles con todos los navegadores actuales. Recomendamos PNG para la mayoría de los sitios web nuevos.

iOS requiere una imagen PNG de 180x180 llamada Apple Touch Icon. Cuando los usuarios agregan tu sitio a su pantalla de inicio, iOS usa este ícono. Nuestro generador crea automáticamente esta variante de 180x180. Agrégala a tu HTML con: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.

Sí, los favicons SVG pueden adaptarse al modo oscuro usando consultas de medios CSS dentro del SVG. Esto te permite mostrar una versión clara del ícono en modo claro y una versión oscura en modo oscuro. Sin embargo, los navegadores tienen soporte inconsistente para favicons SVG — los PNG son más confiables.

Las Progressive Web Apps necesitan íconos de 192x192 y 512x512 píxeles en el manifiesto de la app. Estos íconos se usan cuando los usuarios instalan la PWA en su dispositivo. Incluye ambos en tu archivo manifest.json con el tipo "image/png" y el propósito "any maskable".

Los favicons SVG son compatibles con Chrome, Firefox, Edge y Opera. Safari añadió soporte en la versión 15+. Para una cobertura completa de navegadores, incluye un favicon ICO o PNG de respaldo junto a tu SVG. Usa <link rel="icon" href="/favicon.svg" type="image/svg+xml"> seguido de <link rel="icon" href="/favicon.ico">.

El favicon estándar es 16x16 píxeles para pestañas del navegador. Sin embargo, los navegadores modernos también usan 32x32 para accesos directos de escritorio y 180x180 para Apple Touch Icon en iOS. Nuestro generador crea todos los tamaños automáticamente.

PNG es el mejor formato para favicons modernos — es compatible con todos los navegadores, soporta transparencia y tiene buena compresión. ICO sigue siendo necesario para compatibilidad heredada con versiones antiguas de Internet Explorer.

Sí. El generador de favicon de Kleap es completamente gratuito, no requiere registro y genera automáticamente todos los tamaños necesarios (16x16, 32x32, 180x180). También proporciona el código HTML para agregar el favicon a tu sitio.

Para dispositivos Apple (iPhone, iPad), necesitas un Apple Touch Icon — un PNG de 180x180 píxeles. Cuando los usuarios agregan tu sitio a su pantalla de inicio, iOS usa este ícono. Nuestro generador crea automáticamente el Apple Touch Icon junto con las versiones estándar del favicon.

Las razones más comunes son: ruta de archivo incorrecta en la etiqueta de enlace, caché agresiva del navegador (intenta un refresco forzado con Ctrl+Shift+R), el favicon no está en el directorio raíz o falta un encabezado Content-Type en el servidor. Comprueba también que tu favicon.ico es un archivo ICO válido y no solo un PNG renombrado.