Cómo agregar un Favicon a su sitio web de WordPress de 3 maneras

Cada sitio web debe tener un favicon. Aunque pequeños en tamaño, los navegadores web utilizan favicons (o íconos de sitios) para representar su sitio (o marca) de una manera poderosa. Los Favicons no solo se usan para mostrar una imagen pequeña en la pestaña de su navegador, también se pueden usar para marcadores y mosaicos de ventanas. WordPress facilita agregar un favicon a su sitio directamente desde el personalizador. Y esta es ahora la forma recomendada de hacerlo. Pero hay algunas otras formas que también pueden satisfacer sus necesidades.

Entendiendo los Favicons en WordPress

¿Qué es un favicon?

Un Favicon (término para «icono favorito») es un pequeño icono utilizado por los navegadores web para agregar un elemento de marca adicional para que los usuarios reconozcan su sitio web/empresa. Si un favicon está instalado correctamente en su sitio, los navegadores lo usarán en diferentes ubicaciones según sea necesario. Estas ubicaciones incluyen pestañas de navegadores (junto al título de la página), barras de direcciones (junto a la URL), marcadores y otros.

En WordPress, los favicons se denominan «Iconos del sitio», que es una descripción útil que informa a los usuarios que este ícono se usará para representar su sitio en varias instancias.

Importancia de los Favicons

Los Favicons (o iconos del sitio) son similares al logotipo de una empresa en el sentido de que pueden desempeñar un papel pequeño, pero crucial, en la marca de su sitio web. Un sitio web que carece de un favicon podría parecer menos creíble para los usuarios (ya que todos estamos acostumbrados a verlos). Por otro lado, un sitio web que tiene un favicon le dará al usuario la imagen fuerte que necesita y mejorará la experiencia del usuario. Piénsalo. Es mucho más fácil encontrar un marcador con un icono al lado que leer el texto.

Formatos de archivo)

Hay algunos formatos de imagen aceptables disponibles para favicons, pero los dos más populares son ico y png. Estos formatos tienen la mayor compatibilidad con el navegador y admiten fondos transparentes para su favicon (a diferencia de jpg).

Formato ICO

Tradicionalmente, los favicons se crean como un archivo ICO (favicon.ico). Un archivo ICO le permite almacenar varias imágenes con diferentes tamaños en un solo archivo, lo que permite que el navegador (de escritorio y móvil) elija el tamaño necesario de las imágenes disponibles. El problema con el formato ico es que no mucha gente sabe qué es o cómo crear uno. Puede crear archivos ICO en un editor de fotos como Gimp, pero parece más conveniente usar un generador de favicons en línea que hace que el proceso sea realmente fácil, especialmente para generar favicons con fondos transparentes.

Afortunadamente, con el lanzamiento de WordPress 4.3 , no tenemos que preocuparnos por crear un favicon en formato ico para agregar uno a su sitio. El personalizador tiene una opción de icono de sitio que acepta formatos más populares como png, gif y jpeg. Más sobre esto más adelante.

Nota: vale la pena mencionar que algunos navegadores antiguos solo admiten el formato ico y nada más, y pueden ser una alternativa necesaria para las versiones antiguas de los navegadores. Entonces, si está buscando tener lo mejor de ambos mundos (es decir, PNG e ICO), es posible que deba buscar un complemento o agregarlo manualmente.

Formato PNG

Desde HTML5, el formato PNG es un formato aceptable para sus favicons y todos los principales navegadores los admiten ahora. Podría decirse que esta es la mejor opción en el futuro, ya que el png es más consistente debido a su uso generalizado en toda la web. Sin embargo, dado que todos los navegadores (incluso los antiguos) son compatibles con ICO, puede ser mejor usar las versiones png e ico para evitar errores 404 no deseados .

Tamaño

Su sitio necesita varios tamaños de imagen de favicon disponibles para mostrarlos de manera óptima en todos los casos de uso (es por eso que los favicons comenzaron en formato ico). No entraré en todos los diferentes tamaños aquí, pero los 4 tamaños más comunes que se necesitan se generan automáticamente cada vez que agrega un ícono de sitio desde el personalizador de WordPress, por lo que no hay necesidad de estresarse.

Sin embargo, deberá asegurarse de que la imagen que cargue en el personalizador tenga al menos 512 x 512. WordPress creará los otros tamaños a partir de ese archivo original de la siguiente manera:

