¿Cómo arreglar el Favicon de WordPress que no se muestra en los navegadores?

Favicon es un pequeño icono que se muestra en la barra de título del navegador. Los navegadores utilizan este icono para mostrar la pestaña cuando fijas la página web. Algunos motores de búsqueda también muestran el favicon en los resultados de búsqueda, lo que lo convierte en un ícono de marca para sitios web. Google es un buen ejemplo de que la mayoría de nosotros puede encontrar el icono G simple que indica el sitio web de búsqueda de Google. Sin embargo, hay muchas razones por las que su favicon de WordPress puede no ser visible en navegadores como Google Chrome. Si tiene dificultades para solucionar el problema, estas son algunas de las entradas que puede probar.

Favicon de WordPress en el navegador

A continuación se muestra cómo se mostrará un favicon en el navegador de escritorio Google Chrome.

Cuando fijas la pestaña, Chrome usará el favicon para esa pestaña como se muestra a continuación.

Chrome también muestra el ícono del caché en la barra de direcciones cuando intentas abrir el sitio. De manera similar, puede ver el ícono de favicon o del sitio en la aplicación móvil de Chrome al ver todas las pestañas abiertas.

Casi todos los navegadores, tanto en computadoras de escritorio como en dispositivos móviles, también usan el favicon como íconos de acceso directo en la página de nueva pestaña. Tenga en cuenta que la Búsqueda de Google anterior mostraba el favicon del sitio en la página de resultados. Sin embargo, Google eliminó el favicon del último diseño de resultados de búsqueda.

Corregir WordPress Favicon que no se muestra en Google Chrome

Si no puede ver el favicon de su sitio en Google Chrome o en cualquier otro navegador, siga las siguientes soluciones para solucionar el problema.

1. Verifique la configuración de Favicon de WordPress

WordPress le permite agregar un favicon a su sitio web. Después de iniciar sesión en su panel de administración, vaya a la sección "Apariencia> Personalizar> Identidad del sitio" y cargue su imagen de favicon. A diferencia de los tamaños de imagen de favicon estándar, el icono del sitio de WordPress debe tener 512 x 512 píxeles.

Puede cargar una imagen .PNG para el ícono de su sitio y después de cargar la imagen, verifique si se muestra correctamente en el navegador cuando está en el panel de administración. Si funciona correctamente, abra el sitio publicado para ver si la imagen se muestra en la barra de título.

2. Elimina el favicon de tu tema

Muchos temas comerciales ofrecen un panel de tema personalizado para cargar logotipos y favicon. Si ya está utilizando la función de icono de sitio predeterminado de WordPress, asegúrese de deshabilitar la configuración de su tema para favicon. Esto ayudará a evitar la superposición del uso de la misma función en diferentes lugares, lo que podría confundir al navegador al no mostrar el icono.

3. Utilice el complemento Favicon

El tamaño de favicon recomendado para mostrar en la barra de título del navegador es 16 x 16 o 32 x 32 o 48 x 48 píxeles. Sin embargo, WordPress sugiere usar 512 x 512 píxeles ya que WordPress usa el mismo ícono que el ícono de la aplicación móvil. Desafortunadamente, este tamaño de imagen más grande puede causar problemas para mostrar correctamente su imagen. Dado que necesita diferentes tamaños de imagen para diferentes dispositivos, puede probar complementos de favicon como RealFaviconGenerator.

• Primero, instale y active el complemento en su sitio.

• Vaya al menú "Configuración> Favicon" y habilite "Mostrar notificaciones de actualización" para recibir información cuando haya una actualización del complemento.

• Vaya a la sección "Apariencia> Favicon" y seleccione su favicon de la Biblioteca de medios. Si no tiene el icono, deje en blanco "URL de imagen maestra" y haga clic en el botón "Generar favicon".

• Esto lo llevará al sitio web del desarrollador donde puede generar un favicon usando una opción diferente. Recomendamos generar un icono con la herramienta de generador de favicon gratuita y cargarlo como su imagen maestra.

• Desplácese hacia abajo y haga clic en el botón "Generar su favicon y código HTML".

• Serás llevado automáticamente al panel de administración y verás la vista previa de tus imágenes en diferentes plataformas. También puede verificar su favicon instantáneamente para ver cómo se ve en el navegador.

Cuando observa el código fuente de su sitio, el complemento agregará muchas metaetiquetas de enlace para admitir diferentes dispositivos.

Puede probar este complemento para agregar un archivo favicon.ico de 48 x 48 píxeles si el icono predeterminado del sitio de WordPress no funciona en su sitio. Además, el complemento te ayudará a generar íconos para diferentes dispositivos como iOS y macOS Safari. Lo único que necesita es mantener el complemento activo para poder usar favicon continuamente en su sitio.

