¿Cómo agregar un Favicon de WordPress a su sitio web? (3 Métodos)

¿Qué es WordPress Favicon?

Los Favicons de WordPress son íconos pequeños, generalmente de un tamaño de 16 × 16 píxeles, que representan su marca y están ubicados cerca de su página que puede ver fácilmente en la pestaña de su navegador.

Anteriormente, cuando Google Analytics no existía, los Favicons se usaban como una herramienta para determinar el tráfico web. Pero ahora, es bien conocido por mejorar la UX y el reconocimiento de marca.

Además, tener un Favicon de WordPress ayuda en el reconocimiento de marca. Ya que puede ser fácilmente visible en las pestañas de su navegador, marcadores, archivos de historial, etc. También se pueden usar como acceso directo a un sitio web en dispositivos pequeños como teléfonos inteligentes o pestañas. Ayuda a ahorrar tiempo a los usuarios y les permite identificar fácilmente el sitio web para navegar sin ninguna dificultad.

¿Por qué las ventajas de usar WordPress Favicon?

Además del reconocimiento de marca y la mejora de la experiencia del usuario, ya hemos discutido que la ventaja de usar WordPress Favicon es que le asegura al visitante que está navegando por el sitio web correcto y que está en la página correcta.

Supongamos que ha abierto muchas pestañas en su navegador, a medida que aumenta la cantidad de pestañas, ocultará el título de su sitio web como se muestra a continuación:

En este punto, Favicon lo ayuda a identificar su sitio web rápidamente para que pueda cambiarlo fácilmente. Incluso, puede pedirles a sus visitantes que agreguen el acceso directo del sitio web en la pantalla de inicio de su navegador o dispositivos pequeños como teléfonos inteligentes para un acceso fácil y rápido a su sitio web.

Después de todo, uno de los principales objetivos de cada sitio web es proporcionar una experiencia de usuario única para que los visitantes puedan visitar fácilmente el sitio web una y otra vez. Esto es lo que WordPress Favicon ayuda en su sitio web de WordPress, ayudando a establecer un fuerte reconocimiento de marca y mejorando la experiencia del usuario al siguiente nivel.

Ahora veamos, ¿cómo puede crear un hermoso Favicon de WordPress para su sitio web?

¿Cómo crear un Favicon de WordPress?

Para crear WordPress Favicon, lo primero que debe hacer es decidir el tamaño de WordPress Favicon y para qué dispositivos debe ser compatible. Sin embargo, ha habido una lista completa de las diferentes resoluciones de Favicons disponibles que admiten varios navegadores y plataformas.

Pero en esta publicación, utilizaremos la resolución más recomendada y ampliamente aceptada, para que le resulte fácil crear un Favicon de WordPress para su sitio web fácilmente y sin confusión.

Algunos de los mejores consejos para crear Favicons de WordPress

• La resolución más recomendada para Favicon es 512×512 píxeles.
• Elija una imagen que debe verse bien, incluso si se reduce a una resolución de 16 × 16 píxeles.
• Siga siempre las Pautas proporcionadas por Google para ser elegible para un icono de página junto a sus resultados de búsqueda.
• Puede elegir imágenes rectangulares o cuadradas, ya que se le proporcionará una opción para personalizarlas antes o después de subirlas a WordPress.

Hay muchas maneras a través de las cuales puede crear WordPress Favicon. Puede contratar a un diseñador que pueda comprender mejor su marca y diseñar un favicon de aspecto profesional. Puede usar WordPress Favicon Plugin para crear Favicon. Incluso puedes diseñar por ti mismo si sabes cómo usar Adobe Photoshop.

Además, también hay varias herramientas en línea disponibles, como el generador de Favicon y Favicon.cc, con la ayuda de las cuales puede crear Favicon fácilmente.

Suponga que va a crear un favicon para su sitio web, xyz.com. No sabes cómo usar adobe photoshop e incluso no tienes suficiente presupuesto para contratar a un diseñador profesional. En este caso, vas a utilizar el generador de Favicon.

Primero, debe visitar el sitio web y cargar la imagen que desea que se convierta en el favicon de su sitio web, como se muestra en la imagen a continuación:

Elija la configuración adecuada, como

• Genere iconos para aplicaciones Web, Android, Microsoft e iOS
• Genera iconos solo para 16×16 WordPress Favicon.ico

Marque las casillas y haga clic en el botón Crear favicon. La página web se volverá a cargar en una página de descarga desde donde puede descargar fácilmente su archivo zip de Favicon como se muestra a continuación:

Sin embargo, también puede agregar el Favicon a su sitio web manualmente copiando el código como se muestra arriba y pegándolo en el encabezado de su documento HTML.

Si no has elegido ninguna herramienta para diseñar tu favicon y optaste por diseñar tú mismo, hay algunos puntos que debes tener en cuenta antes de empezar a diseñar.

