WordPress

Cómo añadir un Favicon en WordPress

favicon wordpress

Un favicon es un pequeño icono cuadrado que representa a tu sitio web. Por lo general se muestra junto al título del sitio web en la pestaña del navegador. El favicon también aparece en el historial del navegador, en los marcadores de páginas guardadas y en cualquier lugar donde tu sitio web necesite una identidad visual.

Ejemplo de favicon WordPress

Este pequeño detalle es esencial para tu identidad en internet. Discutiremos el favicon de WordPress y cómo agregarlo a tu sitio web de WordPress.

Por qué es importante poner un Favicon en tu sitio

El favicon es básicamente la identificación de tu sitio web; por lo tanto, debería ser tu propio logo lo que se muestre allí. Ignorar su presencia en tu sitio es sin duda un error.

Estas son algunas de las razones por las que un favicon es vital para tu sitio de WordPress.

  • Destaca para reconocimiento de marca

La mayoría de los usuarios tienden a abrir varias pestañas en sus navegadores. Sin un favicon solo se puede ver el nombre de la página en la pestaña del navegador. Además, si abres más de 20 pestañas, éstas se acortan y es difícil identificar qué pestaña representa qué sitio.

Tener un favicon le ayuda a los usuarios a detectar las pestañas más fácilmente. Si tu favicon se destaca, mejorará no solo tu visibilidad, sino también la experiencia del usuario.

  • Genera confianza

Si no tienes un favicon le darás una mala primera impresión a tus visitantes. Un sitio web de WordPress sin favicon no se ve profesional.

Si creas un sitio web solo para bloguear diariamente, no tener un favicon puede no ser tan dramático. Pero se vuelve esencial cuando se trata del sitio web de una empresa o una tienda online.

Tus visitantes no sentirán confianza para realizar transacciones en un sitio web que no luzca profesional.

  • Mejora la experiencia móvil

Estamos en la era de la experiencia móvil. Tener un sitio web responsive podría no ser suficiente para deleitar a los usuarios móviles, principalmente porque las aplicaciones web han estado en aumento.

Los usuarios pueden simplemente marcar un sitio como favorito en la pantalla de inicio del teléfono. ¡Ya no es necesario escribir URLs!

Con esta situación, tener un favicon bien diseñado te será útil de dos maneras diferentes. Primero que todo, el favicon se usará como el ícono de la aplicación y, segundo, las personas que usen tu aplicación web lo memorizarán. Por lo tanto, tu favicon estará asociado a tu sitio web.

Creando un favicon para WordPress

Por lo general, el favicon es el logo de tu marca. Para esta imagen, WordPress recomienda que uses un cuadrado, de tamaño 512px x 512px.

Puedes usar una imagen más grande, pero es muy probable que WordPress te pida que la recortes para que se ajuste al tamaño.

Para crear una imagen que tenga exactamente un tamaño de 512 píxeles x 512 píxeles, puedes usar cualquier software de edición de imágenes como Adobe Photoshop (pagado) y Gimp (gratis) o generadores de favicon en línea.

Aunque puedes elegir un color de fondo para el favicon de WordPress, es preferible la transparencia. Puedes utilizar formatos de archivo .jpeg, .ico, .gif o .png (solo asegúrate de usar el formato .png si tienes un fondo transparente).

Cuando la imagen esté lista, puedes agregarla a tu sitio de WordPress usando uno de estos tres métodos:

1. Agregar un Favicon a través del personalizador de WordPress

A partir de la versión 4.3 de WordPress, puedes agregar el favicon de WordPress desde el área de administración. Para hacer esto, sigue estos pasos

  1. Ve al Panel de administración.
  2. Pasa el mouse sobre Apariencia -> Personalizar.
  3. Elige Identidad del sitio.
  4. Haz clic en el botón Seleccionar imagen en la sección Icono del sitio.
  5. Sube el favicon que has preparado.
  6. Haz clic en el botón Publicar para guardar los cambios.

Si realizas el proceso correctamente, tu favicon aparecerá junto al título del sitio web. Para configurar esto en un dispositivo móvil, visita tu sitio web desde tu smartphone y selecciona Agregar a la pantalla de inicio.

Tu favicon ahora aparecerá en la pantalla de inicio.

Personalizador de WordPress- cómo cargar un favicon

2. Agregar un Favicon de WordPress al sitio con un plugin

También puedes agregar un favicon a WordPress con la ayuda de un plugin llamado Favicon by RealFaviconGenerator. Es fácil de usar y ofrece más funciones. Estos son los pasos requeridos:

  1. Ve al Panel de administración.
  2. Elige Plugins -> Añadir nuevo.
  3. Escribe Favicon by RealFaviconGenerator en el campo de búsqueda.
  4. Instala y activa el plugin.
  5. Después de la activación, ve a Apariencia -> Favicon.
  6. Sube la imagen que quieres establecer como favicon. No necesitas editar tu imagen con software de edición de imágenes; el plugin lo hará por ti. Solo asegúrate de que la imagen tenga un tamaño de al menos 70 x 70 px. Es incluso mejor si está por encima de 260 x 260 px.
  7. Tras subir la imagen, pulsa el botón Generar Favicon.
  8. Después de hacer clic en el botón, el plugin te llevará al sitio web RealFaviconGenerator.
  9. En el sitio web, busca y da clic en el botón Generate your Favicon and HTML code.
  10. El plugin te llevará de vuelta a tu sitio web. Recibirás una notificación de que tu favicon ha sido configurado.
  11. Verifica cómo se ve tu favicon en un navegador y en un dispositivo móvil.

Opciones de Favicon Generator, generar un favicon WordPress.

3. Agregar manualmente un Favicon a un sitio de WordPress

Te recomendamos testear esto en tu sitio de desarrollo local antes de que salga a la luz.

  1. Accede a los archivos de temas a través de un cliente FTP o administrador de archivos.
  2. Busca la carpeta /wp-content/themes/tu-tema.
  3. Sube tu favicon a la carpeta de temas (themes). Se recomienda subirlo a una subcarpeta como Assets.
  4. Recuerda esta ruta de archivo.
  5. Busca un archivo llamado function.php y agrega el siguiente código:
function add_favicon() {
  echo '<link rel="shortcut icon" type="image/png" href="'.get_template_directory_uri().'/assets/favicon.png" />';
}
 
add_action('wp_head', 'add_favicon');
  1. La línea después de href=”‘.get_template_directory_uri() debería ser la ruta a tu favicon. Asegúrate también de que el nombre del archivo sea correcto. Si usas un formato de archivo .ico, este será el código:
function add_favicon() {
  echo '<link rel="shortcut icon" type="image/png" href="'.get_template_directory_uri().'/assets/favicon.ico" />';
}
 
add_action('wp_head', 'add_favicon');

Conclusión

¡Tener un favicon es una necesidad! Especialmente cuando es tan fácil crear y subir un favicon para WordPress.

Un favicon representa la identidad de tu sitio web. Puede que ocupe solo un pequeño espacio en tu sitio, pero este pequeño detalle tiene un papel especial para ayudar a mejorar el reconocimiento de tu marca y la experiencia del usuario.

Gustavo B.

Gustavo es un apasionado por la creación de sitios web. Se enfoca en la aplicación de estrategias SEO en Hostinger para España y Latinoamérica, así como la creación de contenidos de alto nivel. Cuando no está aplicando nuevos trucos en WordPress lo puedes encontrar tocando la guitarra, viajando o tomando un curso online.

Agrega un Comentario

Dale clic aquí para dejar un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.