
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).
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.

Desde allí, seleccione Identidad del sitio.

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

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.

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.
Finalmente, no olvide hacer clic en el Actualizar botón cuando haya terminado.


Y eso es todo: ha subido con éxito su favicon a WordPress.
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.


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

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">
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">
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.

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.


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.

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:

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.

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

Deja una respuesta