icono de favoritos de 32×32 píxeles.

Ícono de aplicación de 180x180px para iOS hasta iPhone 6+.


192x192px Ícono de la aplicación Android/Chrome.


Mosaico de tamaño mediano de 270x270px para Windows.

Nombramiento y ubicación

Puede recordar los días en que el favicon tenía que tener el nombre de archivo exacto «favicon.ico». Luego lo agregaría a su directorio raíz y eso era básicamente todo. Los tiempos han cambiado y, afortunadamente, WordPress también lo ha hecho. Ahora puede nombrar su archivo como quiera, guardarlo en otros formatos y almacenarlo en cualquier parte de su sitio. Si está utilizando el Personalizador de WordPress para agregar su ícono de sitio (favicon), WordPress creará múltiples imágenes y las almacenará en su carpeta de medios.

Nota: Colocar un Favicon.ico en el directorio raíz sigue siendo una buena idea como alternativa, pero tenga cuidado de usar el método correcto u obtenga ayuda de un complemento.

Creando tu Favicon

Un favicon es una imagen, por lo que diseñar su propio favicon no será diferente a diseñar su propio logotipo. Puedes usar un editor de fotos como Gimp o Photoshop . Solo recuerde diseñar su favicon como un cuadrado perfecto (es decir, 512 × 512 para el ícono de su sitio de WordPress). Si desea un fondo transparente, guarde su archivo como png (o gif). Después de eso, puede cargar su imagen en WordPress como el ícono de nuestro sitio (más sobre esto más adelante). Si desea convertir su png a formato ico, le sugiero que use un convertidor de archivos en línea como Convertico .

Sugerencia: a veces puede crear su favicon recortando una parte cuadrada de su logotipo. Esta podría ser una buena idea si está buscando simplificar el proceso. Solo recuerda que este ícono representará tu marca, así que no te descuides.

Cómo agregar un Favicon a su sitio web de WordPress de 3 maneras

Suscríbete a nuestro canal de Youtube

#1 Agregar un Favicon con el Personalizador de WordPress

Para la mayoría, este es el único método que debe considerar para WordPress. Todo lo que necesita es un archivo de imagen (png, gif, jpeg) y WordPress hará el resto.

Desde Wordrpess 4.3, puede agregar un favicon (o ícono del sitio) a su sitio de WordPress fácilmente dentro del Personalizador. Desde el tablero de WordPress, navegue hasta Apariencia > Personalizar.

A continuación, seleccione Identidad del sitio y encontrará una opción para configurar el icono de su sitio (el icono del sitio es solo otro término para Favicon). Luego puede seleccionar su imagen de la biblioteca de medios o cargar una nueva. Asegúrese de que su archivo tenga al menos 512 x 512 para garantizar la mejor calidad de representación de su imagen para todos los casos de uso.

Una vez que seleccione la imagen que desea, se le pedirá que recorte su imagen para que se muestre correctamente en su navegador. Esto es útil si está cargando una imagen que aún no es perfectamente cuadrada.

¡Eso es todo! WordPress hará el resto. Una vez que se haya recortado la imagen, WordPress generará los tamaños de imagen necesarios para todos los casos de uso de favicon:

32 px para el ícono de favoritos del navegador

180 px para el ícono de la aplicación IOS


192 px para el ícono de la aplicación Chrome


270 px para el mosaico de Windows

Incluso genera una vista previa útil de cómo se verá el ícono.

Publique sus cambios y actualice su página para ver su favicon aparecer mágicamente en su navegador. Si no puede verlo de inmediato, es posible que deba borrar el caché del sitio o abrir su sitio en una ventana de incógnito/navegador privado para verlo.

#2 Agregar un Favicon usando un complemento

Si desea la ayuda de un complemento para agregar un favicon a su sitio de WordPress, está de suerte. Una simple búsqueda en el repositorio de WordPress le dará excelentes complementos gratuitos para elegir. Personalmente, no buscaría más que Favicon de RealFaviconGenerator . Este complemento se asegurará de que su favicon sea compatible con todos los navegadores al colocar múltiples imágenes en todos los lugares correctos. Incluso te permite personalizar el diseño de cada imagen, lo cual no es fácil de hacer por tu cuenta.

