3 formas fáciles de agregar un Favicon WordPress en 2022 (Guía para principiantes)

¿Estás listo para aprender todo lo que te gustaría saber sobre tu WordPress Favicon? Si no está familiarizado, el favicón de su sitio es ese pequeño icono que aparece en su pestaña del navegador web. Por ejemplo, así es como se ve nuestro favicón en Herotemes:

También verá que algunas personas llaman al “ícono del sitio” de los favicones. No te preocupes, soy lo mismo. En esta publicación aprenderás:
¿Por qué debería importarle algo pequeño como su WordPress Favicon?
Cómo crear un favicon para su sitio de WordPress (y qué tamaño y formato usar)
Cómo agregar un favicon a WordPress utilizando tres métodos diferentes
¿Por qué debería preocuparme por su Favicon WordPress, lo sé? Una pequeña imagen que aparece solo en la pestaña del navegador probablemente no funcionará o no destruirá su negocio. Pero hay dos razones por las que debe tomarse un tiempo para crear un favicon para WordPress.
En primer lugar, el uso de un Favicon ayuda a la marca y hace que su sitio se destaque en los navegadores de sus visitantes. Por ejemplo, ¿qué pestañas llamo su atención en la captura de pantalla a continuación?

Es Herotemes y Twitter, ¿verdad? Esto importa porque a la gente le gusta tener más pestañas abiertas (no, ¡no eres el único que reúne pestañas!). Incluso en 2009, las personas tenían un promedio de más de 3 archivos, con más entre los jóvenes. Y aunque no encuentro datos más recientes, estoy dispuesto a apostar que el promedio ha crecido, ¡no ha disminuido! Más allá de marcar su sitio en los navegadores y resaltarlo, su Favicon también ayuda a los usuarios móviles. Si un usuario alguna vez guarda su sitio web en la pantalla de inicio, el Favicon aparecerá como un icono en muchos dispositivos.
Cuando piensas en lo fácil que es agregar un Favicon WordPress, definitivamente vale la pena tomar estos beneficios unos minutos de día. Cómo crear una imagen de Favicon que tenga el tamaño y el formato correctos antes de que pueda seguir las instrucciones de paso por paso en las siguientes secciones sobre cómo agregar un favicon a WordPress, tendrá que … realmente tiene la imagen que usted ¡Quiere usar para Favicon! Y eso significa que necesita conocer el tamaño y el formato correctos para su Favicon con su rango, esto se ha vuelto más complicado de lo que era. Pero para abordar esta complejidad, hay algunas herramientas que tomarán un favicon inicial y se formarán automáticamente para todos los dispositivos diferentes. Por lo tanto, para crear Favicon, esto es todo lo que necesita:
Una imagen cuadrada. El tamaño óptimo del favicón de WordPress es 512 × 512 PX, aunque ligeramente más pequeño, como 260 × 260 px, todavía es aceptable. Todos los métodos que mostraré que cambiará el tamaño según sea necesario.
Una imagen PNG, que es la mejor apuesta para la web moderna.
Para crear su imagen, puede usar un instrumento como Adobe Photoshop o GIMP. O puede usar algo como Favicon.io para generar una imagen de Favicon a partir del texto o emoji. Si tiene un logotipo de alta resolución, lo más fácil de hacer es tomar una versión cuadrada de su logotipo (esto es lo que usamos en Herotemes).
Cómo agregar un favicon a WordPress (3 métodos) Una vez que tiene el archivo de imagen, está listo para agregar ese favicon a su sitio de WordPress. A continuación, le mostraré tres formas diferentes en que puede agregar Favicon a WordPress. Sin embargo, cada método es un poco diferente. Para ayudarlo a elegir el adecuado para su sitio, aquí hay una breve descripción: Agregar Favicon con la función básica de WordPress: esto es muy simple y le permite agregar Favicon a través de WordPress Customizer. La única desventaja es que no agregará formatos Favicon para todos los dispositivos. Sin embargo, para la mayoría de los sitios, esto está bien.
Plugin WordPress Realfavicongnerator: esto hace que sea muy fácil agregar un favicon para todos los dispositivos. La única desventaja potencial es que le pide que mantenga el complemento activo, que puede que no les guste.
Realfavicongnerator Manual Method Instste-inst para usar el complemento, puede usar el sitio web RealfavicGenerator y puede agregar manualmente el código. Este método elimina la necesidad de mantener un complemento activo, pero se vuelve un poco más complicado, porque tendrá que agregar un fragmento de código al encabezado de la cabeza.
Si eres un principiante, te recomiendo que te quedes con uno de los dos primeros métodos. Pero los usuarios avanzados podrían preferir el tercer método.
Cómo agregar un favicon a WordPress con la funcionalidad básica es muy simple, porque utiliza una función básica de WordPress. Para comenzar, acceda a la apariencia → Personalización en el tablero de WordPress para acceder al personalizador de WordPress:
Una vez que esté en la personalización de WordPress, haga clic en la opción ID Site:
Luego busque la sección del icono del sitio y haga clic en Seleccione la imagen para cargar la imagen de Favicon: abrirá la biblioteca de medios regular, donde puede cargar su imagen a medida que continúa. Una vez que haya subido su imagen, haga clic en el botón Seleccionar:

