Cómo agregar un Favicon en WordPress

El favicon, junto con el logo, es uno de los elementos más importantes de la presencia de marca y elementos visuales más importantes de un sitio web, por lo que no me parece raro que necesites saber cómo agregar un favicon en WordPress.

En sí, un favicon no es más que un pequeño icono cuadrado que se puede ver junto a la pestaña del navegador al visitar una web. Este es un ejemplo desde nuestra web:

La verdad es que añadir un favicon en WordPress es muy sencillo, y contribuye con la identidad visual de la página como un distintivo. En este artículo, no solo veremos cómo añadir un favicon en WordPress, sino que además, aprenderás a crear uno, y veremos por qué es tan importante ¡Empecemos!

Importancia del favicon en un sitio web

El favicon es un elemento sencillo, pero a la vez bastante importante. Para muchos puede dar igual tenerlo o no, pero esto puede ser un terrible error.

A continuación, veamos algunos de los aspectos más importantes de esta pieza de la web:

• Aumenta tu presencia de marca: El favicon puede expresar muchas cosas. Como un elemento visual, es uno de los más importantes de tu marca, y puede expresar muchas cosas. Al contar con un logo fácilmente identificable, además, si el usuario va entre pestañas, será fácil que regrese a la pestaña donde está tu web. Por ejemplo, en la captura anterior, seguro reconociste rápidamente el favicon de Google ¡Y cómo no hacerlo!
• Forma un distintivo: Además de tu dominio web, quienes visitan tu página web, siempre se fijan en tu favicon. Es algo básico, y común. Ahora, imagina que tienes un dominio registrado para una marca, pero no has registrado todas las variantes de dicho dominio. Por ejemplo, registraste “midominio.net” y no “midominio.com”. Cuando las personas ingresen a tu web, no identificarán el sitio por el nombre de dominio, ya que será el mismo, pero sí por tu favicon.
• Crea confianza: No contar con un favicon da una sensación de descuido, de falta de profesionalismo y poco profesionalismo. Es más, es probable que no se realicen compras en tu sitio con estas condiciones, por lo que solo estarás restando clientes o poniendo en jaque la confianza sobre tu contenido.
• Mejora la experiencia móvil: Actualmente, la mayoría de usuarios de la web usan un teléfono móvil para conectarse a internet. Considerando eso, el favicon servirá como un fácil distintivo e incluso una pantalla de inicio en caso de haber instalado una webapp. Además, las notificaciones de tu sitio ¡También repercutirán en el móvil, dando una mejor posibilidad de obtener clics!

¿Crear o comprar un favicon? ¿Qué es mejor?

Hace unos años, el diseño gráfico era inaccesible para muchos. Sin embargo, con la llegada de herramientas como Adobe Photoshop, es bastante más sencillo realizar un favicon para WordPress.

Sin embargo, ¿Es mejor que usted lo haga, o que lo compre?

La respuesta es simple: depende de la fase en la que se encuentre su web. Por ejemplo, si usted apenas inicia un proyecto, y es algo que todavía no sabe cómo irá, es probable que busque ahorrar hasta el último centavo.

Sin embargo, si su proyecto es más serio, e involucra confianza y clientela, con clientes desde el momento en el que inicie su web, lo ideal es contratar a un diseñador experimentado.

Quizás te interese: Cómo enviar fax desde Gmail

¿Por qué? Es bastante simple: Un diseñador será capaz de transmitir lo que busca su marca con un diseño sencillo, fácil de reconocer, y agradable.

Cómo crear un favicon para WordPress

Si usted decidió crear un favicon para WordPress ¡Está bien! Yo también lo he hecho, principalmente al arrancar un proyecto. Es una manera de ahorrar costes en el inicio.

Además, si tienes un conocimiento básico de uso de herramientas web, puede que consigas un logo bastante adecuado para tu proyecto.

Existen varios aspectos a considerar. Para empezar, WordPress solo admite formatos de imágenes .jpeg .ico .gif y .png. Sin embargo, personalmente recomendaría optar por .png, ya que tendrás capacidad de usar una imagen sin fondo, y que, puede que sea mucho más ligera que una imagen JPG si se trata de uno o dos colores en el favicon.

Ahora bien, llegados a este punto, tenemos dos opciones. O editamos nuestro propio favicon, o usamos un generador de favicones gratuitos. Veamos ambas opciones:

Usar un generador de favicon para WordPress

Esta es la opción que te recomiendo si no sabes ni pío de edición, ya que es la más simple. Además, es la opción gratuita, por lo que si estás buscando ahorrar, puede que esta opción te interese.

