Cada pestaña de la barra de tu navegador contiene el título de la página del sitio y un pequeño icono que recibe el nombre de favicon, favicón, favicono o icono de página en ca­s­te­llano. Ambos facilitan al usuario ide­n­ti­fi­car la página web y mejoran su orie­n­ta­ción cuando hay varias pestañas abiertas. El favicón de una web también es parte de la marca de la empresa y mejora la ex­pe­rie­n­cia del usuario. Existen tres métodos di­fe­re­n­tes de insertar un favicón en WordPress. Te ex­pli­ca­mos paso a paso cómo hacerlo y las ventajas de cada método.

Nota

En ca­s­te­llano, se aceptan las formas favicón y favicono y sus plurales favicones y faviconos para el an­gli­ci­s­mo favicon, voz que proviene de favourite icon.

¿Por qué insertar un favicón en WordPress?

El término favicon es la abre­via­tu­ra de “favourite icon”. Este pequeño icono es un elemento básico en la página web de una empresa. Se muestra en la barra de las pestañas, en la barra de ma­r­ca­do­res, en las apli­ca­cio­nes móviles de WordPress, en los iconos de inicio y en los re­su­l­ta­dos de búsqueda en el móvil. Por co­n­si­guie­n­te, se re­co­mie­n­da elegir un icono si­g­ni­fi­ca­ti­vo y único como favicón. El favicón trae consigo numerosas ventajas:

  • Pro­po­r­cio­na seriedad y pro­fe­sio­na­li­dad a la página web.
  • Facilita al usuario el re­co­no­ci­mie­n­to de la empresa y de sus servicios en la web y, por tanto, mejora la ex­pe­rie­n­cia del usuario.
  • Tiene un efecto positivo en el SEO de la página.
  • Cuando un usuario tiene varias pestañas abiertas en el navegador, los títulos se ocultan, pero el favicón siempre permanece visible.
Consejo

La mayoría de empresas utiliza su logo o una variante del mismo como favicón en WordPress.

Cómo añadir un favicón a WordPress

Hay tres maneras di­fe­re­n­tes de insertar un favicón en WordPress: con el Pe­r­so­na­li­za­dor de WordPress, con un plugin o ma­nua­l­me­n­te. A co­n­ti­nua­ción, te ex­pli­ca­mos cada una de estas opciones.

Consejo

En este artículo te ex­pli­ca­mos cómo insertar un favicón ya creado en WordPress. Puedes crearlo con cualquier programa de diseño gráfico o con nuestro Favicon Generator.

Método 1: Pe­r­so­na­li­za­dor de WordPress

La forma más fácil y rápida de insertar un favicón en WordPress está di­s­po­ni­ble desde la versión 4.3 de la pla­ta­fo­r­ma. Con esta he­rra­mie­n­ta, puedes subir el favicón a WordPress, re­co­r­tar­lo si es necesario y co­n­fi­gu­rar­lo en un par de clics.

Si utilizas este método, el tamaño mínimo re­co­me­n­da­do para el favicón es de 512 x 512 píxeles. Sin embargo, en la pestaña del navegador, la imagen se mostrará en un tamaño de 16 x 16 píxeles. Asegúrate de que tu favicón es re­co­no­ci­ble con este tamaño. A co­n­ti­nua­ción, te ex­pli­ca­mos paso a paso cómo insertar tu favicón con el Pe­r­so­na­li­za­dor de WordPress.

Paso 1: abre el Pe­r­so­na­li­za­dor

En la barra de opciones de WordPress, haz clic en “Apa­rie­n­cia” (“Ap­pea­ra­n­ce”) y luego en “Pe­r­so­na­li­zar” (“Customize”).

Paso 2: abre la opción “Identidad del sitio web”

Se­le­c­cio­na la opción “Identidad del sitio web” (“Site Identity”).

Paso 3: se­le­c­cio­na tu favicón

En este apartado podrás co­n­fi­gu­rar el título y el subtítulo de tu página web. Esta in­fo­r­ma­ción se en­co­n­tra­rá junto al favicón en la pestaña del navegador. En el apartado “Icono del sitio” (“Site Icon”), haz clic en el botón “Se­le­c­cio­nar imagen” (“Select site icon”) para pe­r­so­na­li­zar tu favicón de WordPress.

Paso 4: se­le­c­cio­na tu favicón

A co­n­ti­nua­ción, se abrirá la mediateca de WordPress. Si ya has subido tu favicón, se­le­c­ció­na­lo. De lo contrario, haz clic en la pestaña “Se­le­c­cio­nar archivos” (“Select Files”) y se­le­c­cio­na el archivo que quieras de tu ordenador. Confirma tu selección haciendo clic en “Select”.

Paso 5: recorta tu favicón

Después, tendrás la po­si­bi­li­dad de recortar la imagen. WordPress muestra au­to­má­ti­ca­me­n­te una vista previa actual del favicón en la parte derecha. Cuando hayas ajustado el recorte, co­n­fí­r­ma­lo con el botón “Recortar imagen” (“Crop Image”). Si tu favicón ya tiene el formato adecuado, pulsa en “No recortar” (“Skip Cropping”).

