Cómo Añadir un WordPress Favicon (3 Opciones Fáciles)

Actualizado October 10, 2017

Favicons (íconos de favoritos) son más comúnmente conocidos como el pequeño icono que aparece junto al nombre del sitio web en una pestaña del explorador. Y mientras que ahí es donde se originaron, favicons son utilizados también en otros lugares como marcadores del explorador, los botones de la pantalla de inicio de iOS, y más. A continuación, puede ver un ejemplo de un sitio con un WordPress favicon vs. un sitio sin favicon:

Un ejemplo de un WordPress favicon

Un ejemplo de un WordPress favicon

En este artículo, le daremos tres formas diferentes para agregar un favicon a su sitio WordPress. Si ya conoce qué método prefiere, puede utilizar los enlaces de abajo para ir directamente a la sección específica:

Cómo Agregar Un WordPress Favicon al Sitio Vía Personalizador de WordPress

A partir de WordPress 4.3, todos los sitios WordPress incluyen una característica de icono de sitio web que facilita la carga y recortar una imagen para usar como favicon.

Para la mayoría de los usuarios, este es el método más simple para agregar un icono de favicon para WordPress. Todo lo que necesita es una imagen que sea de al menos 512×512 píxeles. WordPress se encargará del resto del proceso.

Para empezar, vaya a Apariencia → Personalizador en su Tablero de Mando WordPress:

Cómo acceder al Personalizador de WordPress

Cómo acceder al Personalizador de WordPress

Desde allí, vaya a la ficha de Identidad del Sitio:

Cómo encontrar la Ficha de Identidad del Sitio

Cómo encontrar la Ficha de Identidad del Sitio

A continuación, mire en la parte inferior de la Sección de Iconos Del Sitio y haga clic en el botón Seleccionar Imagen:

Elegir una imagen para su favicon

Elegir una imagen para su favicon

La interfaz normal de biblioteca de medios de WordPress se abrirá. Puede elegir una imagen existente en su biblioteca multimedia de WordPress o cargar una nueva. Recuerde – WordPress recomienda el uso de una imagen que sea, al menos, 512x512px.

Una vez que usted tenga una imagen que le guste, haga clic en la imagen y elija Seleccionar en la esquina inferior derecha:

Seleccionando su imagen de favicon

Seleccionando su imagen de favicon

Si la imagen aún no es un cuadrado perfecto (p. ej. 512×512 px), WordPress le dará una oportunidad para recortar la imagen en la siguiente pantalla. Utilice el recuadro para resaltar la parte de la imagen que desea utilizar para el icono.

Puede ver una vista previa de cómo lucirá la imagen recortada en la parte derecha de la interfaz.

Una vez esté satisfecho con la apariencia, haga clic en Recortar la Imagen para finalizar su elección:

Recortando su imagen favicon

Recortando su imagen favicon

¡Y eso es todo! Todo lo que necesita es hacer clic en Guardar y Publicar para poner su favicon en vivo.

Si alguna vez quiere cambiar su favicon en el futuro, puede volver a esta interfaz y hacer clic en Cambiar Imagen:

Cómo cambiar la imagen favicon en una fecha posterior

Cómo cambiar la imagen favicon en una fecha posterior

Cómo Agregar WordPress Favicon al Sitio con un Plugin

Si prefiere la solución de un plugin de funcionalidad de icono del sitio WordPress, puede utilizar un plugin popular gratuito llamado Favicon by RealFaviconGenerator. El plugin es tan sencillo de utilizar como el Personalizador de WordPress nativo pero ofrece opciones de compatibilidad adicionales útiles para diversos dispositivos e iconos de app.

Para usarlo, instale y active el plugin gratuito vía tablero de mando de WordPress:

Cómo instalar el plugin RealFaviconGenerator

Cómo instalar el plugin RealFaviconGenerator

Una vez que active el plugin, vaya a Apariencia → Favicon para crear el favicon.

Todo lo que necesita hacer es seleccionar o cargar una imagen de al menos 70×70 px (idealmente 260×260 px):

Cómo agregar favicon a WordPress

Cómo agregar favicon a WordPress

Una vez que seleccione la imagen, haga clic en Generar favicon. Después de hacer clic en ese botón, el plugin le llevará fuera del sitio de WordPress para el sitio web RealFaviconGenerator.

En el sitio web RealFaviconGenerator, desplácese hasta la parte inferior y haga clic en Generar sus Favicons y código HTML:

Genere sus favicons

Genere sus favicons

Después de un corto período de tiempo, mientras funciona la herramienta, Real favicon Generator le enviará de vuelta a su tablero de mando de WordPress. Su favicon ya está configurado y listo para usar. Puede ver las previsualizaciones de cómo se ve en diferentes dispositivos en la interfaz del plugin:

Vista previa en vivo de su favicon

Vista previa en vivo de su favicon