A partir de ahí, WordPress le dará la opción de cortar la imagen de Favicon, así como las vistas previas en vivo de su imagen.

Ajuste al corte correcto y luego haga clic en la imagen de corte:

¡Y terminaste! Asegúrese de hacer clic en la opción de publicación en la parte superior de WordPress personalizada y su Favicon debe estar en vivo. Cómo usar un complemento WordPress Favicon (cubre varios dispositivos) ahora, le mostraré cómo usar un complemento Favicon WordPress para lograr el mismo efecto. Una vez más, la diferencia entre este método y el anterior es que el complemento agregará favicones optimizados para varios dispositivos. También le brinda una interfaz que le permite personalizar la forma en que Favicon busca diferentes dispositivos.

Podrá crear favicons personalizados para:

iOS

Androide
Telefono windows
y así
No necesariamente necesita esto, se trata más de cubrir las cubiertas de borde. Para seguir este método, deberá instalar el complemento gratuito Favicon de Realfavicongnerator. Después de activar el complemento, vaya a la aparición → Favicon. Use el botón Seleccionar en la biblioteca de medios para cargar o seleccionar el favicon de la biblioteca de medios de WordPress. Luego haga clic en Generation Favicon:
Después de eso, el complemento lo llevará a un sitio externo donde puede cambiar la forma en que Favicon busca diferentes dispositivos. Una vez que haya terminado de hacer esos ajustes, desplácese y haga clic en el botón Generar Favicon y HTML:
Y una vez que haga clic en él, lo llevará de regreso al tablero de WordPress y debería ver un mensaje exitoso, así como una vista previa de su Favicon en diferentes dispositivos:
¡Eso es todo! He terminado. Solo asegúrese de mantener el complemento activo, de lo contrario, sus favicones desaparecerán. Cómo agregar manualmente un favicon a WordPress utilizando la misma herramienta RealfavicGnerator nuevamente, con el método del complemento anterior, deberá dejar el complemento activo para continuar usando sus favoritos.

Si esto es un problema para usted, puede usar la misma herramienta para hacer todo manualmente. El resultado final es exactamente el mismo, solo tendrá que cargar manualmente las imágenes a través del FTP y agregar un código en la sección de su sitio. Lo dividiré en pasos porque es un poco más complicado … Paso 1: Genere el paquete Favicon para iniciar, acceda al sitio web RealfavicGenerator y haga clic en Seleccione la imagen de Favicon para cargar la imagen de Favicon:
Una vez que cargue su imagen, verá la misma interfaz de complemento y podrá viajar y personalizar el Favicon para diferentes dispositivos.

Al igual que en el caso del complemento, desplácese hacia abajo y haga clic en el código Generar Favicon y HTML cuando haya terminado de hacer cambios:

Paso 2: Cargue el paquete Favicon en su sitio web en su siguiente pantalla, haga clic en el botón Para descargar el paquete Favicon: entonces deberá extraer este paquete y cargarlo en la carpeta raíz de su sitio usando FTP (si no está seguro Qué es FTP, le recomiendo que se quede con el método de complemento en la sección anterior). Asegúrese de colocar todos los archivos en la carpeta raíz; de lo contrario, no funcionará. Paso 3: Agregue el fragmento de código en de su base para finalizar las cosas, deberá agregar el fragmento de código de Realfavicongnerator a su tema de WordPress : Sección:
O puede agregar el siguiente fragmento de código a las funciones de funciones.php del tema del niño (debe usar un tema infantil): / * agrega el fragmento de código favicon de realfavicongenerator * / add_action (‘wp_head’, ‘add_favicon’); Function add_favicon () {?> Reemplace esta línea de texto con código Favicon <? Php};

¡Cualquiera de los métodos está bien! Una vez que haga esto, ha terminado todo y su Favicon debería comenzar a funcionar. Agregue su WordPress Favicon hoy solo lleva unos minutos para agregar el Favicon y dar a los visitantes una experiencia más marcada. Y aquí está lo mejor: una vez que agrega un favicon a su sitio de WordPress, ¡nunca debe pensar en ello! ¿Todavía tiene alguna pregunta sobre cómo agregar un Favicon WordPress? ¡Cuéntanos en los comentarios y te ayudaremos!