¿Quieres agregar un favicon a tu blog de WordPress?
Un favicon o ícono de sitio es una pequeña imagen que aparece en la pestaña de su navegador web junto al título de su sitio web. Si bien puede parecer un elemento trivial, un favicon bien diseñado puede ayudar a que tu blog se destaque en un espacio en línea abarrotado.
En este artículo, le mostraremos cómo agregar un favicon a su blog de WordPress. De esta manera, puede causar una impresión memorable a sus visitantes.
¿Por qué deberías agregar un favicon a tu blog de WordPress?
Es esencial agregar un favicon a su blog de WordPress porque ayuda a los usuarios a identificar rápidamente su sitio web y fortalece su identidad de marca. Desde ese pequeño ícono, los visitantes del sitio pueden reconocer fácilmente su blog.
Así es como se ve un favicon en un navegador web:
Otro propósito de un favicon de WordPress es mejorar la experiencia del usuario. Cuando hay varias pestañas abiertas, los usuarios pueden mirar los favicons para ver en qué sitio web se encuentran y navegar hasta el que desean.
Si los usuarios agregan un ícono de enlace o un marcador a su blog en sus dispositivos móviles, el favicon aparecerá como ícono de la aplicación en la pantalla de inicio. Esto les permite acceder fácilmente a su sitio web con un simple toque.
Cómo crear un favicon para tu blog de WordPress
Primero, aprendamos cómo crear un buen favicon para tu blog.
El tamaño ideal del favicon de WordPress es una imagen cuadrada de hasta 512 píxeles tanto de ancho como de alto. El formato de imagen del favicon puede ser ICO, JPEG, PNG o GIF.
Si tiene un blog empresarial, puede utilizar el logotipo de su marca como icono de favicon. Si aún no tiene uno, consulte nuestra guía para principiantes sobre cómo crear un logotipo para su sitio web.
Si tiene un logotipo listo pero desea que el fondo sea transparente, puede utilizar una herramienta de edición de imágenes gratuita con eliminación automática del fondo. Asegúrese de que el archivo esté guardado en PNG para mantener la transparencia en el favicon.
Otra opción que puedes utilizar es un generador de favicon gratuito como Favicon.io. Esta herramienta te permite personalizar un favicon desde cero y descargar los archivos en formatos PNG e ICO.
Dicho esto, echemos un vistazo a cómo agregar fácilmente un favicon a su blog de WordPress. Cubriremos 4 métodos y puede hacer clic en los enlaces a continuación para ir al método que desea utilizar:
Método 1: agregar un favicon usando el personalizador de WordPress
Este es el método más sencillo para editar un favicon en WordPress. Todo lo que tienes que hacer es subir tu imagen de favicon al personalizador de WordPress y nosotros nos encargaremos del resto.
El primer paso es acceder al personalizador de WordPress. Si utilizas un tema clásico, puedes acceder Yo espero ” personalizar para hacer esto.
Si está utilizando un tema de bloque y no puede encontrar el personalizador, consulte nuestra guía sobre cómo solucionar el personalizador de tema que falta en el administrador de WordPress.
A continuación, haga clic en la pestaña “Identidad del sitio” en la barra lateral izquierda.
Aquí verá opciones para personalizar el logotipo del sitio, el título del sitio, el eslogan y el ícono del sitio.
Si desea agregar el favicon de un sitio, deberá desplazarse hacia abajo hasta la sección “Icono del sitio” y hacer clic en “Seleccionar icono del sitio”.
Ahora aparecerá su biblioteca multimedia de WordPress. Puede seleccionar una imagen existente o cargar un nuevo favicon personalizado desde su computadora.
En este ejemplo, usaremos el logotipo de WPBeginner como ícono del sitio de WordPress.
Después de elegir una imagen, haga clic en el botón “Seleccionar” en la esquina inferior derecha de la ventana.
Si el favicon es mayor que el tamaño recomendado, WordPress le permitirá recortarlo. Si coincide exactamente con el tamaño recomendado, puedes dejarlo como está.
Una vez que la imagen se vea bien, haga clic en “Recortar imagen”.
Después de eso, serás redirigido al personalizador de WordPress. Aquí, todo lo que necesitas hacer es hacer clic en el botón “Publicar” en la barra lateral izquierda para completar la configuración del favicon.
¡Eso es todo! Ahora que has subido tu favicon, puedes visitar tu sitio web de WordPress para ver si la imagen ya está activa.
Método 2: agregue un favicon usando el editor de sitio completo de WordPress
Si está utilizando un tema de bloque y desea agregar el logotipo de su marca como parte del encabezado de su sitio web y como ícono del sitio, entonces este método es para usted.
Para esto tienes que ir a yo espero » editor desde el panel de administración de WordPress.
En esta página encontrará varios menús para personalizar su sitio web, incluidos Navegación y Estilos.
Para este tutorial, deberá hacer clic en “Plantillas” para acceder al diseño del bloque de encabezado de su sitio web.
A medida que se desplaza hacia abajo, verá diferentes partes de la plantilla: encabezado, pie de página y general.
Simplemente haga clic en la plantilla “Encabezado” para agregar su favicon allí.
A continuación, verá un botón de lápiz al lado del texto del encabezado.
Haz clic en él para que puedas editar el patrón e insertar tu favicon de WordPress.
Ahora estás en la experiencia completa de edición de sitios de WordPress.
Ahora, haga clic en el botón Agregar bloque “+” y busque el bloque Logotipo del sitio. Aquí es donde agregarás la imagen que se convertirá en tu favicon de WordPress.
Siéntete libre de arrastrar y soltar el bloque donde quieras en el encabezado. En este ejemplo, lo colocamos junto al título del sitio web.
Lo siguiente que harás será hacer clic en el ícono de carga en el bloque Logo del sitio.
Al igual que con el método anterior, puedes elegir una imagen existente o cargar una nueva desde tu biblioteca multimedia de WordPress.
A continuación, debe acceder a la barra lateral de configuración de bloqueo en el lado derecho de la página. Simplemente habilite la configuración “Usar como ícono del sitio” para agregar su logotipo como favicon.
Finalmente, puedes presionar el botón “Guardar” en la esquina superior derecha de la página para publicar tu favicon.
Verá una advertencia de que el cambio afectará a todo el sitio web. Asegúrese de que la casilla “Icono” esté marcada y haga clic en “Guardar” nuevamente.
Ahora que ha seguido todos los pasos, puede abrir su sitio web para confirmar que el cambio se realizó correctamente.
Método 3: agregar un favicon usando un complemento de favicon de WordPress
Si prefiere utilizar un complemento de favicon de WordPress, puede seguir este método para utilizar el complemento gratuito Favicon de RealFaviconGenerator conectar.
Primero necesitas instalar y activar el complemento. Para obtener más detalles, siga nuestra guía sobre cómo instalar un complemento de WordPress.
Una vez activado, vaya a Yo espero ” favicons en su panel de WordPress.
A continuación, haga clic en el botón “Seleccionar de la biblioteca multimedia” para cargar una nueva imagen o utilizar una existente.
Tenga en cuenta que necesitará utilizar una imagen cuadrada. El complemento recomienda establecer un tamaño de icono de sitio de al menos 260 píxeles tanto de ancho como de alto, pero no menos de 70 píxeles.
Una vez que hayas elegido una imagen, simplemente presiona el botón “Generar Favicon”.
A continuación, el complemento lo llevará al sitio web RealFaviconGenerator para editar el favicon.
Puede personalizar varias configuraciones, como el color de fondo y cómo aparece en las páginas de resultados de búsqueda de Google (SERP), iOS, Android, macOS Safari, Chrome y Windows Metro.
En la sección “Opciones del generador de Favicon”, puede marcar la casilla si su sitio web utilizó anteriormente un favicon. Si es así, simplemente ingresa un número en el segundo campo para indicar la versión del favicon que estás usando.
De esta manera, los usuarios que ya hayan visitado su sitio verán el nuevo favicon en lugar del anterior.
Una vez que todo se ve bien, todo lo que necesita hacer es hacer clic en el botón “Generar sus propios favicons y código HTML” para agregar el favicon a su sitio de WordPress.
Tu favicon ahora debería estar activo. Asegúrese de mantener activo el complemento de favicon de WordPress para que el favicon esté siempre habilitado.
Método 4: agregue manualmente un favicon a su blog de WordPress
Por último, pero no menos importante, puedes agregar un favicon de WordPress a tu blog editando manualmente los archivos de código de tu tema.
Esto es útil si su personalizador de temas no tiene una sección de “Identidad del sitio” o si está usando un tema de bloque y desea una imagen de favicon diferente al logotipo de su sitio.
La forma más fácil y segura de editar los archivos de código de su tema es con el Código WP conectar.
WPCode es el mejor complemento de fragmentos de código para principiantes. Con más de 100 fragmentos listos para usar y manejo seguro de errores, le permite editar archivos de temas de forma segura sin dañar su sitio web.
Además, lo mejor de WPCode es que si actualiza su tema, no perderá los cambios de código, incluido el favicon.
Para esta guía puedes utilizar el archivo versión gratuita de WPCode. Sin embargo, con el Suscripción profesionalpuede acceder a funciones como lógica condicional inteligente e integraciones de terceros para administrar su código de manera más eficiente.
Para comenzar, necesita instalar y activar WPCode. Para obtener más información, puede consultar nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Lo siguiente que debes hacer es preparar tus archivos favicon. Para ello, puedes utilizar un generador de favicon gratuito como Favicon.io.
En el sitio web, puede hacer clic en “Imagen” para convertir un archivo de imagen en un archivo zip y código HTML. Alternativamente, puedes usar la opción Emoji o Texto para crear un favicon usando emojis y fuentes disponibles.
En la página siguiente puedes subir tu imagen. Luego, haga clic en “Descargar” para guardar el archivo zip favicon, que contiene los archivos favicon.png y favicon.ico.
Asegúrese de mantener abierta esta página web a medida que avanza en los siguientes pasos.
Ahora necesita cargar el archivo zip favicon en el directorio raíz de su sitio. Para ello puedes utilizar el administrador de archivos de tu hosting WordPress.
Alternativamente, puedes hacerlo a través de un cliente FTP como FileZilla. Para obtener más detalles, consulte nuestra guía para principiantes sobre cómo usar FTP para cargar archivos en WordPress.
Después de abrir los archivos de su sitio web a través del administrador de archivos o FTP, vaya al directorio raíz.
El directorio raíz de WordPress suele ser una carpeta llamada “public” o “public_html” y contiene carpetas esenciales de WordPress como wp-content y wp-admin.
En este punto puedes extraer y cargar todo el contenido del archivo favicon descargado previamente en el directorio raíz.
Si usa el Administrador de archivos, puede hacer clic en el botón “Cargar” en la parte superior.
Luego aparecerá una nueva pestaña pidiéndole que cargue archivos.
En esta página puede hacer clic en el botón “Seleccionar archivo” y elegir todos los archivos de favicon.
Ahora simplemente espere a que los archivos se carguen correctamente.
Una vez hecho esto, puede volver a la pestaña Administrador de archivos. Ahora deberías ver todos tus archivos favicon en el directorio raíz, como en la siguiente captura de pantalla:
Ahora volvamos al panel de administración de WordPress.
En la barra lateral izquierda, vaya a Fragmentos de código » Encabezado y pié de página.
Luego, regrese a la pestaña Favicon.io de antes.
Luego, debes copiar el código HTML desde allí.
A continuación, debe volver a WordPress y pegar el código en la sección “Encabezado” de la página WPCode. Esto agregará el código al archivo header.php de su sitio web.
En su código, coloque la URL completa de su sitio web entre comillas junto a todos los atributos href, como en el siguiente ejemplo. Recuerde agregar http:// o https:// si su sitio utiliza un certificado SSL.
Finalmente, haga clic en el botón “Guardar cambios” en la esquina superior derecha.
¡Y esto es todo! No olvide visitar su sitio web para ver si el cambio de favicon fue exitoso.
¿Por qué no se muestra mi favicon de WordPress?
Una de las razones por las que es posible que su favicon de WordPress no se muestre se debe al caché del navegador. Esto significa que su navegador todavía muestra la versión anterior de su sitio.
Para solucionar este problema, debe borrar su caché. Si necesita ayuda, puede seguir nuestra guía sobre cómo borrar el caché de su navegador.
Para comprobar si el icono de su sitio de WordPress se ha cargado, puede abrir su sitio web en modo incógnito o en una ventana de navegación privada.
Si la instalación del favicon no tuvo éxito, puedes intentar cargar la imagen nuevamente con un nombre de archivo diferente para resolver el problema.
Es posible que la funcionalidad del ícono de su sitio de WordPress tampoco funcione debido a un error de contenido mixto. Para solucionar este problema, consulte nuestra guía sobre cómo corregir errores de contenido mixto de WordPress.
En algunos casos, también es posible que su sitio web muestre el favicon de su proveedor de alojamiento en lugar del suyo. Si esto sucede, comunicarse con el equipo de soporte puede ayudar a resolver el problema.
Le recomendamos que elija un servicio de alojamiento de WordPress confiable con excelente atención al cliente para abordar problemas como este de manera efectiva. Puede consultar nuestra lista de los mejores proveedores de alojamiento de WordPress para encontrar la mejor opción para su sitio web.
Esperamos que este artículo le haya ayudado a agregar un favicon a su sitio de WordPress. Es posible que también desee consultar nuestra guía sobre cómo crear un logotipo para su sitio web o nuestras selecciones de expertos sobre los complementos de WordPress imprescindibles para hacer crecer su sitio web.