Cómo agregar un favicon a su sitio web de WordPress

Cómo agregar un favicon a su sitio web de WordPress

Probablemente haya notado que la mayoría de los sitios web tienen un pequeño ícono (generalmente el logotipo del sitio) ubicado en la esquina superior izquierda de la pestaña del navegador. Esto se llama favicon. Además de ayudar a los usuarios a reconocer su sitio web en su navegador y así mejorar la experiencia del usuario, el favicon también es una forma esencial de marca. Al agregar un favicon a su sitio, se asegura de que los usuarios puedan diferenciar su sitio de otros sitios por los que puedan estar navegando, y crea una conexión entre la imagen del favicon y su marca.

Si nos preguntas, configurar tu favicon de WordPress es una de las primeras cosas que debes hacer después de instalar tu tema de WordPress. Así que hoy le mostraremos cómo agregar un favicon a su sitio web de WordPress.

Lo primero es lo primero, debemos abordar las formas en que puede crear su favicon. Si busca una solución rápida, puedes crear un favicon usando un generador de favicon en línea. Plataformas como Favicon y App Icon Generator te permiten elija una imagen de su ordenador en formatos .jpg, .png o .gif y luego conviértala a formato .ico. Si no tiene una imagen preexistente, también puede explorar su galería de iconos por palabras clave, letras o colores, y luego puede descargar o editar una imagen que le guste.

Otro gran sitio web para generar favicons es favicon.cc. Esta plataforma no solo le permite importar su imagen o elegir una propia, sino que también le permite crea un nuevo favicon desde cero.

Si no desea utilizar un generador de favicon en línea, siempre puede usar Photoshop o Gimp para crear un favicon o cambiar el tamaño de una imagen existente. Solo tenga en cuenta que WordPress requiere las dimensiones de su imagen de favicon deben ser al menos 512 × 512 píxeles.

Cuando se trata de formatos, debemos tener en cuenta que el formato .ico se usa para generar favicons en general. Pero desde el lanzamiento de la versión 4.3 de WordPress, WordPress ha implementado una función de icono de sitio que genera todo para usted. Esto significa que si usa la versión 4.3 de WordPress (o superior), no tiene que preparar un archivo .ico por su cuenta y puede cargar una imagen .gif, .jpeg o .png en su lugar. WordPress luego lo convertirá al formato .ico y generará todas las dimensiones necesarias (solo asegúrese de que la imagen original que cargue sea 512x512px).

Sin embargo, si todavía usa una versión de WordPress anterior a la 4.3, tendrá que agregar su favicon a WordPress manualmente (de lo que hablaremos más adelante).

Cómo agregar un favicon a WordPress

Finish Design Projects Quickly4662

Una vez que haya terminado de crear su favicon, es hora de agregarlo a su sitio de WordPress. Lo primero que debe hacer es dirigirse a su panel de administración y haga clic en Apariencia> Personalizar.

Personalizar los colores de WordPress

Desde allí, seleccione Identidad del sitio.

Identidad del sitio de WordPress

Aquí puede elegir la imagen que desea utilizar como icono de su sitio.

Escoge la imagen

En caso de que su imagen esté por encima del límite de tamaño recomendado, WordPress le permitirá recortarla. Para hacerlo haga clic en Editar imagen.

Recorta tu imagen

Una vez que haya terminado con el recorte (lo que puede hacer haciendo clic en su imagen y arrastrándola con el cursor del mouse), Selecciona el Cosecha botón y luego presione Salvar.

En el lado derecho de la pantalla, también tiene la opción de escalar su imagen, y en el Recorte de imagen sección, incluso puede ingresar las dimensiones de imagen deseadas y especificar la relación de aspecto manualmente.

¿Cómo funcionan los temas de WordPress?
VER

Finalmente, no olvide hacer clic en el Actualizar botón cuando haya terminado.

Cosecha
Seleccione el botón Recortar y luego presione Guardar

Y eso es todo: ha subido con éxito su favicon a WordPress.

Agregar un favicon a la versión anterior de WordPress (4.3 o menos)

Finish Design Projects Quickly4662

