Cómo Probar Tu Favicon - Guía Completa de Pruebas (2025)
Prueba tu favicon en Chrome, Firefox, Safari y navegadores móviles. Lista de verificación paso a paso para confirmar que los favicons funcionan correctamente en todos los dispositivos y plataformas.
Has generado tu paquete de favicon y lo has instalado en tu sitio. Ahora viene la gran pregunta: ¿realmente funciona en todas partes? Probar favicons es más complicado de lo que piensas: los navegadores los almacenan en caché de forma agresiva, y diferentes plataformas tienen diferentes requisitos.
Esta guía te da una lista de verificación práctica para confirmar que tu favicon funciona en todos los navegadores principales (Chrome, Firefox, Safari, Edge) y en dispositivos móviles (iOS, Android). Toma alrededor de 10-15 minutos completar la lista completa.
Paso 1: Verificación rápida en tu navegador principal
Comienza con el navegador que usas todos los días. Abre tu sitio en una pestaña nueva y mira el ícono de la pestaña. Si ves tu nuevo favicon, ¡genial! Pero no te detengas aquí: los navegadores almacenan favicons en caché, así que podrías estar viendo una versión antigua.
Haz una recarga forzada para evitar la caché: presiona Ctrl+F5 (Windows/Linux) o Cmd+Shift+R (Mac). El favicon debería recargarse. Si todavía se ve mal o muestra el ícono antiguo, abre una ventana de incógnito/privada (Ctrl+Shift+N o Cmd+Shift+N) para ver lo que verán los nuevos visitantes.
Paso 2: Prueba en múltiples navegadores
No asumas que tu favicon funciona en todas partes solo porque funciona en Chrome. Abre tu sitio en al menos 3 navegadores diferentes en la misma computadora: Chrome, Firefox y Safari (o Edge si estás en Windows). Cada navegador maneja los favicons de manera ligeramente diferente.
En cada navegador, verifica el ícono de la pestaña, marca la página y mira el historial. El favicon debería aparecer de manera consistente. Si funciona en Chrome pero no en Firefox, probablemente te falta un tamaño específico (como 16×16) o formato (como ICO). Usa nuestro Convertidor de Imágenes para regenerar el paquete completo.
Si tienes acceso tanto a macOS como a Windows, prueba en ambos. Safari en Mac y Edge en Windows a veces tienen peculiaridades específicas de la plataforma. Si no tienes ambos, pide a un amigo o usa un servicio como BrowserStack para probar de forma remota.
Paso 3: Inspecciona las solicitudes de favicon con DevTools
Abre DevTools (presiona F12), ve a la pestaña Network y recarga tu página (Ctrl+R o Cmd+R). Filtra por "favicon" o "icon" para ver qué archivos está solicitando el navegador. Deberías ver solicitudes para favicon.ico, favicon-16x16.png, favicon-32x32.png y tal vez apple-touch-icon.png.
Busca errores 404 (archivo no encontrado). Si ves alguno, el navegador está buscando un archivo que no existe. Verifica la ruta del archivo en el error: te dirá dónde el navegador esperaba encontrar el archivo. Asegúrate de haber subido todos los archivos del ZIP a la carpeta correcta (generalmente el directorio raíz de tu sitio).
Verifica los tamaños de archivo. Los favicons deberían ser pequeños, generalmente menos de 10 KB cada uno. Si ves un favicon de 500 KB, algo está mal (tal vez subiste el archivo incorrecto o no lo comprimiste). Los favicons grandes ralentizan la carga de la página, especialmente en móviles.
Paso 4: Depura problemas comunes de favicon
Problema: El favicon funciona para ti pero no para otros usuarios. Esto es casi siempre un problema de caché. Tu navegador almacenó en caché el nuevo ícono, pero los navegadores de otros usuarios (o tu CDN) todavía están sirviendo el antiguo. Solución: Agrega un número de versión a los nombres de tus archivos de favicon (favicon-v2.ico) o agrega una cadena de consulta (?v=2) para forzar a los navegadores a descargar los nuevos archivos.
Problema: El favicon se ve borroso o pixelado. Probablemente no proporcionaste suficientes tamaños para pantallas de alta DPI (pantallas Retina, monitores 4K). Asegúrate de tener archivos PNG de 32×32 y 48×48, no solo 16×16. Si tu imagen de origen era de baja resolución, regenera el paquete de favicon desde un logo de mayor calidad (al menos 512×512).
Problema: El favicon no aparece en absoluto. Verifica tu sección HTML <head>: las etiquetas <link rel="icon"> deberían estar allí, no en el <body>. Abre la Consola de DevTools (F12) y busca errores. Si ves "Failed to load resource" o errores 404, las rutas de archivo son incorrectas. Compara tu HTML con el fragmento de código de nuestro Convertidor de Imágenes.
¿Pasaron todas las pruebas?
Si tu favicon aparece correctamente en todos los navegadores y en dispositivos móviles, ¡has terminado! Documenta qué navegadores y dispositivos probaste para que puedas repetir el proceso después de futuras actualizaciones. Si encontraste problemas, consulta nuestro tutorial de Solución de Problemas para correcciones específicas.