Cómo agregar un favicon a su sitio de WordPress

Favicon, o icono favorito, es una pequeña imagen junto al título de una página en una pestaña del navegador. Este icono de sitio juega un papel esencial en el establecimiento de la identidad de su sitio web.

Si posee un sitio web profesional, considere usar favicons si aún no lo ha hecho. Aquí, discutiremos la importancia de la misma y las cosas a considerar al preparar una. También le mostraremos tres métodos sobre cómo agregar un favicon a su sitio web de WordPress.

¿Por qué debería utilizar un favicon?

Para demostrar la importancia de los favicons, eche un vistazo a la captura de pantalla a continuación.

Como puede ver, cada pestaña tiene diferentes iconos que diferencian las páginas web que está visitando. Cuando tienes un montón de pestañas en tu navegador, los favicons te ayudan a identificar estas páginas. Como resultado, crea una mejor experiencia de usuario.

Un favicon no solo es útil en las pestañas del navegador. Cuando los usuarios agregan un acceso directo a la página de su escritorio o pantalla de inicio móvil, el favicon se mostrará en la pantalla. Además de eso, los favicons pueden funcionar de manera similar a un logotipo. Cuando las personas lo vean, reconocerán instantáneamente su sitio web y su marca.

Preparando tu favicon

La forma más rápida y sencilla de crear un favicon es utilizar generadores de favicon. No es necesario tener ningún conocimiento técnico, ya que la mayoría de ellos proporcionan imágenes listas para usar que solo tiene que modificar un poco.

Considere usar el logotipo de su marca también, pero asegúrese de que pueda recortarse en un ícono cuadrado. También tiene que verse lo suficientemente simple como para poder verlo claramente a pesar de su pequeño tamaño. Utilice programas de edición de imágenes como Photoshop, DesignWizard o GIMP para modificar y cambiar el tamaño de su logotipo.

Para el formato de la imagen, se recomienda utilizar un archivo ICO porque la mayoría de los navegadores lo admiten. Sin embargo, no todos los programas de edición de fotografías le permiten crear archivos ICO. Por lo tanto, es mejor usar generadores de favicon en línea que brinden la opción. O guarde su imagen como PNG y use un convertidor ICO en línea. Por lo general, el tamaño debe ser de 16 x 16 píxeles.

Si usa la función de ícono del sitio de WordPress 4.3, no necesita preocuparse por convertir su imagen de antemano. Ahora puede cargar cualquier archivo de imagen como su favicon . Independientemente, asegúrese siempre de que se pueda ver en cualquier navegador después de cargarlo.

3 formas de agregar un favicon a su sitio de WordPress

Hay tres métodos en los que puede agregar un favicon a su sitio web, elija la opción que prefiera.

Opción 1: Personalizador de WordPress

Para los usuarios de WordPress 4.3, usar la función del ícono del sitio es la forma más conveniente y recomendada de agregar su favicon.

Prepare una imagen cuadrada que tenga al menos 512 píxeles de alto y ancho. El archivo no debe exceder los 128 MB. Si tienes una imagen rectangular, te permitirán recortarla mientras cargas tu favicon .

Una vez que su imagen esté lista, siga estos pasos:

1. Abra su Panel de WordPress, vaya a Apariencia y seleccione Personalizar.

2. Busque una pestaña que contenga el icono del sitio. La mayoría de los temas lo tendrían en Identidad del sitio, pero algunos cambian el nombre de la pestaña a Título del sitio, Nombre de la marca, Logotipo y encabezado del sitio, etc.

3. Seleccione el icono del sitio y elija una imagen de su biblioteca de medios o cargue un archivo nuevo.

4. Se le dirigirá al editor de imágenes de recorte. Ajusta la posición y las proporciones a tu gusto.

5. ¡Felicitaciones! Deberías tener un nuevo favicon. Si aún no ha aparecido, WordPress recomienda borrar su caché y reiniciar su navegador.

Opción 2: uso de complementos

Si no ha actualizado su WordPress, puede usar complementos para agregar un favicon .

Algunos complementos le brindan más control sobre el aspecto de su favicon en dispositivos que no son de escritorio. Por ejemplo, Favicon de RealFaviconGenerator te da la opción de personalizar la apariencia de tu ícono en diferentes sistemas operativos.

Para usar el complemento, siga estos pasos:

1. Vaya a Complementos y haga clic en Agregar nuevo en su panel de WordPress.
2. Busque Favicon de RealFaviconGenerator, luego instale y active el complemento.
3. Seleccione Apariencia y haga clic en Favicon en el tablero. Sube una imagen cuadrada de más de 70 x 70 píxeles. Idealmente, la imagen debería tener 260 x 260 píxeles o más.
4. Serás redirigido a una página donde puedes configurar el aspecto de tu favicon en iOS, Android Chrome, Windows y Safari. Luego haga clic en Generar sus Favicons y código HTML.

Aparte de ese complemento, puede usar All in One Favicon. El complemento le permite configurar diferentes favicons para el back-end y el front-end. De esta manera, no se confundirá cuando su sitio web y su panel de control estén abiertos.

Opción 3: Instalación manual a través del cliente FTP

Otro método es cargar su favicon manualmente en su sitio web de WordPress. Para ello, debe conectar su sitio web a un cliente FTP como FileZilla. Su icono puede estar en formato ICO o PNG y debe llamarse favicon.

También es muy recomendable que cree un tema hijo para utilizar este método. De esa manera, los cambios en el código no se eliminarán cuando haya una nueva actualización del tema.

Cuando su sitio esté conectado, siga estos pasos:

1. Sube tu archivo de favicon a tu carpeta de temas actual a través de tu cliente FTP. Si está utilizando un tema hijo, cárguelo en esa carpeta.
2. Agregue el mismo archivo a su directorio raíz. Debe estar en la misma carpeta que su wp-content y wp-admin. Esto es para garantizar que sus favicons se puedan ver en los lectores de feeds.
3. En su panel de WordPress, vaya a Apariencia y haga clic en Editor de temas.
4. Ahora, seleccione el archivo de encabezado del tema y agregue este código a continuación dentro de la etiqueta si tiene un archivo ICO:

<link rel = ”icono de acceso directo” href = ”<? php echo get_stylesheet_directory_uri (); ?> / favicon.ico ”/>

Reemplace la parte después de href = until /favicon.ico con la ruta a su directorio raíz. Se vería así:

<link rel = ”icono de acceso directo” href = ”<http://www.yourdomainname.com/favicon.ico” />

Si tiene un archivo PNG, simplemente reemplace el formato de archivo. Luego, actualice el archivo.

5. Actualice su sitio web. Si funciona, ya debería tener un nuevo favicon.

Para conocer todos los métodos, no olvide verificar la apariencia de su favicon en los dispositivos móviles. Abra su sitio web desde su navegador móvil y agregue el sitio a su pantalla de inicio.

Aunque son pequeños, los favicons pueden aumentar el reconocimiento de la marca y crear una mejor experiencia de usuario. Puede utilizar generadores de favicon en línea o cualquier software de edición de imágenes de su elección para crear su propio favicon. Si ya tiene uno, simplemente agréguelo a su sitio web de WordPress utilizando cualquiera de los tres métodos anteriores. ¡Buena suerte!

Leer más Temas y complementos populares para sitios web de WordPress LMS