"> ¿Cómo añadir un favicon en WordPress? Guía/Tutorial 2019

¿Cómo añadir un favicon en WordPress? Guía/Tutorial

Quiero hablarte de uno detalle cuyo tamaño es inversamente proporcional a su importancia dentro del mundo del desarrollo web: el favicon en las SERPs. Un pequeño icono con grandes virtudes. Por ello, además de destacar sus ventajas, te voy indicar los pasos a seguir para añadir el favicon a WordPress y sacarle el máximo provecho a esta herramienta.

¿Qué es favicon?

El favicon es el icono que acompaña el nombre los sitios web en la pestaña de la barra de navegación. Está ubicado a la izquierda del nombre y tiene forma circular o cuadrada. Su nombre proviene de la combinación de dos términos del inglés “favorite” e “icon” cuya traducción sería icono de favoritos.

Además ahora en Google aparecerá desde las SERPs, en versión móvil, donde incluso lo muestra como primer elemento del resultado.

Llegando Google incluso a testear esto mismo en la versión desktop.

  • Más info sobre procedencia y datos curiosos en wikipedia.

¿Para qué sirve el favicon?

Tal vez esta herramienta ha sido un poco olvidada o descuidada por los administradores web. Por ello existen casos de sitios web que no la usan y otros es lo que su uso es equivocado y con poco criterio. Tal olvido y descuido significa perder una excelente oportunidad para fortalecer el branding de nuestra marca.

Precisamente el fortalecimiento del branding es uno de las ventajas más importantes de favicon. Esto se debe al hecho de que este ícono ayuda a los usuarios a recordar nuestro sitio pues al ser bien usada la imagen queda asociada a la web en la memoria visual del usuario.

Además de aparecer en la barra de navegación, cuando la página web se agrega a la lista de favoritos el favicon es la imagen más visible en esa función de los navegadores. Esto permite que sea más fácil su ubicación y por tanta existan mayores posibilidades de tráfico web por ese usuario.

Asi mismo, cuando se crea un acceso directo de la página en dispositivos móviles como Android o iOS estos están configurados de modo que el favicon sea la imagen visible en el escritorio o en la pantalla principal del equipo móvil.

Favicon: un símbolo de distinción

Saber cómo usar un favicon en WordPress puede marcar la diferencia entre un blog con una fuerte relación con su público o uno que pase fácilmente desapercibido. En medio del océano de información que circula e internet ésta es una manera de distinguirse por encima de los demás. Y ya sabemos que esta necesidad de sobresalir entre un espacio tan amplio es cada vez más apremiante en el marketing digital.

Es increíble cómo un elemento tan pequeño puede traer grandes aportes y beneficios a los sitios web.

  • Actualización de WordPress la para añadir favicon:

Antes de la versión 4.3 de WordPress la creación y publicación de un favicon  eran un tanto complicadas pues había que seguir varios pasos y usar varias aplicaciones para poder personalizar nuestro sitio web con el icono de favoritos. Además era necesario usar plugin  o códigos para, entre otras cosas, garantizar la correcta actualización.

Afortunadamente luego de esta versión la herramienta viene incorporada por defecto lo que facilita sustancialmente la operación.

Tutorial para añadir un favicon en WordPress

Ahora que ya sabes las ventajas que esta herramienta te puede dar pasemos de inmediato a un tutorial para añadir favicon en WordPress. Para que no te queden dudas vamos a mostrarte los pasos a seguir tanto en el caso de WordPress.org y WordPress.com pues sabemos que este sistema de gestión de contenidos presenta variaciones en función del tipo que se utilice.

Pasos previos

Ya sea que uses cualquiera de los dos tipos de WordPress hay un par de sosas que debes hacer antes para asegurar la calidad y el formato de la imagen que usarás como favicon. Veamos:

  1. Crear y definir la imagen a usar. Sea que uses el logotipo de la marca u otra imagen como favicon el primer paso es cuidad que la misma posee la calidad suficiente. Nada pero que un favicon con poca resolución. De acuerdo a nuestra experiencia te recomendamos que el tamaño como mínimo de 512 x 512 pixeles.
  2. Guarda tu imagen el formato adecuado: el formato recomendado es PNG en especial si va a utilizar el logo pues permite conservar las trasparencias.

