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

¿Listo para aprender todo lo que siempre quiso saber sobre su favicon de WordPress?

Si no está familiarizado, el favicon de su sitio es ese pequeño icono que aparece en la pestaña de su navegador web. Por ejemplo, así es como se ve nuestro favicon en HeroThemes:

También verá que algunas personas llaman a los favicons un "icono de sitio". No te preocupes, son lo mismo.

En este post, vas a aprender:

• Por qué debería preocuparse por algo pequeño como su favicon de WordPress
• Cómo crear un favicon para su sitio de WordPress (y qué tamaño y formato usar)
• Cómo agregar un favicon a WordPress usando tres métodos diferentes

Por qué debería preocuparse por su Favicon de WordPress

Sé que sé. Una pequeña imagen que solo aparece en la pestaña del navegador probablemente no va a hacer o deshacer su negocio. Pero hay dos razones por las que debería tomarse un tiempo para crear un favicon para WordPress.

Primero, usar un favicon ayuda con la marca y hace que su sitio se destaque en los navegadores de sus visitantes. Por ejemplo, ¿qué pestañas llaman su atención en la captura de pantalla a continuación?

Es HeroThemes y Twitter, ¿verdad?

Esto es importante porque a la gente le encanta tener varias pestañas abiertas ( no, ¡no eres el único que acumula pestañas! ). Incluso en 2009, las personas promediaban más de 3 pestañas, y más entre los jóvenes. Y aunque no puedo encontrar datos más recientes, ¡apuesto a que el promedio ha subido, no bajado!

Más allá de marcar su sitio en los navegadores y hacer que se destaque, su favicon también ayuda a los usuarios móviles. Si un usuario alguna vez guarda su sitio web en su pantalla de inicio, su favicon aparecerá como el ícono en muchos dispositivos .

Cuando considera lo fácil que es agregar un favicon de WordPress, esos beneficios definitivamente valen la pena tomarse unos minutos de su 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 paso a paso en las siguientes secciones sobre cómo agregar un favicon a WordPress, deberá... ¡ realmente tener la imagen que desea usar para su favicon!

Y eso significa que necesita conocer las dimensiones y el formato de imagen correctos para su favicon.

Con la variedad de dispositivos, esto se ha vuelto más complicado de lo que era antes. Pero para abordar esa complejidad, también hay algunas herramientas que tomarán un favicon de inicio y lo formatearán automáticamente para todos los diferentes dispositivos.

Entonces, para crear su favicon, esto es todo lo que necesita:

• Una imagen cuadrada. El tamaño óptimo del favicon de WordPress es 512 × 512 px, aunque todavía es aceptable algo más pequeño como 260 × 260 px. Todos los métodos que le mostraré lo redimensionarán según sea necesario .
• Una imagen png , que es su mejor apuesta para la web moderna.

Para crear realmente su imagen, puede usar una herramienta como Adobe Photoshop o GIMP. O bien, también puede usar algo como Favicon.io para generar una imagen de favicon a partir de texto o un emoji.

Si tiene un logotipo de alta resolución por ahí, lo más fácil es tomar una versión cuadrada de su logotipo ( eso es lo que usamos en HeroThemes ).

Cómo agregar un Favicon a WordPress (3 métodos)

Una vez que tenga su archivo de imagen, estará listo para agregar ese favicon a su sitio de WordPress.

A continuación, le mostraré tres formas diferentes en las que puede agregar su favicon a WordPress. Sin embargo, cada método es un poco diferente .

Para ayudarlo a elegir el adecuado para su sitio, aquí hay un resumen rápido:

• Agregue favicon con la funcionalidad principal de WordPress : esto es súper simple y le permite agregar su favicon a través del Personalizador de WordPress. El único inconveniente es que no agregará formatos de favicon para todos los dispositivos. Sin embargo, para la mayoría de los sitios, esto está totalmente bien .
• Complemento de WordPress RealFaviconGenerator : esto hace que sea muy fácil agregar un favicon para todos los dispositivos . El único inconveniente potencial es que requiere que mantenga activo el complemento, lo que a algunas personas podría no gustarles.
• Método manual de RealFaviconGenerator : en lugar de usar el complemento, puede usar el sitio web de RealFaviconGenerator y agregar el código manualmente. Este método elimina la necesidad de mantener un complemento activo, pero se vuelve un poco más complicado porque deberá agregar un fragmento de código al encabezado de su tema.

Si eres un principiante, te recomiendo que te quedes con uno de los dos primeros métodos. Pero los usuarios avanzados pueden preferir el tercer método.

Cómo agregar un Favicon a WordPress con la funcionalidad principal

Este es realmente simple porque utiliza una función central de WordPress.