Es bastante simple, y consiste en usar algún creador de logos. Basta con cualquiera, en realidad. Por ejemplo, en mi caso he llegado a utilizar Canva, y el creador de logos Zyro, y ambos son una muy buena opción gratuita, tanto para crear tu favicon, como para crear el propio logo de tu sitio en un solo lugar.

Si me preguntas, el más sencillo es el creador de Zyro, aunque Canva es mucho más completo. Solo recuerda intentar que tu favicon exportado sea transparente siempre que sea posible.

Crear nuestro propio favicon

Crear un favicon para WordPress tampoco es tan complejo. Sin embargo, si lo vas a hacer manualmente, requieres de herramientas de diseño. Por ejemplo, el Photoshop de Adobe, suele ser la opción favorita de los diseñadores, aunque también existen alternativas gratuitas.

Si me preguntas, mi favorito es Pixlr. Puedes probar también a descargar algunos elementos gráficos de terceros e incorporarlos en tu edición. Aquí la parte más complicada, una vez domines la herramienta, es la parte creativa.

Cómo agregar un favicon en WordPress

Agregar el favicon a WordPress es bastante sencillo. En los últimos años, WordPress ha logrado facilitar muchísimo este proceso, por lo que no es necesario usar plugins.

Sin embargo, vamos a mostrarte todos los métodos posibles, en caso de que tengas algún problema con uno de los métodos mencionados.

1. Mediante el personalizador de WordPress

Agregar un favicon en WordPress con este método es lo ideal, ya que no tendremos que tocar líneas de código, ni plugins de terceros que puedan entorpecer los tiempos de carga de nuestra web.

Tampoco habrá que pagar por funciones premium ni nada por el estilo. El proceso es bastante sencillo. Veamos:

Ingresa al panel de control de tu web a través del acceso tradicional (a menudo, miweb.com/wp-admin) con tu usuario y contraseña. Luego, en el menú seleccionamos la opción Apariencia > Personalizar.

Una vez dentro del panel de administración, da clic sobre la opción Identidad del Sitio, y te encontrarás con una sección similar a la siguiente:

Desde aquí, seleccionamos la opción “Seleccionar ícono del sitio” y podemos buscar y agregar un favicon en WordPress. Dependiendo de los ajustes de tu theme, puede que incluso puedas modificar algunos aspectos del favicon o del logo desde esta sección.

¡No olvides dar clic al botón Publicar en la sección superior! Esto guardará los cambios, y los efectuará de inmediato en tu web.

2. Con plugin

Aunque esta opción no es recomendada porque puede retrasar los tiempos de carga de la web, sigue siendo viable para quienes necesitan subir un favicon, y esta primera opción no ha funcionado. Si no puedes subir un favicon en WordPress, esta opción es una alternativa funcional para la mayoría.

Lo interesante de este tipo de plugins, es que nos permitirán generar todos los favicons para diferentes versiones de la web, así como inclusive crear nuestro propio favicon sin un servicio de terceros.

Eso sí, generalmente no se trata de un servicio tan avanzado como con las herramientas mencionadas anteriormente, pero para salir de un apuro, no están mal. Veamos el proceso:

1. Descarga Heroic Favicon Generator desde el repositorio de WordPress

2. Instala y activa el plugin
3. Ingresa al panel correspondiente, y selecciona un favicon para utilizar
4. ¡Listo! La web debería contar con los archivos necesarios para funcionar correctamente.

Importante: Si quieres cambiar el diseño, puedes usar el botón Clear Favicon para cambiar y subir un nuevo diseño.

3. Manualmente

Agregar un favicon manualmente no es fácil, por lo que no lo recomendamos a menos que ninguna de las dos opciones anteriores no funcionaran. Igualmente, y aunque conozcas del tema, te recomendamos siempre hacer copias de seguridad antes de añadir código a tu web.

El proceso es bastante simple. Veamos:

1. Ingresa a los archivos de tu theme a través de un cliente FTP o el administrador de archivos de tu hosting
2. Busca la carpeta /wp-content/themes/nombre-de-tu-tema y súbelo a una subcarpeta llamada Assets
3. Copia la ruta del archivo, con el nombre del favicon
4. Busca un archivo llamado function.php o accede a el mediante las opciones de WordPress. Ahí, añade 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');

Recuerda que en la sección href=”.get_template_directory_uri() deberá ser reemplazada por la ruta de tu favicon. En caso de usar un archivo .ico, puedes usar el siguiente 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');

¡Eso ha sido todo! Ya has logrado añadir un favicon en WordPress sin plugins, con plugins o manualmente. Si tienes dudas o te ha servido el tutorial, no olvides dejarnos un comentario.