¿Quiere agregar un favicon de WordPress a su sitio?
Un favicon es el ícono que aparece en las pestañas de su navegador cuando visita sitios web.
En esta publicación, lo guiaremos a través de los pasos para agregar un favicon en WordPress de diferentes maneras, desde la función de ícono del sitio predeterminado hasta la forma manual.
4 formas sencillas de cambiar tu favicon de WordPress
Puede ver el favicon predeterminado utilizado por muchos sitios nuevos de WordPress que se muestra en la imagen a continuación:
Es el logotipo de WordPress, aunque algunos servidores, como Bluehost, agregan sus propios favicons a los nuevos sitios alojados en sus servidores.
No importa cómo se vea tu favicon en este momento, aprenderemos cómo cambiarlo.
Puede utilizar uno de los cuatro métodos posibles:
- Personalizador de WordPress
- Complementos de WordPress
- Tu tema
- Agregándolo manualmente
Empecemos desde arriba.
1. Utilice el personalizador de WordPress
Esta es la forma más sencilla de cambiar su favicon de WordPress:
- Asegúrate de tener una imagen de favicon compatible con WordPress. El tamaño estándar del favicon de WordPress es 512 x 512 px en formato PNG, ICO o GIF, aunque se recomienda PNG.
- Vaya a Apariencia → Personalizar.
- Abra la pestaña Identidad del sitio.
- Haga clic en el icono del sitio.
- Sube tu archivo de imagen de favicon.
- Haga clic en Publicar.
Examinemos estos pasos.
1.1 Asegúrate de tener una imagen de favicon compatible con WordPress
Un favicon de WordPress debe ser una imagen cuadrada, específicamente de 512 px x 512 px. Puede leer nuestros consejos sobre cómo crear favicons de WordPress a continuación.
La imagen debe estar en formato ICO, PNG o GIF, pero recomendamos utilizar una imagen PNG de 512 x 512 px para una mejor compatibilidad general.
Si descargó un ícono de un sitio de biblioteca de íconos y solo está disponible en formato SVG, use un sitio como Favicon.io O NubeConvertir para convertirlo.
Allá Y un complemento llamado SVG de favicon que le permite cargar favicons SVG a WordPress, pero recomendamos usar uno de los métodos en esta publicación (especialmente el método actual, Método 1) ya que tienen el mejor soporte a largo plazo, lo que significa que será menos probable que su imagen de favicon romper en el futuro.
1.2 Abra el personalizador de WordPress
Abra el personalizador de WordPress, ya sea yendo a Apariencia → Personalizar en el menú de administración de la izquierda mientras navega por su panel de WordPress, o haciendo clic en el botón Personalizar en la barra de administración superior mientras visualiza la interfaz de su sitio.
1.3-4 Cambiar el ícono del sitio
Ahora deberías ver el personalizador de WordPress.
Abra la pestaña Identidad del sitio
…y haga clic en la opción Seleccionar icono del sitio allí.
1.5 Sube tu archivo de imagen de favicon
Utilice la biblioteca multimedia de WordPress para cargar su archivo de imagen de favicon.
Si encuentra un mensaje de error que dice «Lo sentimos, no está autorizado a cargar este tipo de archivo» al intentar cargar un archivo ICO en su sitio, utilice la edición PNG.
Favicon.io te ofrece varios archivos en una carpeta ZIP cuando lo usas para convertir archivos SVG, incluida una versión PNG de 512 x 512 px.
Favicon.io lo llamará “android-chrome-512×512”. Simplemente cámbiele el nombre a «favicon» y estará listo.
Asegúrese de que la imagen del favicon esté seleccionada y luego haga clic en Seleccionar.
1.6 Guarda tu nueva imagen de favicon
Ahora, la imagen de favicon seleccionada debería aparecer en la pestaña del navegador de su sitio.
Haga clic en Publicar para guardarlo.
Ahora debería ver su nueva imagen de favicon en la pestaña del navegador donde está abierto su sitio.
2.1 Utilice un complemento Favicon para WordPress – complemento 1
A continuación se explica cómo agregar un favicon a WordPress usando el método del complemento:
- Instale y active Favicon de RealFaviconGenerator.
- Vaya a Apariencia → Favicon.
- Haga clic en Seleccionar archivo de la biblioteca multimedia y cárguelo en la biblioteca multimedia si es necesario.
- Haz clic en Generar favicon.
- Configura la apariencia de tu favicon.
- Haga clic en Generar sus favicons y código HTML.
2.1.1 Instalar el complemento
Vaya a Complementos → Agregar nuevo y busque «favicon».
Entonces, encuentra Favicon de RealFaviconGeneratory haga clic en Instalar ahora y activar.
2.1.2 Abrir la configuración del complemento
Vaya a Apariencia → Favicon.
2.1.3 Cargue y seleccione su imagen de favicon desde la Biblioteca multimedia
Haga clic en el botón Seleccionar de la biblioteca multimedia.
Si tiene una imagen existente en su biblioteca multimedia de WordPress, selecciónela. Si no, adelante y súbelo.
2.1.4-6 Genera tu favicon
Haz clic en Generar favicon. Esto lo redirige al sitio del complemento donde puede realizar cambios en su favicon antes de aplicarlo a su sitio.
Dado que lo está utilizando para un sitio web y no para una aplicación, sólo necesita configurar los ajustes en la sección Favicons para navegadores de escritorio y páginas de resultados de Google.
Si has subido un archivo de imagen de 512 x 512 px y te gusta cómo se ve tu favicon en las imágenes de vista previa, no necesitas realizar ningún cambio.
Sin embargo, Si quierespuedes jugar con la configuración para personalizar el aspecto de tu favicon.
Una vez que haya terminado, desplácese hacia abajo y haga clic en Genera tus favicons y código HTML.
Serás redirigido a WordPress donde se realizará la instalación final. Luego verás vistas previas de cómo se verá tu favicon en vivo.
2.2 Utilice un complemento Favicon para WordPress – complemento 2
Este es un método secundario al Método 2 en caso de que no desee utilizar el Favicon de RealFaviconGenerator.
Siga estos pasos para agregar un favicon a su sitio de WordPress usando un complemento:
- Instale y active Favicon All in One en su sitio.
- Haga clic en el elemento de menú Favicon All in One.
- Busque el método de carga de Configuración de frontend que coincida con su tipo de imagen.
- Sube tu imagen de favicon.
2.2.1 Instalar Favicon todo en uno
Instalar Favicon todo en unovaya a Complementos → Agregar nuevo y busque «favicon todo en uno».
Luego, haga clic en Instalar ahora para instalar el complemento, luego haga clic en Activar para activarlo.
2.2.2 Haga clic en el elemento del menú del complemento
All in One Favicon agrega un nuevo elemento de menú al menú de administración a la izquierda.
Pinchalo.
2.2.3-4 Sube tu imagen de favicon
All in One Favicon admite cuatro tipos de íconos: ICO, PNG, GIF y un ícono Apple Touch.
Busque el que coincida con el tipo de archivo que desea cargar en el panel de Configuración del frontend.
Nuevamente, si el archivo está en formato SVG, conviértalo a un tipo de archivo ICO, PNG o GIF.
Luego, haz clic en Cargar y sube tu imagen de favicon al complemento.
Parecerá que no pasó nada cuando hagas esto, pero no te preocupes, el complemento aun así cargó tu imagen de favicon en el sitio.
Todo lo que tienes que hacer es hacer clic en Guardar cambios para que aparezca.
Este método solo agrega un favicon a la pestaña del navegador cuando visualiza su sitio desde la interfaz.
Si desea que su favicon aparezca cuando vea su panel de WordPress, cárguelo también en la Configuración del backend.
Una advertencia sobre el uso del método del complemento
Este método ciertamente puede ayudar si tiene problemas cuando el método de personalización general de WordPress no funciona, pero le recomendamos encarecidamente encontrar una manera de hacer que ese método funcione usando este método por una simple razón: cuando elimina un favicon de complemento, también elimina el tuyo favicon.
Entonces, si alguna vez necesita eliminar uno de estos complementos, asegúrese de encontrar una forma alternativa, como el Método 1, de agregar un favicon a su sitio de WordPress.
A veces, los complementos de WordPress pierden soporte o se convierten en un foco de problemas de seguridad. Estos son sólo un par de ejemplos de escenarios que llevan a muchos usuarios de WordPress a eliminar complementos de sus sitios.
3. Usando tu tema
En el pasado, los temas tenían configuraciones de favicon integradas en el panel de opciones del tema.
Sin embargo, cada vez más temas utilizan el personalizador de WordPress, lo que significa que muchos están eliminando sus funciones de favicon para permitir el uso de WordPress.
Astra, por ejemplo, tiene una opción Identidad del sitio en el panel de opciones del tema, pero simplemente abre la pestaña Identidad del sitio en el personalizador de WordPress en una pestaña nueva.
Kadence y GeneratePress también hacen lo mismo.
Si estás utilizando un tema basado en bloques, puedes editar tu favicon desde el editor de bloques.
Haga esto creando una nueva página o yendo a Apariencia → Editor.
Agregue un nuevo bloque a la página y elija el bloque Logotipo del sitio.
Pase el cursor sobre el logotipo si ya aparece uno y haga clic en Reemplazar, luego elija la opción Biblioteca multimedia o Cargar.
A continuación, sube o elige tu imagen de favicon.
Abra el panel de configuración de bloque y habilite la opción Usar como icono de sitio.
Luego, haga clic en Guardar y anule la selección de la opción Logotipo si desea utilizar una imagen diferente para el logotipo de su sitio.
Luego, haga clic en Guardar nuevamente para aplicar el favicon a su sitio.
4. Agregue manualmente un favicon de WordPress a su sitio
Esta es la forma más sencilla de agregar manualmente un favicon a su sitio:
- Utilice RealFaviconGenerator para convertir su imagen de favicon PNG de 512 x 512 px en código HTML.
- Descargue y extraiga el paquete de favicon, luego cárguelo en su carpeta de tema activo.
- Instale WPCode en su sitio.
- Copie y pegue el código de favicon en la sección Encabezado de WPCode.
4.1 Genera el código HTML de tu favicon
Ir a El sitio RealFaviconGeneratory haga clic en Seleccione su imagen de favicon. Para obtener mejores resultados, la imagen debe ser PNG de 512 x 512 px.
Si lo desea, utilice la configuración de RealFaviconGenerator para configurar la apariencia de su favicon.
No deberías necesitar hacer esto si creaste tu favicon con anticipación y subiste una imagen de 512 x 512 px.
Luego, desplácese hasta la parte inferior de la página y haga clic en Genera tus favicons y código HTML.
Ahora deberías tener el código HTML para tu favicon.
Mantenga esta página web abierta mientras realiza los pasos restantes.
4.2 Sube el paquete favicon a tu carpeta de temas
Este paso requiere acceso a la carpeta del tema activo. Puede hacerlo a través de FTP o el administrador de archivos de su host.
No entraremos en detalles sobre cómo hacer esto porque existen muchos tutoriales que pueden ayudarte.
En su lugar, simplemente le pediremos que descargue su paquete de favicon desde RealFaviconGenerator
[realfavicongenerator-download-favicon-package]
…y extraer todos los archivos del mismo.
Luego, agregue todos los archivos extraídos al directorio raíz de su sitio, que es la misma carpeta donde se encuentran wp-content y wp-admin.
4.3 Instalar código WPC
WPCode es un complemento gratuito que te permite agregar código a archivos de temas sin acceder a ellos, lo que puede resultar abrumador si nunca lo has hecho antes.
También le permite agregar código a su archivo de encabezado sin tener que crear un tema secundario.
Vaya a Complementos → Agregar nuevo y busque «wpcode».
Luego, instale y active el complemento.
4.4 Pegue el código en WPCode
WPCode agrega una entrada de «Fragmento de código» al menú de administración.
Vaya a Fragmentos de código → Encabezado y pie de página.
Copie el código HTML de RealFaviconGenerator y péguelo en la sección Encabezado de la página Encabezado y pie de página.
Sin embargo, siempre que vea el término «href», agregue la URL de su sitio después de las comillas. Utilice https si su sitio lo utiliza.
Hay cinco atributos href en el código y todos están seguidos.
Luego, haga clic en Guardar cambios para aplicar el favicon a su sitio.
Cómo crear un favicon de WordPress
La forma más sencilla de crear un favicon de WordPress personalizado es generar uno con Favicon.io. Te permite crear un favicon a partir de una inicial.
Puedes cambiar la fuente, el color de la fuente, el color de fondo y la forma del borde del favicon.
Si desea utilizar un ícono como ícono de favicon, descargue o compre uno de una biblioteca de íconos que ofrezca íconos sin atribución.
Elegir un ícono sin atribución le permitirá usar la imagen del ícono como parte de su identidad de marca sin enfrentar problemas de derechos de autor, aunque debe revisar la política de cada biblioteca sobre el uso de íconos para estar seguro.
La mejor parte de las bibliotecas de iconos es que te permiten descargar iconos en cualquier formato y tamaño.
Pensamientos finales
El favicon de tu sitio no es el aspecto más importante, pero puede ayudarte a establecer conciencia de marca y un sentido de unidad en el diseño de tu marca.
Recomendamos encarecidamente utilizar el Método 1 de esta lista, ya que es el más fácil de hacer, pero no debería tener demasiados problemas con ninguno de los dos.
Antes de crear tu favicon, navega por la web durante unos días como de costumbre y empieza a prestar atención a los favicons utilizados por otros sitios. ¡Será una gran inspiración!