Para comenzar, vaya a Apariencia → Personalizar en su panel de control de WordPress para acceder al Personalizador de WordPress:

Una vez que esté en el Personalizador de WordPress, haga clic en la opción Identidad del sitio :

Luego, busque la sección Ícono del sitio y haga clic en Seleccionar imagen para cargar su imagen de favicon:

Eso abrirá la biblioteca de medios de WordPress normal donde puede cargar su imagen como lo haría normalmente.

Una vez que haya cargado su imagen, haga clic en el botón Seleccionar :

A partir de ahí, WordPress le dará la opción de recortar su imagen de favicon, así como vistas previas en vivo de su imagen como navegador y aplicación.

Ajuste al recorte adecuado y luego haga clic en Recortar imagen :

¡Y tu estas listo! Asegúrese de hacer clic en la opción Publicar en la parte superior del Personalizador de WordPress y su favicon debería estar activo.

Cómo usar un complemento de Favicon de WordPress (cubre más dispositivos)

Ahora, te mostraré cómo usar un complemento de favicon de WordPress para lograr el mismo efecto.

Nuevamente, la diferencia entre este método y el anterior es que el complemento agregará favicons optimizados para más dispositivos. También le brinda una interfaz que le permite personalizar cómo se ve su favicon para diferentes dispositivos.

Podrás crear favicons personalizados para:

• iOS
• Androide
• Telefono windows
• etc

No necesariamente necesita esto , se trata más de cubrir casos extremos.

Para seguir este método, deberá instalar el complemento gratuito Favicon by RealFaviconGenerator.

Una vez que active el complemento, vaya a Apariencia → Favicon . Use el botón Seleccionar de la biblioteca de medios para cargar o seleccionar su favicon de la biblioteca de medios de WordPress.

Luego, haz clic en Generar favicon :

Después de eso, el complemento lo llevará a un sitio externo donde puede modificar cómo se ve su favicon para diferentes dispositivos.

Una vez que haya terminado de hacer esos ajustes, desplácese hacia abajo y haga clic en el botón Generar sus Favicons y código HTML :

Y una vez que haga clic en eso, volverá a su panel de control de WordPress y debería ver un mensaje de éxito, así como una vista previa de su favicon en diferentes dispositivos:

¡Eso es! Estás listo. Solo asegúrese de mantener el complemento activo; de lo contrario, sus favicons desaparecerán.

Cómo agregar un Favicon a WordPress manualmente usando la misma herramienta RealFaviconGenerator

Nuevamente, con el método de complemento anterior, deberá dejar el complemento activo para seguir usando sus favicons.

Si eso es un problema para usted, también 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 de FTP y agregar un código a la sección <head> de su sitio.

Dividiré esto en pasos porque es un poco más complicado...

Paso 1: Genere su paquete de Favicon

Para comenzar, diríjase al sitio web de RealFaviconGenerator y haga clic en Seleccione su imagen de favicon para cargar su imagen de favicon:

Una vez que cargue su imagen, verá la misma interfaz del complemento y podrá revisar y personalizar su favicon para diferentes dispositivos.

Al igual que con el complemento, desplácese hacia abajo y haga clic en el botón Generar sus Favicons y código HTML cuando haya terminado de hacer sus ajustes:

Paso 2: Cargue su paquete de Favicon en su sitio web

En la siguiente pantalla, haga clic en el botón para descargar su paquete de Favicon :

Luego, deberá extraer este paquete y cargarlo en la carpeta raíz de su sitio usando FTP ( si no está seguro de qué es FTP, le recomiendo que siga con el método de complemento de la sección anterior ).

Asegúrese de colocar todos los archivos en la carpeta raíz; de lo contrario, esto no funcionará.

Paso 3: agregue un fragmento de código a <head> de su tema

Para finalizar, deberá agregar el fragmento de código de RealFaviconGenerator a la sección <head> de su tema de WordPress:

O bien, puede agregar el siguiente fragmento de código al archivo functions.php en su tema secundario ( necesita usar un tema secundario ):

/* Adds the favicon code snippet from RealFaviconGenerator */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
REPLACE THIS LINE OF TEXT WITH FAVICON CODE
<?php
};

¡Cualquier método está bien!

Una vez que hagas eso, habrás terminado y tu favicon debería comenzar a funcionar.

Agregue su Favicon de WordPress hoy

Solo toma unos minutos agregar su favicon y brindar a sus visitantes una experiencia más personalizada.

Y aquí está lo bueno:

Una vez que agregue un favicon a su sitio de WordPress, ¡nunca tendrá que volver a pensar en eso!

¿Tiene alguna otra pregunta sobre cómo agregar un favicon de WordPress? ¡Háznoslo saber en los comentarios y te ayudaremos!