• Mantenga el diseño simple y limpio, ya que se encogerá y otros detalles podrían perderse.
• El diseño de su favicon debe ser del mismo color, gráficos o fuentes que el logotipo principal de su sitio web o debe representar su marca.
• Primero diseñe su Favicon en una resolución más grande, luego cambie su tamaño según sus requisitos.

Una vez que haya terminado de diseñar su Favicon, debe guardar el archivo en un formato de archivo compatible. Anteriormente, había un tipo de archivo Favicon de WordPress en particular, "WordPress Favicon.ico", que se usaba ampliamente. Pero ahora las cosas han cambiado y hoy en día todos los navegadores web modernos ahora admiten formatos de archivo PNG, GIF e ICO.

Sin embargo, los formatos de archivo JPEG también están disponibles y son formatos ampliamente utilizados para guardar archivos Favicon. Pero hay algunas versiones anteriores de Internet Explorer que no las admiten. Por lo tanto, es mejor ceñirse solo a aquellos que tienen apoyo universal.

¿Cómo cargar WordPress Favicon en su sitio?

Después de diseñar y guardar con éxito su Favicon, es hora de cargar o agregar Favicon a su sitio de WordPress. Hay tres maneras a través de las cuales puedes hacerlo,

1. A través del personalizador de WordPress
2. Usando un complemento para agregar Favicon
3. Agregar Favicon manualmente

Agregar Favicon usando el Personalizador de WordPress

Después del lanzamiento de la versión 4.3 de WordPress, se ha introducido una nueva opción a través de la cual se convierte en una forma fácil y rápida de cargar y recortar imágenes para usarlas como Favicon.

Lo único que debe hacer es cargar una imagen clara de alta calidad, preferiblemente con una resolución de 512X512. En primer lugar, inicie sesión en su panel de WordPress > Apariencia > personalizar , como se muestra a continuación:

La página se cargará para personalizar la página donde debe hacer clic en la pestaña Identidad del sitio como se muestra a continuación:

Después de hacer clic en la pestaña Identidad del sitio, debe buscar el botón "Seleccionar icono del sitio" como se muestra.

Después de eso, aparecerá una interfaz de WordPress Media desde donde puede cargar imágenes o usar las imágenes existentes de la biblioteca de medios para hacer su Favicon. Ahora haga clic en el botón "Seleccionar" ubicado en la esquina inferior derecha.

Después de eso, puede recortar o cambiar el tamaño de la imagen seleccionada para que se ajuste perfectamente a su Favicon, haga clic en el botón Recortar imagen para finalizarla.

Después de completar todos los pasos anteriores, es hora de guardar todos los cambios y presionar el botón de publicar para publicarlo. Sin embargo, en cualquier momento si no está satisfecho con su Favicon, debe repetir los pasos anteriores para el cambio de Favicon de WordPress.

Uso de un complemento de Favicon de WordPress para agregar Favicon a su sitio

Si está buscando más opciones además de la función predeterminada del ícono del sitio de WordPress, entonces puede obtener la ayuda de los complementos de WordPress Favicon. Hay varios complementos de Favicon gratuitos y populares disponibles que tienen la misma funcionalidad sencilla pero le ofrecen muchas más opciones de compatibilidad y una experiencia más personalizada.

Uno de los complementos de WordPress Favicon más populares y ampliamente utilizados que puede usar es Favicon de RealFaviconGenerator.

Este complemento tomó la compatibilidad demasiado en serio para que pueda configurar un Favicon receptivo que sea compatible con la mayoría de los navegadores web populares.

Para empezar, primero debe instalar el complemento ReavFaviconGenerator a través del panel de control de WordPress> Complementos> Agregar nuevo .

Seguido de hacer clic en el botón Instalar y activarlo. Ahora ve a Apariencia > Favicon y selecciona una imagen que debe tener al menos 70 × 70 de la biblioteca de medios y haz clic en el botón Generar Favicon como se muestra a continuación:

En el momento en que haga clic en Generar favicon, será redirigido al sitio web del complemento donde deberá desplazarse hacia abajo y hacer clic en el botón " Generar sus Favicons y código HTML ".

Mientras la herramienta funciona en segundo plano, lo redirigirá de regreso al panel de control de WordPress. Ahora su favicon está activo y listo.

Agregar WordPress Favicon manualmente

Si no sabe cómo acceder al directorio raíz, le recomendamos encarecidamente que siga los dos métodos sencillos anteriores. Pero si aún prefiere usar el método manual, se le pedirá que lo haga a través de un cliente FTP o cPanel proporcionado por su proveedor de alojamiento web .

Paso 1: Pero antes de eso, debes ir al sitio web de Realfavicongenrator. Haga clic en el botón ' Seleccione su imagen de Favicon ' para generar su Favicon.

