Los favicons son más conocidos como los pequeños iconos que aparecen junto a los nombres de los sitios web en las pestañas del navegador. Sin embargo, aunque es donde se originaron, tu favicon de WordPress también se utiliza en otros lugares como marcadores del navegador, botones de la pantalla de inicio del iOS y más.
Como tal, es una parte importante de tu marca. Cuando se utiliza correctamente, tu favicon o «icono de sitio» puede ayudar a los usuarios a identificar fácilmente tu negocio. Puede ayudar a impulsar el reconocimiento de la marca, e incluso mejorar la experiencia del usuario (UX) del sitio.
En este artículo, discutiremos los beneficios de usar un favicon en un sitio de WordPress. Luego explicaremos cómo crear uno, y te guiaremos a través de tres opciones fáciles para añadirlo a tu sitio.
Finalmente, terminaremos con algunos consejos de favicon de WordPress y las mejores prácticas. ¡Empecemos!
Los beneficios de usar un Favicon de WordPress
Si alguna vez has tenido demasiadas pestañas abiertas a la vez (¡culpable!), es probable que puedas apreciar la utilidad de un favicon. Un favicon facilita a los usuarios la identificación rápida de su sitio web cuando tienen varias pestañas abiertas en su navegador:
Dependiendo del número de pestañas abiertas, el título de tu sitio puede no estar siempre visible. Por lo tanto, añadir un favicon puede ayudar a mejorar el UX para tus visitantes.
Además de aumentar el reconocimiento de la marca, el uso de un favicon de WordPress también puede hacer que su sitio tenga un aspecto más profesional y creíble. A su vez, esto puede ayudar a aumentar la confianza de los clientes.
Además, si alguien guarda su sitio web en la pantalla de inicio de su dispositivo móvil, su favicon aparecerá como el icono. El uso del logo de su marca o de imágenes similares puede ayudar a que su sitio sea más fácil de reconocer, y en general ayuda a crear una estética cohesiva.
¿Cómo crear un Favicon de WordPress?
Si ya tienes un favicon que estás listo para usar (la mayoría de las empresas utilizan su logo o una variante del mismo), no dudes en pasar a la siguiente sección. De lo contrario, veamos cómo crear tu imagen de favicon.
En el pasado, tenías que usar un archivo específico de la ICO para tu favicon. Sin embargo, hoy en día, todos los navegadores modernos soportan el uso de archivos ICO, PNG y GIF para tu favicon. JPEG también es ampliamente soportado (léase: JPG vs JPEG), pero no en todas las versiones de Internet Explorer, lo que lo hace menos ideal para el uso de favicon.
Si estás familiarizado con Photoshop, puedes usarlo para crear manualmente un favicon. Sin embargo, a menudo es más fácil utilizar una herramienta básica basada en la nube para crear tu conjunto de favicones a partir de una imagen existente.
El RealFaviconGenerator (la versión en la nube del plugin que discutiremos más adelante) es una gran opción porque:
- También crea iconos de aplicaciones.
- Proporciona iconos de favicon en formatos PNG e ICO.
- Puedes personalizar tu favicon después de subir tu imagen.
- Todo lo que tienes que hacer es pegar el código que el plugin te da.
Otros generadores de favicon útiles son:
- Favicon.cc, que te permite crear un favicon desde cero o subir una imagen existente.
- Generador Favicon, que funciona de manera similar al Generador RealFavicon.
Para usar el RealFaviconGenerator, comienza subiendo la imagen que quieres usar haciendo clic en Selecciona tu imagen Favicon:
En la siguiente pantalla, puedes configurar detalles específicos sobre tu conjunto de favicon (si lo deseas). Cuando hayas terminado, desplázate hasta la parte inferior y haz clic en Generar tus faviconos y código HTML:
En la siguiente página, haz clic en el paquete Favicon para descargar tus imágenes favoritas:
Asegúrate de dejar esta página abierta si planeas añadir manualmente el favicon a tu sitio.
Consejos para crear un favicon de WordPress
Hay algunos consejos de diseño y formato que vale la pena mencionar y revisar antes de crear tu favicon. Lo más importante es que el tamaño recomendado para los faviconos es de 512×512 píxeles.
Aunque tu favicon de WordPress será un cuadrado perfecto, también puedes usar una imagen rectangular y recortarla antes o después de subirla a WordPress. WordPress viene con una función de recorte incorporada para los iconos del sitio si los añades a través del Personalizador (que te explicaremos en breve).
Además, es importante tener en cuenta que tu favicon se mostrará como un cuadrado de 16×16 px. Por lo tanto, quieres elegir una imagen que se vea bien una vez que se haya reducido a esas dimensiones. Aunque se mostrará con ese tamaño, debería tener una altura y anchura de al menos 512 px.
Por último, es una idea inteligente revisar algunas de las directrices de Google para crear y usar faviconos. Esto ayudará a garantizar que tu icono se muestre de forma óptima en los motores de búsqueda y en las pestañas de los navegadores.
¿Cómo añadir un Favicon de WordPress a tu sitio web? (3 opciones sencillas)
Una vez que tengas tu favicon, estarás listo para añadirlo a tu sitio de WordPress. Echemos un vistazo a tres métodos que puedes usar para hacerlo.
1. Usando el Personalizador de WordPress para subir tu Favicon
A partir de WordPress 4.3, todos los sitios de WordPress incluyen una función de icono de sitio que facilita la carga y el recorte de una imagen para usarla como favicon. Para la mayoría de los usuarios, este es el método más simple y rápido para agregar un icono de favicon a WordPress.
Todo lo que necesitas es una imagen de al menos 512×512 píxeles. WordPress se encargará del resto del proceso. Para empezar, ve a Apariencia → Personalizar en tu panel de control de WordPress:
Desde allí, navega a la pestaña de Identidad del Sitio:
A continuación, mira en la parte inferior para la sección de Icono del Sitio, y haz clic en el botón de Icono del Sitio:
Se abrirá la interfaz normal de la Biblioteca Multimedia de WordPress. Puedes elegir una imagen existente en tu Biblioteca de Medios o subir una nueva. Si has usado RealFaviconGenerator para crear tu favicon, asegúrate de que el paquete que has descargado está descomprimido.
Una vez que tengas una imagen que te guste, haz clic en ella y elige Seleccionar en la esquina inferior derecha:
Si tu imagen no es ya un cuadrado perfecto (por ejemplo, 512×512 px), WordPress te dará la oportunidad de recortarla en la siguiente pantalla.
Utiliza el cuadro para resaltar la parte de la imagen que deseas utilizar para icono. Puedes ver una vista previa de cómo se verá tu imagen recortada en el lado derecho de la interfaz.
Una vez que estés contento con el aspecto de las cosas, haz clic en Crop Image para finalizar tu elección:
¡Eso es! Todo lo que tienes que hacer es seleccionar Guardar y Publicar para hacer tu favicon en vivo. Si alguna vez quieres cambiar tu favicon en el futuro, puedes volver a esta interfaz.
2. Instalando un plugin para añadir tu WordPress favicon
Si prefieres una solución de plugin a la funcionalidad del icono nativo del sitio de WordPress, puedes usar un popular plugin gratuito llamado Favicon de RealFaviconGenerator (la herramienta basada en la nube de la que hablamos antes).
Este plugin es tan simple de usar como el personalizador nativo de WordPress. Sin embargo, ofrece opciones de compatibilidad adicionales para varios dispositivos e iconos de aplicaciones. Para usarlo, instala y activa el plugin gratuito a través de tu panel de control de WordPress:
Una vez que actives el plugin, ve a Appearance → Favicon para crear tu conjunto de favicon. Todo lo que necesitas hacer es seleccionar o subir una imagen de al menos 70×70 px (idealmente 260×260 px):
Después de seleccionar tu imagen, haz clic en Generar favicon. Cuando selecciones ese botón, el plugin te llevará fuera de tu sitio de WordPress al sitio web del RealFaviconGenerator.
En la parte inferior del sitio, desplázate hacia abajo para seleccionar Generar tus Favicons y código HTML (ver la sección anterior). Mientras la herramienta funciona, Generador de Favicons Real te enviará de vuelta a tu tablero de WordPress:
Después de eso, tu favicon estará listo para funcionar. Puedes ver vistas previas de cómo se verá en diferentes dispositivos en la interfaz del plugin.
3. Añadiendo manualmente tu Favicon a través de FTP
Si prefieres hacer las cosas manualmente, es posible añadir un favicon a tu sitio de WordPress a través del Protocolo de Transferencia de Archivos (FTP) o del Administrador de Archivos si tu proveedor utiliza cPanel.
Si sigues este método, también tendrás que crear tu propia imagen de favicon. Puedes hacerlo siguiendo los pasos que hemos descrito anteriormente en este post.
Para esta demostración utilizaremos el paquete que hemos creado y descargado de RealFaviconGenerator, las instrucciones se aplican aunque hayas utilizado una herramienta diferente para crear tu favicon.
Para añadir manualmente un favicon de WordPress a tu sitio web, necesitarás:
- Acceder a los archivos de tu sitio, ya sea a través de un cliente FTP o el Administrador de Archivos en su cPanel de alojamiento.
- Localiza el directorio raíz de tu sitio y sube el contenido de tu paquete de favicon (favicons.zip)
Los archivos deben estar en la misma carpeta que las carpetas wp-admin y wp-content. A continuación, toma el código que RealFaviconGenerator te proporcionó antes, y cualquiera de los dos:
- Utiliza un plugin como Insert Headers and Footers para añadirlo al encabezado de tu tema.
- Pégalo directamente en la sección <cabeza> de tu tema, editando el archivo header.php de tu tema.
El uso del plugin Insert Headers and Footers es óptimo porque asegura que no perderás tu favicon si cambias los temas de WordPress en el futuro.
Para ello, instala y activa Insertar encabezados y pies de página. Luego ve a Configuración → Insertar encabezados y pies de página, y pega tu código en la sección Scripts en Header:
Asegúrate de guardar los cambios. ¡Entonces ya está todo hecho!
Consejos adicionales para usar Favicons de WordPress
Si quieres que cada sitio de tu red de sitios múltiples tenga un favicon único, la forma más fácil de conseguirlo es usar un plugin de favicon como el que aparece arriba. Si bien es posible editar los archivos de tu tema para habilitar faviconos únicos para cada sitio de la red, el proceso es significativamente más complicado que el uso de un plugin.
También podrías considerar usar una Red de Entrega de Contenido (CDN) para servir tus imágenes de favicon. Los tres métodos que discutimos en este post almacenan las imágenes de tu favicon en tu servidor. Sin embargo, puedes optimizar tu sitio aún más utilizando una CDN para servir esas imágenes.
Cuando instalas Cloudflare o un servicio como KeyCDN, los navegadores de los visitantes cargarán tu favicon desde tu CDN en lugar del servidor de tu sitio. Si estás usando un plugin como CDN Enabler, debería reescribir automáticamente tu URL del favicon de WordPress para que funcione con los métodos anteriores.
Resumen
Un favicon de WordPress puede ayudar a aumentar el reconocimiento de tu marca y mejorar la UX para los visitantes de tu sitio web. Afortunadamente, tienes múltiples opciones para elegir que hacen que añadir uno sea sencillo.
Los tres métodos principales que puedes usar para añadir un favicon de WordPress a tu sitio son:
- Usar el Personalizador de WordPress para subir un icono del sitio.
- Instalando un plugin, como Favicon de RealFaviconGenerator.
- Añadiendo manualmente un favicon a través de un cliente FTP o de tu gestor de archivos.