Aunque le recomendamos que mantenga siempre actualizado su sitio web con la última versión de WordPress, si por casualidad está utilizando una versión anterior a la 4.3, tendrá que agregar su favicon a su sitio de WordPress manualmente.

Lo primero es lo primero, debe generar un archivo .ico utilizando uno de los generadores en línea que mencionamos anteriormente. A continuación, deberías cargue su archivo favicon.ico en el directorio raíz de su sitio web a través de FTP. Si no está seguro de cómo se hace, asegúrese de consultar nuestra guía para principiantes de FTP.

Debemos mencionar que existe cierto debate sobre si el favicon debe agregarse al directorio raíz o la carpeta del tema (o ambos). En cualquier caso, le sugerimos que al menos lo suba al directorio raíz, ya que esto mostrará su favicon en los lectores de feeds.

Finalmente, no olvide vincular a la ubicación del archivo del favicon en su encabezado, porque esto es una garantía de que todos los navegadores podrán encontrarlo. Para hacer esto, necesitas use una etiqueta de enlace HTML en el archivo header.php de su tema para agregar el código. Puede encontrar su archivo header.php yendo a Apariencia> Editor de temas y luego ubicarlo en el Archivos temáticos sección de la derecha.

Apariencia del editor de temas de WordPress
Ubicándolo en la sección Archivos temáticos

El código debe agregarse entre el <head> y </head> etiquetas:

Código agregado entre las etiquetas de la cabeza
1.
Si desea vincular al favicon en su directorio raíz, debe usar este código (simplemente cambie la URL y el nombre del archivo de favicon para que coincida con el suyo):
<link rel="icon" type="image/x-icon" href="http://www.yourdomain.com/favicon.ico">
2.
Si desea agregar el enlace al favicon ubicado en la carpeta de su tema, simplemente agregue este código a la etiqueta principal (simplemente cambie el nombre del archivo de favicon si es necesario):
<link rel="icon" type="image/x-icon" href="https://qodeinteractive.com/magazine/add-favicon-wordpress/<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Agregar un favicon a WordPress con la ayuda de un plugin

Finish Design Projects Quickly4662

En caso de que desee agregar su favicon de WordPress con un plugin, puede hacerlo instalando Favicon de RealFaviconGenerator. Este plugin es fácil de usar y le ayuda a generar y configurar un favicon para diferentes dispositivos, como escritorio, Android, iPhone y iPad.

Favicon de RealFaviconGenerator

Después de instalar y activar el plugin, vaya a Apariencia> Favicon y luego haga clic en "Seleccionar de la biblioteca de medios”Botón.

Configuración del plugin Favicon
Complemento de favicon

Aunque debe cargar una imagen de al menos 512 × 512 px al agregar un favicon a través del Personalizar pantalla, el plugin Favicon by RealFaviconGenerator requiere que cargue una imagen al menos 70 × 70 px de tamaño, y preferiblemente 260x260 px.

Una vez que seleccione su imagen, haga clic en Generar favicon.

Generar favicon con plugin

A partir de ese momento, se lo dirigirá al sitio web RealFaviconGenerator. Una vez allí, debe desplazarse hacia abajo y seleccionar Genere sus Favicons y código HTML:

Genera tus Favicons

Después de un tiempo, será enviado de regreso a su sitio de WordPress, y verá un mensaje en su tablero que le informará que su favicon está listo.

Favicon está listo

Además, aquí podrá obtener una vista previa de cómo se ve su favicon en diferentes dispositivos:

Cómo se ve su favicon en diferentes dispositivos

Conclusión

Finish Design Projects Quickly4662

Y eso resume el proceso de agregar un favicon a su sitio web de WordPress. Como es evidente a partir de los pasos que presentamos anteriormente, una vez que descubra el diseño que mejor lo representará a usted oa su marca, el resto del proceso es realmente pan comido.

Si quieres conocer otros artículos parecidos a Cómo agregar un favicon a su sitio web de WordPress puedes visitar la categoría Tutoriales.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

/* */ Subir

Este sitio web utiliza cookies para ofrecerle una mejor experiencia de navegación, si continua en navegando consideramos que acepta su uso.