Generador de Favicon: Guía completa de iconos de navegador

Crea favicons que funcionen en todas partes: pestañas de navegador, marcadores, pantallas de inicio y lanzadores PWA.

5 min de lectura Imagen · HTML · PWA 6 secciones + FAQ

El favicon es el primer elemento de marca que los usuarios ven en una pestaña del navegador. Un favicon faltante o borroso señala un sitio inacabado — pero hacer favicons correctamente en 2025 significa generar múltiples tamaños y formatos.

La implementación moderna de favicon va más allá de un solo archivo ICO de 16×16. Necesitas PNG para navegadores estándar, SVG para renderizado escalable, y Apple touch icons para iOS.

Qué es un favicon

Un favicon (abreviatura de "favorites icon") es una pequeña imagen mostrada por los navegadores en pestañas, marcadores y listas de historial. El nombre proviene de la función "Favoritos" de Internet Explorer en 1999. Hoy los favicons aparecen en muchos contextos: pestañas del navegador, barras de direcciones, marcadores y como iconos de pantalla de inicio en dispositivos móviles.

Herramienta gratuita Generador de Favicon Genera favicons en todos los tamaños requeridos desde cualquier imagen

Tamaños requeridos en 2025

El conjunto moderno de favicon incluye: PNG 16×16 y 32×32 para pestañas del navegador; PNG 48×48 para la barra de tareas de Windows; PNG 180×180 para Apple touch icon (pantalla de inicio iOS); PNG 192×192 y 512×512 para Android/PWA; un favicon SVG para navegadores modernos; y un archivo ICO para compatibilidad con navegadores legacy.

ICO vs PNG vs SVG favicon

El formato ICO es un contenedor que puede contener múltiples tamaños de imagen en un archivo — históricamente el estándar pero cada vez más reemplazado por PNG. Los favicons PNG son ampliamente compatibles y ofrecen transparencia. Los favicons SVG son compatibles con Chrome, Firefox y Edge modernos — se escalan perfectamente y pueden adaptarse al modo oscuro/claro vía consultas CSS.

Herramienta gratuita Conversor SVG a PNG Convierte archivos SVG a PNG en cualquier resolución

Etiquetas HTML link para favicon

Coloca etiquetas link de favicon en el head de tu HTML. La configuración mínima moderna: una etiqueta rel="icon" apuntando a tu SVG o PNG, una etiqueta rel="apple-touch-icon" para iOS, y una etiqueta rel="manifest" para PWA. El archivo ICO en la raíz (/favicon.ico) es recogido automáticamente por los navegadores.

Apple touch icon e iconos PWA

Cuando los usuarios añaden tu sitio a su pantalla de inicio iOS, Safari usa el apple-touch-icon. El tamaño preferido es 180×180 píxeles. Para Android y Progressive Web Apps, especifica iconos en tu archivo manifest.json con al menos versiones PNG de 192×192 y 512×512.

Consejos de diseño para iconos pequeños

Los favicons deben ser legibles a 16×16 píxeles — evita ilustraciones complejas. Usa una sola letra en negrita o una forma geométrica simple. Asegura alto contraste entre el icono y el cromo del navegador. Evita trazos delgados que desaparecen a tamaños pequeños.

Herramienta gratuita Codificador de Imagen a Base64 Incrusta imágenes como cadenas Base64 en HTML y CSS

Preguntas frecuentes

¿Cuál es el tamaño mínimo de favicon? +
El mínimo es 16×16 píxeles. Sin embargo, las configuraciones modernas requieren múltiples tamaños: 32×32 para pantallas de mayor DPI, 180×180 para iOS y 192×192 para PWA.
¿Puedo usar solo un archivo favicon? +
Puedes usar un solo favicon SVG para navegadores modernos, pero para compatibilidad completa necesitas un archivo ICO y archivos PNG para dispositivos Apple.
¿El favicon afecta al SEO? +
Directamente no — Google no usa los favicons como factor de ranking. Indirectamente, un favicon profesional mejora el reconocimiento de marca y las tasas de clics desde marcadores y resultados de búsqueda.
¿Cómo implemento soporte para modo oscuro en mi favicon? +
Los favicons SVG soportan el modo oscuro mediante consultas de medios CSS dentro del archivo SVG. Usa una consulta prefers-color-scheme para cambiar entre variantes de iconos claros y oscuros.
¿Por qué mi favicon no se actualiza después del despliegue? +
Los favicons son cacheados agresivamente por los navegadores. Para forzar una actualización, renombra el archivo favicon y actualiza la etiqueta link HTML, o añade una cadena de consulta como ?v=2.
¿Qué es un icono de manifiesto de aplicación web? +
Los iconos de manifiesto de aplicación web se definen en el archivo manifest.json de tu sitio y se usan cuando los usuarios instalan tu PWA en su pantalla de inicio.
¿Debería mi favicon tener un fondo transparente? +
Depende del tema del navegador. Los favicons transparentes lucen bien en navegadores de tema oscuro pero pueden ser invisibles en fondos claros. Un fondo de color sólido es generalmente más seguro.