Para agregar un favicon usando el complemento, instálelo y navegue hasta Apariencia > Favicon. Luego sube tu imagen. Asegúrate de que sea perfectamente cuadrado y de al menos 260 x 260.

El complemento lo redirigirá al generador en línea para completar la personalización de su favicon para IOS, Android (Chrome), Windows y macOS (Safari). En solo unos minutos, puede agregar los colores de su marca para que esos íconos se vean geniales en todos los casos. Cuando haya terminado, haga clic en el botón Generar sus Favicons y código HTML en la parte inferior de la página.

Como está utilizando un complemento, no tendrá que preocuparse por ningún código. Se le redirigirá a su sitio y se le dará la bienvenida con una buena vista previa de las pantallas de su icono.

¡Eso es todo!

#3 Agregar un Favicon manualmente (WordPress 4.2 y versiones anteriores)

En versiones anteriores de WordPress (antes de las actualizaciones del Personalizador), puede agregar un favicon a su sitio en dos pasos. Asegúrese de estar utilizando un tema secundario para modificar los archivos de su sitio.

Primero, debe cargar su archivo favicon.ico en su sitio web (deberá usar un cliente FTP como FileZilla si no es una instalación local). Una vez que acceda a los archivos de su sitio, cargue el favicon en su directorio raíz. También puede optar por agregar el favicon a la carpeta de temas de su hijo.

Hay diferentes opiniones sobre si debe agregar el favicon al directorio raíz, la carpeta del tema o ambos. Por ejemplo, algunos sugieren mantener un favicon en el directorio raíz para que se muestre en los lectores de noticias. Entonces, para estar seguro, siempre mantenga uno en el directorio raíz. Dondequiera que elija colocarlo, asegúrese de vincular a la ubicación del archivo en su encabezado. No lo deje caer en su carpeta, confíe en que todos los navegadores lo encontrarán automáticamente. Es posible que algunos navegadores antiguos no.

La vinculación a su favicon requiere el uso de una etiqueta de enlace html en el archivo de encabezado de su tema (o tema secundario) (header.php) dentro de la etiqueta principal. Aquí hay dos ejemplos.

Para vincular al favicon (en formato ICO) dentro de la raíz de su carpeta de tema (o tema secundario), puede agregar el siguiente código dentro de la etiqueta principal.

01
<link rel="icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Para colocar el archivo favicon.ico en la raíz de la carpeta de su tema (por ejemplo, www.yourwebsite.com/wp-content/themes/twentyfourteen/favicon.ico), usaría:

Para colocar el favicon.ico en su directorio raíz principal, use lo siguiente:

01
<link rel="icon" type="image/x-icon" href="http://www.yourdomain.com/favicon.ico">

No sé ustedes, pero yo estoy muy agradecido por WordPress 4.3.

Agregar un Favicon usando las opciones del tema

En general, sigue siendo una buena práctica utilizar la función Icono del sitio en el Personalizador de WordPress, si está disponible, ya que se creó específicamente para WordPress. Pero, algunos temas de WordPress (especialmente los más antiguos) incluyen una opción para cargar un favicon directamente desde la configuración del tema. Tenga cuidado al usar esta opción de tema personalizado porque puede usar un método obsoleto y solo generar una imagen para usar en varias instancias.

Conclusiones principales

Si necesita un pequeño resumen, aquí hay algunos puntos importantes sobre cómo agregar favicons a su sitio de WordPress:

  1. Debe agregar su favicon con el personalizador de WordPress si está disponible.
  2. Si desea asegurarse de que la ubicación de su favicon esté donde debe estar y tener un poco más de control sobre cómo se verá su favicon caso por caso, use un complemento como el complemento realfavicongenerator.
  3. Si por alguna razón se encuentra atrapado en la era oscura de WordPress o necesita adoptar un enfoque manual, asegúrese de utilizar los métodos correctos.
  4. Evite usar opciones de temas integradas (aparte del personalizador de WordPress) para agregar su favicon a menos que tenga una buena razón para hacerlo.

Espero que esto ayude a aclarar algunas cosas sobre los favicons (íconos del sitio) y te tranquilice sobre cómo WordPress maneja tu favicon. Y espero escuchar cualquier pregunta o idea que pueda tener sobre el asunto en los comentarios a continuación.

¡Salud!