Recursos: Herramientas online de Genereador de Favicon (Favicon generator)

  1. https://www.favicon-generator.org/
  2. https://realfavicongenerator.net/

Descargue el favicon generado y extraiga los contenidos al directorio raíz de su sitio.

Añadir un favicon en WordPress.org

Como ya lo hemos mencionado más arriba  WordPress tiene incorporada esta función denominada “icono del sitio” por lo que sólo tienes ingresar al panel como administrador, ubicar el menú Apariencia, entrar a Personalizar, luego Identidad del sitio y finalmente Icono del sitio. Desde allí escoges la imagen y haces clic en publicar. Y listo ya le has puesto un rostro a tu sitio web.

Incluya el siguiente código en la cabecera de su documento HTML.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

Añadir un favicon en WordPress.com

En el caso que uses WordPress.com también es muy fácil añadir un favicon. Aquí la funcionalidad mediante la cual se hace el procedimiento también está incorporada por defecto y es llamada Blavatars. Para subir el favicon debemos entrar al panel de administrador, para ello la forma más sencilla es añadiendo /wp-admin luego del dominio de nuestra página.

Al ingresar ubicas el menú Ajustes, clic en Generales, ubicas Imagen y finalmente Icono del sitio, seguidamente ubicas la imagen que vas a usar y listo. Ten en cuenta que posiblemente la actualización de la imagen pueden tardar minutos o incluso unas horas ya que esa es una de las características del caché de WordPress. Asi que luego de este sólo tienes que esperar un poco.

Consejos a seguir para la creación de un favicon

Un icono que hable por sí solo

Dicen que una imagen dice más que mil palabras. Esto es verdad sí y sólo sí la imagen cuenta con un diseño que sea expresivo. Piensa que el favicon es una especie de tarjeta de presentación y que debe decir con elocuencia lo que es nuestro sitio web. De nada sirve un favicon que sea mudo.

Para que el icono hable por si sólo debes tomar dos previsiones: que sea elaborado por profesionales del diseño gráfico y que simbolice adecuadamente el tipo de página web. Estética y elocuencia son los dos requisitos fundamentales.

¿Usar o no el logotipo de la marca?

Este es uno de los aspectos sobre los cuales no hay consenso entre los desarrolladores web pues  mientras para un grupo lo mejor es usar el logotipo, otro duda de la efectividad de esa estrategia y prefieren usar una parte representativa de la imagen. Para entender un poco mejor la situación y tomes la mejor decisión en favor del trafico web de tu sitio veamos las razones de cada una de estas posturas.

De interés: Si estás empezando tu blog o simplemente iniciándote en el mundillo digital no esperes a que tu dominio de marca sea registrado por otro usuario, comprueba ahora la disponibilidad de tu dominio preferido.

Quienes prefieren usar el logo de la marca como favicon argumentan que esto ayuda a vincular más estrechamente la imagen con el sitio web, creando así una asociación más directa que permite a los usuarios distinguir el icono no solo en sus pc o dispositivos móviles sino en otros medios de publicidad según sea el caso.

Quienes optan por usar sólo una parte representativa del logo como favicon se guían por el hecho de que el tamaño reducido del icono no siempre permite identificar con claridad el logotipo.  Por esta razon prefieren usar una parte representativa o en algunos casos otro símbolo.

Impacto del CTR gracias al favicon en una web aislada:

CTR en Móvil

CTR en Desktop

Conclusión:

¿Entonces qué hacer? La decisión depende fundamentalmente de la forma del logotipo que identifique tu empresa. Si posee pequeños detalles gráficos puede que esto no se distinga claramente. En estos casos lo mejor es crear un diseño teniendo como base el logo original.

Como has podido observar en este post es sumamente sencillo subir un favicon en WordPress, esa es una tarea que no puedes esperar. Si lo haces siguiendo los pasos y consejos que hemos compartido puedes alcanzar importante resultados.

[Total:1    Promedio:5/5]

¡Atención! Me queda mucho que decir al respecto del tema, así que iré actualizando el artículo en la medida que me de el tiempo, estate atento :)

Votos
  • Valoración del usuario
  • No Rating Yet!
  • 0%
  • (0) ¡No hay opiniones todavía!

No Rating Yet!

0%



Ninguna valoración todavía ¡Sé el primero! Ninguna valoración todavía ¡Sé el primero!



Deja tu opinión

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