Nota: a diferencia de todas las demás solicitudes de imagen que puede ver en la consola de desarrollo del navegador, no verá la solicitud de imagen de favicon. Por lo tanto, debe ver la fuente de la página y encontrar que la imagen del favicon está vinculada en la metaetiqueta del encabezado.

4. Subir favicon manualmente

Si la opción de favicon predeterminada de WordPress no funciona y tampoco desea utilizar el complemento por algún motivo, puede intentar cargar manualmente su propio favicon.

• Prepare su imagen de favicon desde la herramienta gratuita de generación de favicon. Asegúrese de que la imagen esté en formato .ico, .gif o .png con un tamaño de 16 x 16 píxeles.
• Inicie sesión en su servidor web usando FTP o use la aplicación File Manager en el panel de alojamiento y cargue la imagen del favicon en el directorio raíz de su instalación de WordPress. Si desea cargar la imagen desde la Biblioteca de medios en el panel de administración, asegúrese de usar la ruta del archivo correcta.
• Si tiene alguna duda, abra el archivo de imagen en el navegador. Debería poder acceder a la imagen de manera similar a cualquier otra imagen en su sitio.
• Ahora, vaya a "Apariencia> Editor de temas" y busque el archivo header.php de su tema.
• Pegue el siguiente código en su archivo header.php junto con otras metaetiquetas.

 <link rel="icon" type="image/png" href="/favicon.png">

• Debería verse como a continuación y recuerde usar la URL correcta para su imagen de favicon.

• Haga clic en el botón "Actualizar archivo" para guardar el cambio.
• Si no desea editar el archivo del tema para este propósito, puede usar complementos como Insertar encabezados y pies de página y pegar el código anterior en el área de la sección del encabezado.

Ahora abra su sitio y verifique que el favicon esté visible en la barra de título.

5. Eliminar favicon de alojamiento predeterminado

Uno de los otros problemas con favicon es que muchas empresas de alojamiento como Bluehost y HostGator utilizan sus propios iconos en algunas páginas. Por ejemplo, cuando vea las imágenes o vea el código fuente, verá los íconos de HostGator y Bluehost en lugar del ícono de su sitio.

Esto no sucede con SiteGround y otras empresas de alojamiento. Lo que puede hacer es verificar la instalación raíz para ver si hay algún favicon disponible y reemplazarlo con su propio ícono. De lo contrario, comuníquese con el soporte de alojamiento para verificar si esto se puede resolver en absoluto.

Otro problema que puede ocurrir es debido a la ubicación del favicon. En nuestro sitio, utilizamos un subdominio separado para mantener todos los archivos multimedia. Esto podría crear un problema si no proporciona la ruta de la imagen correcta en el valor href del meta enlace. Por lo tanto, asegúrese de proporcionar la ruta correcta y pruebe que su imagen sea accesible en la ubicación que proporcionó para evitar problemas.

6. Favicon en Mac Safari

Algunos navegadores como Safari en macOS funcionan de manera diferente. Puede habilitar o deshabilitar favicon según sus necesidades. Consulte nuestro artículo sobre cómo habilitar favicon en Safari y asegúrese de haber habilitado esta configuración si su navegador ofrece esta función.

7. Limpie su sitio y la caché del navegador

Si está cambiando el icono o usando una imagen diferente con el mismo nombre de archivo, asegúrese de borrar su caché.

• Borre el caché de su sitio si está utilizando complementos de almacenamiento en caché como WP Rocket, W3 Total Cache, etc.
• A continuación, cierre la sesión de su panel de administración y presione "Control + Mayús + Suprimir" en Windows o "Comando + Mayús + Suprimir" en macOS. Esto abrirá una ventana emergente clara del historial de navegación. Seleccione las opciones "Historial de exploración" y "Imágenes y archivos en caché" y elimínelos.
• Ahora, abra su sitio y verifique que muestre el favicon correcto en el navegador.

En dispositivos móviles, debe ir a la sección de configuración o historial y borrar sus datos de navegación.

Ultimas palabras

El favicon anterior solo lo utilizan los navegadores. Sin embargo, la misma etiqueta de meta enlace se usa para diferentes íconos como apple-touch-icon para iOS. Por lo tanto, es una buena idea usar todos los íconos necesarios en su sitio y probar que funcionan en el navegador y otros dispositivos. El ícono predeterminado del sitio de WordPress puede no ser suficiente en este caso y debe usar sus propias metaetiquetas o usar un tema o complemento que ofrezca esta función.