Cómo Añadir WordPress Favicon al Sitio Manualmente

Si usted prefiere hacer las cosas de forma manual, también es posible agregar manualmente un favicon para su sitio WordPress vía FTP y algunos pequeños fragmentos de código. Si escoge este método, también tendrá que crear su propia imagen de favicon porque no tendrá más la ayuda de WordPress.

Cómo Crear una Imagen de Favicon

En el pasado, había que utilizar un determinado archivo ICO para su favicon. Pero, hoy día todos los navegadores modernos admiten el uso de archivos ICO, PNG, y GIF para su favicon. JPEG es ampliamente admitido, pero no en todas las versiones de Internet Explorer, que hace menos ideal para usar como favicon.

Si está familiarizado con Photoshop, puede utilizar Photoshop para crear manualmente un favicon. Dicho esto, a menudo es más fácil usar sólo una herramienta basada en cloud básica para crear su conjunto de iconos de favicon de una imagen existente.

Real Favicon Generator (la versión basada en la nube del plugin utilizado en la sección anterior) es una gran opción porque:

  • Crea iconos de App así como favicons
  • Le da iconos de favicon en ambos formatos PNG e ICO
  • Puede personalizar su favicon después de cargar su imagen
  • Todo lo que necesita hacer es pegar el código que el plugin le da

Otros buenos generadores de favicon son:

  • Favicon.cc– permite crear un favicon desde cero, así como cargar una imagen existente
  • Favicon-Generator – funciona de forma similar al Real Favicon Generador

Para usar Real Favicon Generator, empiece a subir la imagen que desea utilizar para el favicon:

Cómo cargar la fuente de imagen del favicon

Cómo cargar la fuente de imagen del favicon

En la siguiente pantalla, puede configurar los detalles específicos acerca de su favicon (si se desea).

Cuando haya terminado, o si no desea realizar ningún cambio, simplemente desplácese hacia abajo y haga clic en Generar sus Favicons y código HTML:

Generar sus favicons

Generar sus favicons

Cómo Instalar su WordPress Favicon

En la siguiente página, haga clic en el botón Paquete Favicon para descargar sus imágenes favoritas. Asimismo, asegúrese de dejar esta página abierta porque necesitará el código para agregar sus favicons:

Descargar paquete favicon

Descargar paquete favicon

Conéctese a su sitio WordPress vía FTP y cargue el contenido de su paquete de Favicon (favicons.zip) a la carpeta raíz de su sitio WordPress:

Cargar el favicon vía FTP

Cargar el favicon vía FTP

Los archivos deben estar en la misma carpeta que sus carpetas wp-admin y wp-content.

Luego, tome el código que Real Favicon Generator le ha proporcionado y:

  • Utilice un plugin como Insert Headers and Footers para agregarlo al encabezado de su tema
  • Péguelo directamente en la sección <head> de su tema editando el tema del archivo header.php

Usar el plugin Insert Headers and Footers es óptimo porque asegura que no se pierda su favicon si cambia de temas de WordPress en el camino.

Para ello, instale y active Insert Headers and Footers. Después, vaya a la sección Ajustes → Insert Headers and Footers y pegue el código en Scripts en la sección de Encabezado:

Agregar el código favicon al encabezado de WordPress

Agregar el código favicon al encabezado de WordPress

Asegúrese de Guardar sus cambios y ya está todo listo.

Sugerencia 1: WordPress Favicons de Multisitio Únicos

Si desea que cada sitio en su red multisitio tenga un favicon único, la manera más fácil es usar un plugin de favicon como los plugins presentados anteriormente. También puede utilizar el plugin Heroic Favicon Generator, mientras hace un pequeño ajuste manual a su código.

Aunque es posible editar sus archivos de tema para permitir favicons únicos para cada uno de los sitios web de la red, el proceso es bastante más complicado que usar un plugin.

Sugerencia 2: Utilice una Red de Entrega de Contenido para Servir Imágenes Favicon

Debido a los tres métodos descritos anteriormente almacenan imágenes favicon en su servidor, puede optimizar su sitio aún más mediante la utilización de una red de entrega de contenido (CDN) para servir a sus imágenes.

Al instalar Cloudflare o un servicio como KeyCDN, podrá tener a sus visitantes cargando el favicon de su CDN en lugar del servidor. Si está utilizando un plugin como CDN Enabler, debe reescribir automáticamente la URL de su WordPress favicon para trabajar con los métodos anteriores.

Artículos Relacionados

¿Le resultó útil este artículo?
No, o no fue completo

Artículos relacionados

kinsta newsletter

¿Utilizas WordPress?

¡Únete a más de 20.000 lectores que ya reciben nuestro newsletter semanal GRATUITO con consejos de WordPress sobre cómo generar más tráfico e ingresos para tu negocio!

Consent

You have Successfully Subscribed!

Send this to a friend