Favicon para WordPress

WordPress maneja de forma nativa la inyección de favicon a través de la función Icono del sitio, introducida en WordPress 4.3. Cuando carga una imagen en Customizer, WordPress la recorta automáticamente, genera variantes más pequeñas e inyecta las etiquetas `<link rel='icon'>` y `<link rel='apple-touch-icon'>` correctas en cada página. No se necesita ningún complemento ni cambio de código para la gran mayoría de los sitios.

Para acceder a la configuración del ícono del sitio, inicie sesión en su panel de administración WordPress y navegue hasta Apariencia > Personalizar. En la barra lateral izquierda, haga clic en Identidad del sitio. Verá el campo de carga del ícono del sitio cerca de la parte inferior del panel. Haga clic en Seleccionar imagen, cargue su icono, recórtelo si se le solicita y haga clic en Publicar. Su favicon se activa inmediatamente cuando se carga la siguiente página.

WordPress requiere un tamaño de imagen mínimo de 512 × 512 píxeles para el ícono del sitio. Cargue un PNG cuadrado con esa resolución o mayor: WordPress generará variantes más pequeñas (16×16, 32×32, 180×180) automáticamente desde la fuente. Nunca cargue una imagen pequeña y espere que WordPress la amplíe; el resultado será un icono borroso en las pestañas del navegador.

PNG es el formato recomendado para cargar favicon WordPress. La plataforma también admite JPEG y GIF, pero JPEG no admite transparencia y GIF proporciona una compresión deficiente para logotipos fotográficos. Un fondo transparente PNG garantiza que su icono se vea limpio en cualquier tema del navegador, incluidas las barras de pestañas del modo oscuro.

Si su tema utiliza el editor de sitio Gutenberg (Edición completa del sitio), la ruta del icono del sitio puede diferir ligeramente. Busque en Apariencia > Editor > Estilos o use la configuración del bloque del logotipo del sitio. Algunos temas de bloque también exponen un campo de favicon en el panel de Configuración global. La función subyacente WordPress es la misma: solo cambia la ruta de la interfaz de usuario del administrador.

Para un control avanzado (por ejemplo, mostrar un favicon diferente en el subdirectorio de la tienda y en el blog), puede anular la URL del icono del sitio mediante programación. Agregue esto al functions.php de su tema o a un complemento específico del sitio: `add_filter('get_site_icon_url', function($url, $size, $blog_id) { return 'https://example.com/custom-favicon.png'; }, 10, 3);`. Esto omite por completo el Customizer y le permite mostrar cualquier ícono desde cualquier URL.

Algunos complementos de creación de páginas (Elementor, Divi, Beaver Builder) agregan su propia configuración de favicon que puede entrar en conflicto con WordPress Customizer. Verifique el panel de configuración del sitio del creador de páginas y elimine cualquier anulación de favicon allí, luego vuelva a configurarlo a través del WordPress Customizer nativo. Tener dos etiquetas de favicon que compitan en la misma página puede producir resultados inconsistentes en todos los navegadores.

Las instalaciones multisitio WordPress requieren que cada subsitio tenga su propio ícono de sitio configurado individualmente. La configuración del administrador de red no se aplica en cascada a los subsitios. Si desea un favicon compartido en toda la red, utilice el enfoque de filtro programático y conéctese a la URL del ícono del sitio a nivel de red usando un complemento imprescindible (mu-plugins).

Los complementos de almacenamiento en caché como WP Rocket, W3 Total Cache o LiteSpeed Cache pueden retrasar las actualizaciones de favicon. Después de cambiar el ícono de su sitio, borre todas las capas de caché: el caché de objetos WordPress, el caché de la página, el caché de su CDN y el caché de su navegador. Si el ícono anterior persiste, agregue `?v=2` al enlace de favicon manualmente en el HTML o espere a que caduque el TTL de caché.

Para comprobar que WordPress genera las etiquetas de favicon correctas, haga clic con el botón derecho en su sitio en un navegador, seleccione Ver código fuente de la página y busque `rel='icon'`. Debería ver una entrada favicon.ico y una entrada apple-touch-icon apuntando a la imagen cargada. Si falta alguno de ellos, es posible que su tema esté anulando `wp_head()`; asegúrese de llamar a `<?php wp_head(); ?>` en el header.php de su tema.

Los complementos de SEO WordPress de terceros, como Yoast SEO y Rank Math, incluyen sus propios metadatos sociales y de esquema, pero no interfieren con el ícono del sitio. Sin embargo, si instaló un complemento específico de favicon hace años antes de que WordPress agregara soporte nativo, ese complemento ahora puede entrar en conflicto. Desactive cualquier complemento de favicon heredado antes de usar la opción Customizer incorporada.

Para los sitios alojados en WordPress.com (a diferencia de WordPress.org autohospedado), la ruta del favicon se encuentra en Mis sitios > Configuración > General > Icono del sitio. Los pasos son casi idénticos al flujo Customizer autohospedado, pero la edición de temas y los complementos están limitados según su plan. Cargue un PNG de 512 × 512 y guárdelo: WordPress.com se encarga de todo el cambio de tamaño y la inyección de etiquetas.

Después de configurar su favicon, verifique que funcione correctamente usando favicon tester ingresando la URL de su sitio. Esto confirma que el ícono es accesible públicamente y aparece en la ruta esperada. También verifique best favicon size para comprender qué resoluciones genera WordPress y si necesita agregar alguna manualmente para compatibilidad con PWA.