Una vez que cargue la imagen, notará la misma interfaz de usuario que cuando usa el complemento RealFaviconGenerator. Personalice o realice cambios si lo desea y desplácese hacia abajo en la página web y haga clic en el botón " Generar sus Favicons y código HTML " como se muestra a continuación:

Paso 2: cuando haga clic en el botón Generar sus Favicons y código HTML , la página se moverá a la página siguiente desde donde podrá descargar el paquete Favicon .

Extraiga el paquete Favicon descargado y cárguelo en el directorio raíz de su sitio web, ya sea a través de un cliente FTP o cPanel proporcionado por su cliente de alojamiento.

En WPOven , tratamos de brindar una experiencia única a nuestros usuarios y su comodidad es nuestra máxima prioridad. Por lo tanto, proporcionamos un nuevo administrador de archivos para administrar fácilmente los archivos y carpetas de su sitio.

Presentamos nuestra nueva herramienta del sitio, el administrador de archivos.

Con el Administrador de archivos de WPOven, le será más fácil administrar los archivos y carpetas de su sitio. Puede realizar las siguientes tareas fácilmente.

• Instalar complementos y temas de WordPress
• Crear, editar, eliminar, renombrar, mover y agregar archivos y carpetas
• Crear archivos con zip o descomprimir y descomprimir archivos
• Ordenar archivos
• Buscar archivos y carpetas
• Subir archivos

Para acceder a los archivos y carpetas de su sitio a través de la herramienta Administrador de archivos, primero debe iniciar sesión en el panel de control de WPOven. Luego seleccione el sitio en el que desea trabajar.

A continuación, seleccione el submenú " Herramientas " y haga clic en el botón " Iniciar administrador de archivos ".

Ahora podrá ver los archivos y carpetas de su sitio en el Administrador de archivos

Haga clic en el botón "Agregar archivos" y seleccione los archivos extraídos para cargar.

Pero debe tener en cuenta que el archivo que va a colocar debe estar en la carpeta raíz o no funcionará.

Paso 3: para finalizar todo el proceso y hacer que todo funcione correctamente, el último paso que debe realizar es agregar el fragmento de código generado por RealFaviconGenerator a la sección principal de su tema de WordPress.

Para agregar el siguiente fragmento de código a la sección del encabezado, debe instalar y activar el complemento de encabezados y pies de página. Luego navegue a Configuración> Insertar encabezados y pies de página y pegue el fragmento de código en la sección del encabezado como se muestra en la imagen a continuación y haga clic en guardar.

Después de terminar todos los pasos, su favicon debería comenzar a aparecer.

¿Qué sucede si WordPress Favicon no se muestra?

Si su WordPress Favicon no aparece, incluso si ha seguido todos los pasos mencionados anteriormente, puede deberse a las siguientes razones:

1. Usó un tipo de archivo Favicon de WordPress incorrecto : PNG, GIF y JPEG son algunos de los formatos de archivo de imagen que ahora son compatibles con los navegadores modernos para Favicon. Pero no son compatibles con los navegadores antiguos. Además, incluso la mayoría de los navegadores web prefieren el uso del formato de archivo Favicon.ico de WordPress, por lo que es mejor optar por él. Formatos ICO para evitar problemas de compatibilidad.
2. No se puede configurar el tamaño de favicon apropiado : otra razón para no mostrar Favicon en su sitio web puede ser la incompatibilidad del tamaño de la imagen del favicon con el tamaño de la pantalla del dispositivo. Esto se puede eliminar utilizando el tipo de archivo favicon.ico que almacena múltiples versiones de una imagen en diferentes tamaños y resoluciones. Para que el favicon se pueda ver fácilmente en cualquier tamaño de pantalla.
3. Complemento de Favicon de WordPress incompatible con el tema : también es posible que si está utilizando un complemento generador de Favicon de WordPress, muestre problemas de incompatibilidad con el tema actual que está utilizando. Por lo tanto, es mejor verificar las actualizaciones del complemento y su compatibilidad con su tema actual y la versión de WordPress.

Resumen

Ahora, te has dado cuenta de cómo WordPress Favicon puede ayudar en el reconocimiento de la marca y mejorar la experiencia del usuario. Y lo mejor es que cualquiera puede crear e implementar fácilmente Favicons en su sitio web siguiendo todas las pautas y estos sencillos pasos:

1. Puede crear Favicons fácilmente con muchas de las opciones disponibles, como usar herramientas de generador de Favicon en línea, complementos y con la ayuda de profesionales.
2. También puede agregarlos fácilmente a su sitio web a través de la opción de personalización de WordPress, usar un complemento o hacerlo manualmente.

Por último, si tiene más puntos valiosos para agregar que no hemos mencionado en esta publicación, háganoslo saber en la sección de comentarios a continuación:

Preguntas frecuentes