WordPress insertará el favicón au­to­má­ti­ca­me­n­te. Si en un futuro deseas cambiarlo, vuelve a esta sección de ajustes.

Método 2: insertar un favicón con plugin

WordPress ofrece un plugin para casi cualquier cosa, incluida la inserción de favicones. Uno de los plugins gratuitos más populares es Favicon by Real­Fa­vi­co­n­Ge­ne­ra­tor. Comparado con el Pe­r­so­na­li­za­dor de WordPress, este ofrece opciones de co­n­fi­gu­ra­ción adi­cio­na­les para mejorar la co­m­pa­ti­bi­li­dad del favicón con di­fe­re­n­tes di­s­po­si­ti­vos y apli­ca­cio­nes. A co­n­ti­nua­ción, te ex­pli­ca­mos cómo co­n­fi­gu­rar un favicón en WordPress con este plugin.

Paso 1: instala el plugin

En el menú de WordPress, abre la sección “Plugins” y luego haz clic en “Añadir nuevo” (“Add new”).

Busca el plugin Favicon by Real­Fa­vi­co­n­Ge­ne­ra­tor, se­le­c­ció­na­lo en los re­su­l­ta­dos de búsqueda e instálalo. Luego haz clic en “Activar” y el plugin estará listo para usarse.

Paso 2: abre la co­n­fi­gu­ra­ción del plugin

Una vez instalado el plugin, ve al menú y haz clic en “Apa­rie­n­cia” (“Ap­pea­ra­n­ce”) y luego en “Favicon”. Aquí en­co­n­tra­rás la co­n­fi­gu­ra­ción del plugin.

Paso 3: se­le­c­cio­na el favicón

Haz clic en “Se­le­c­cio­nar de la bi­blio­te­ca mu­l­ti­me­dia” (“Select from the Media Library”) para abrir la mediateca de WordPress y se­le­c­cio­na la imagen de tu favicón. El favicón debe tener como mínimo un tamaño de 70 x 70 píxeles, pero se re­co­mie­n­da que tenga 260 x 260 píxeles o más. Después de haber se­le­c­cio­na­do la imagen, confirma tu selección haciendo clic en el botón “Generar favicón” (“Generate favicon”).

Paso 4: confirma la inserción del favicón

El plugin te re­di­ri­gi­rá au­to­má­ti­ca­me­n­te a tu página web. Cuando la imagen se haya cargado, di­s­po­n­drás también de algunos ajustes op­cio­na­les. Si quieres, puedes ajustar la vi­sua­li­za­ción del favicón para el navegador de es­cri­to­rio, para los re­su­l­ta­dos de búsqueda de Google o para di­fe­re­n­tes formatos de sma­r­t­pho­ne.

Si has realizado todos los ajustes o quieres saltarte los restantes, haz clic en el botón “Generar favicón y código HTML” (“Generate your Favicons and HTML code”) al final de la página.

El plugin te re­di­ri­gi­rá de nuevo al backend y co­n­fi­r­ma­rá la in­s­ta­la­ción del favicón en WordPress.

Método 3: insertar un favicón a mano

En muchos casos, WordPress también ofrece la po­si­bi­li­dad de hacer los ajustes ma­nua­l­me­n­te. Por lo tanto, también se puede añadir un favicón a WordPress a través del Protocolo de tra­n­s­fe­re­n­cia de archivos (FTP). Para esto ne­ce­si­ta­rás un paquete de favicón con di­fe­re­n­tes archivos y un código HTML. En la red, dispones de muchas he­rra­mie­n­tas online gratuitas para crearlos.

Paso 1: crea los archivos para tu favicón

Abre cualquier he­rra­mie­n­ta online para generar favicones. En este ejemplo, uti­li­za­mos Real Favicon Generator. Haz clic en el botón “Select your Favicon image” para cargar la imagen.

A co­n­ti­nua­ción, apa­re­ce­rán una serie de ajustes op­cio­na­les para cambiar el tamaño de la imagen y su fondo. Realiza los cambios que desees o sáltate este paso y genera el favicón y el código HTML.

Después tendrás la po­si­bi­li­dad de descargar el paquete del favicón y de copiar el código HTML. Descarga el paquete y re­nó­m­bra­lo “favicon.ico”. De esta manera, el gráfico se re­co­no­ce­rá di­re­c­ta­me­n­te como favicón.

Paso 2: sube el paquete del favicón por FTP

Accede a los datos de WordPress a través del FTP. Abre el di­re­c­to­rio raíz y sube allí el paquete del favicón. Asegúrate de que se encuentra en la misma carpeta que la carpeta WP Admin y la carpeta WP Content.

Paso 3: inserta el código HTML

Después, abre el archivo header.php e inserta el código HTML del favicón en la parte del en­ca­be­za­do. Asegúrate de que tu dominio y la ruta del favicón estén es­pe­ci­fi­ca­dos co­rre­c­ta­me­n­te.

Consejo

Un alo­ja­mie­n­to WordPress  pro­fe­sio­nal garantiza un comienzo fácil en la pla­ta­fo­r­ma, brinda confianza y pone a tu alcance copias de seguridad au­to­má­ti­cas para tu sitio web.

Ir al menú principal