El ícono del sitio de WordPress (también conocido como favicon) aparece por defecto en la pestaña del navegador de tu sitio web.
Si bien funciona bien cuando solo estás trabajando en tu nuevo sitio, muchos propietarios de sitios web prefieren reemplazarlo o eliminarlo para reflejar mejor la identidad de su marca.
Hemos creado muchos sitios web en WordPress, incluidos blogs y tiendas de comercio electrónico, y algo que siempre hacemos es reemplazar el icono predeterminado con un favicon que represente nuestra marca.
Este simple cambio nos ha ayudado a fortalecer la identidad de nuestra marca, hacer que nuestros sitios parezcan más confiables y mejorar su atractivo visual general.
En este artículo, te mostraremos cómo eliminar fácilmente el icono de WordPress de la pestaña del navegador.
💡Respuesta rápida: Eliminar el ícono de WordPress
¿Tienes prisa? Aquí tienes las formas más fáciles de eliminar el ícono de WordPress en la pestaña del navegador:
- Método 1 (Nativo): Ve a Apariencia » Personalizar » Identidad del sitio (o el Editor de sitio en temas de bloques) para simplemente subir tu propio logo.
- Método 2 (Plugin): Usa un plugin como Custom Favicon para agregar el favicon fácilmente.
¿Por qué eliminar el icono de WordPress de la pestaña del navegador?
Mostrar el ícono predeterminado de WordPress (favicon) en la pestaña del navegador de tu sitio web puede hacer que parezca genérico.
Al reemplazarlo con un Ícono de Sitio personalizado, mejoras tu sitio de tres maneras clave:
- Fortalece la identidad de marca: Reemplazar el logo predeterminado con el tuyo asegura que tu marca sea visible incluso cuando el usuario no está mirando directamente el contenido de tu página.
- Mejora la experiencia del usuario: La mayoría de los usuarios tienen muchas pestañas abiertas a la vez. Un ícono único les ayuda a identificar instantáneamente tu sitio entre el desorden y a volver a él de manera eficiente.
- Aumenta la confiabilidad: Dejar el ícono predeterminado de WordPress puede hacer que un sitio parezca "en construcción" o poco profesional. Un ícono personalizado señala atención al detalle.
Ahora, veamos cómo eliminar fácilmente el ícono de WordPress de la pestaña del navegador. En este tutorial, cubriremos dos métodos para que puedas elegir el que mejor te funcione:
Método 1: Eliminar el ícono de WordPress sin un plugin
Si estás utilizando un tema de bloques en WordPress, entonces puedes usar este método para eliminar el ícono de WordPress en la pestaña del navegador. Esta es la forma más fácil porque no necesitas instalar ninguna herramienta adicional.
En el momento de escribir este tutorial, el tema predeterminado de WordPress, Twenty Twenty-Three, no tiene un bloque de ícono del sitio para cambiar tu favicon del logotipo de WordPress.
Primero, debes navegar a Apariencia » Editor desde tu panel de administración de WordPress para abrir el editor completo del sitio.
Sin embargo, no puedes cambiar tu favicon desde aquí ni eliminar el ícono de WordPress de la pestaña del navegador. Para hacer esto, copia y pega la siguiente URL en tu navegador para abrir el personalizador del tema:
https://example.com/wp-admin/customize.php
Recuerda reemplazar 'ejemplo.com' con el nombre de dominio de tu propio sitio.
Esta URL te llevará al Personalizador del Tema, donde deberás hacer clic en la pestaña 'Identidad del sitio'.
Una vez que estés allí, desplázate hacia abajo hasta la sección 'Ícono del sitio'.
Desde aquí, simplemente haz clic en el botón 'Seleccionar ícono del sitio' para abrir la biblioteca de medios de WordPress.
Ahora puedes seleccionar cualquier imagen que desees usar como favicon para reemplazar el ícono de WordPress en la pestaña del navegador.
Para más detalles sobre cómo crear un favicon, puedes consultar nuestro tutorial sobre cómo agregar un favicon en WordPress. Si la imagen que has elegido usar como favicon excede el tamaño recomendado, WordPress te permitirá recortarla.
Una vez que estés satisfecho con tu elección, simplemente haz clic en el botón ‘Publicar’ en la parte superior.
Eliminar el ícono de WordPress en un tema sin edición de sitio completo
Si estás utilizando un tema clásico, puedes navegar directamente al Personalizador de temas en Apariencia » Personalizar para eliminar el ícono de WordPress de la pestaña del navegador.
En sitios que no admiten el editor de sitio completo, el personalizador de temas de WordPress te permite cambiar detalles sobre tu sitio, como el favicon, la tipografía, los colores predeterminados, el pie de página y más.
Una vez en el Personalizador de temas, haz clic en la pestaña 'Identidad del sitio'. El proceso es el mismo que el que mostramos anteriormente. Puedes eliminar el icono de WordPress simplemente cargando un icono de sitio de tu elección.
Una vez que estés satisfecho con tu elección, haz clic en el botón ‘Publicar’ para guardar tus cambios.
Método 2: Eliminar el ícono de WordPress usando un plugin
También puedes usar un plugin para eliminar el icono de WordPress y reemplazarlo con un favicon.
Primero, necesitas instalar y activar el plugin Custom Favicon. Para más detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
Tras la activación, visita la página Ajustes » Favicon Personalizado desde el panel de WordPress y haz clic en el botón ‘Subir’ junto a la opción ‘Favicon (Predeterminado)’.
Esto abrirá la biblioteca de medios de WordPress. Ahora, puedes elegir y cargar cualquier imagen que desees usar como favicon.
Después de eso, marca la opción ‘Desactivar Ícono del Sitio de WordPress’ para asegurarte de que el ícono del sitio predeterminado de WordPress esté desactivado.
Luego, desplázate hacia abajo y haz clic en el botón ‘Guardar Cambios’.
Has eliminado con éxito el icono de WordPress y has añadido un favicon en su lugar.
Extra: Agregar notificación en la pestaña del navegador en WordPress
Además de agregar un favicon personalizado para captar la atención del usuario, también puedes agregar notificaciones en la pestaña del navegador para recuperar clientes.
Esta notificación es un mensaje que se mostrará en la pestaña de tu navegador cuando el usuario esté enfocado en un sitio web diferente. Puede ayudar a reducir las tasas de abandono de carritos e impulsar más tráfico a tu sitio.
Puedes añadir fácilmente una notificación en la pestaña del navegador en WordPress usando WPCode. Es el mejor plugin de fragmentos de código de WordPress del mercado que hace que sea seguro y fácil añadir código personalizado a tu sitio web.
Una vez instalado el plugin, todo lo que tienes que hacer es visitar la página Fragmentos de código » + Añadir fragmento desde la barra lateral de administración de tu WordPress y hacer clic en ‘Usar fragmento’ en la opción ‘Añadir tu código personalizado (Nuevo fragmento)’.
Esto te llevará a la página ‘Crear fragmento personalizado’, donde debes seleccionar ‘Fragmento de JavaScript’ como el ‘Tipo de código’ en el menú desplegable de la derecha.
Después de eso, agrega el siguiente código personalizado en el cuadro ‘Vista previa del código’:
let count = 0;
const title = document.title;
function changeTitle() {
count++;
var newTitle = '(' + count + ') ' + title;
document.title = newTitle;
}
function newUpdate() {
const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );
Finalmente, haz clic en el botón 'Guardar fragmento' y cambia el interruptor de 'Inactivo' a 'Activo'.
Has agregado exitosamente una notificación en la pestaña del navegador a tu sitio web que muestra el número de nuevas actualizaciones.
Si deseas mostrar un mensaje o cambiar los favicons en la pestaña de tu navegador, puedes ver nuestro tutorial completo sobre cómo agregar fácilmente notificaciones en la pestaña del navegador en WordPress.
Preguntas Frecuentes Sobre Favicons de WordPress
Aquí hay algunas preguntas que nuestros lectores hacen con frecuencia sobre cómo eliminar el ícono de WordPress de la pestaña del navegador:
¿Qué es el ícono de WordPress en la pestaña del navegador?
El pequeño logo que ves junto al título de una página en la pestaña del navegador se llama oficialmente Ícono del Sitio, aunque a menudo se le llama favicon.
En WordPress, esto generalmente se configura en Ajustes » General (o Apariencia » Personalizar » Identidad del sitio). Si no lo has personalizado, WordPress usa su logo predeterminado allí.
Aunque pueda parecer algo menor, esta pequeña imagen ayuda a los usuarios a identificar rápidamente tu sitio entre muchas pestañas. Dejar el ícono predeterminado puede hacer que tu sitio se sienta genérico y podría afectar el reconocimiento de tu marca.
¿Por qué sigo viendo el ícono de WordPress incluso después de eliminarlo?
Si ha reemplazado o eliminado el favicon de WordPress pero aún se muestra, esto suele suceder porque su navegador o sitio web todavía está sirviendo una versión en caché del ícono anterior.
Aquí hay algunas cosas que puedes verificar:
- Borra la caché de tu navegador y la caché del sitio: Los navegadores tienden a almacenar las imágenes de los favicons de forma agresiva. Intenta borrar la caché de tu navegador o actualiza la página con Ctrl + F5 (Windows) o Command + Shift + R (Mac).
- Limpia la caché de la CDN: Si tu sitio está conectado a una red de entrega de contenido (CDN) como Cloudflare, podría estar sirviendo una versión antigua de tu favicon. Inicia sesión en tu cuenta de CDN y limpia la caché para asegurarte de que se muestre tu nuevo ícono.
- Verifique las anulaciones de temas o complementos: Algunos temas y complementos tienen su propia configuración de favicon que puede anular su ícono global del sitio. Asegúrese de que no haya un favicon configurado en las opciones de su tema o en un complemento, como un constructor de páginas o una herramienta de SEO.
- Elimina los enlaces de favicon codificados: En casos raros, un favicon podría estar codificado en el archivo header.php de tu tema. Busca cualquier etiqueta
<link rel="icon"...>o<link rel="shortcut icon"...>y elimínalas o actualízalas según sea necesario.
Después de realizar estos cambios, actualiza tu sitio en una ventana de navegador de incógnito o privada para ver si el nuevo favicon se muestra correctamente.
¿Qué pasos debo seguir para asegurarme de que mi favicon se muestre correctamente en todos los dispositivos?
Usar el formato y tamaño de favicon correctos ayuda a asegurar que se muestre adecuadamente en todos los dispositivos y navegadores. Si tu favicon se ve borroso o no se actualiza correctamente, sigue estas mejores prácticas:
- Usa imágenes cuadradas de al menos 512×512 píxeles
- Incluye un archivo
.icopara compatibilidad - Agrega las etiquetas HTML
<link rel="icon">adecuadas en el encabezado de tu sitio - Borra la caché del navegador y del sitio
Siguiendo estos consejos, tu favicon se mostrará correctamente, se verá nítido y ayudará a fortalecer la identidad de marca de tu sitio.
Esperamos que este artículo te haya ayudado a aprender cómo eliminar el ícono de WordPress de la pestaña del navegador. También te puede interesar nuestra guía para principiantes sobre cómo obtener comentarios sobre el diseño de sitios web en WordPress y nuestros mejores ejemplos de sitios web de WordPress que deberías consultar.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Tengo un sitio web con el tema Sydney y probé todos los métodos posibles para agregar un favicon al sitio. Nunca había tenido un problema con él antes, y todo siempre funcionó bien. Estaba desesperado, así que probé a usar un plugin por primera vez y usé Heroic Favicon Generator. No estoy seguro de dónde estaba el problema, pero gracias al plugin, logré poner el favicon en el sitio de inmediato. Una herramienta muy útil cuando nada más funciona.