blog webempresa

Cómo añadir el favicon en WordPress

por | Ene 26, 2023 | Aprender WordPress

Cómo añadir el favicon en WordPress

Si estás aquí es porque conoces lo qué es un favicon, y necesitas saber cómo crear y añadir el favicon en WordPress para que sea visible en la pestaña del navegador de la página de tu sitio.

No es 100% indispensable, ¡el mundo continuará girando! … quizás más lentamente je, je, je, pero tu web funcionará de igual forma, eso si menos bonita y los visitantes verán un círculo gris, o quizás simplemente el icono de WordPress, algo muy común en millones de sitios web que no personalizan este aspecto de la web ¡los detalles cuentan!

El favicon no solo representa el sitio abierto en la pestaña correspondiente, sino que además es una oportunidad más de mostrar el logo de tu empresa o marca y que no pase desapercibido a los visitantes de tu sitio, que en los tiempos que corren sufren de «tab-mania» 😅 lo que les lleva a tener docenas de pestañas abiertas, motivo por el que también es importante que tu favicon destaque. WordPress

favicon en la pestaña del navegador

Estas imágenes tienen por lo general tamaños definidos en píxeles y su formato habitual suele ser .ico, o sea, favicon.ico.

     El formato de archivo ico contiene uno o varios de los tamaños del favicon representado, dentro del mismo archivo.

Los tamaños del favicon de WordPress varían dependiendo de donde se representen, aunque todos parten del estándar de 16×16 píxeles para el navegador de escritorio.

   Cómo añadir un favicon en WordPress manualmente

 

Si ya tienes tu logo diseñado y además lo tienes en versión transparente, en formato PGN, ¡perfecto!, es justo el formato ideal para añadir un favicon en WordPress que luego se muestre en la pestaña del navegador sin el «feo» recuadro blanco alrededor del icono.

Hay sitios online que te permiten crear tu favicon para WordPress a partir de una imagen que subas, también una pequeña foto o avatar ¡quién dijo que no hay que atreverse! y aquí te cito algunos conocidos:

Hay más, pero creo que con estos ya te haces una idea. Ahora es cuestión de que escojas uno, subas tu imagen y generes la miniatura de la misma para exportarla en el formato adecuado para subirlo luego a tu web.

Generador de favicon online

Este tipo de generadores suelen facilitarte el código de los tamaños representables del icono en diferentes navegadores o dispositivos, para que lo añadas en tu Tema de WordPress, entre las etiquetas … y la de cierre, allí donde corresponda:



<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">


Aunque lo ideal es que lo hagas desde el Personalizador de WordPress, en el dashboard.

¿Utilizas WordPress 6 o versiones superiores y no encuentras el Personalizador del Tema? no te preocupes, te explico a continuación cómo hacerlo visible para luego poder añadir tu favicon en la web.

  Activar el Personalizador de Temas en WordPress 6.x

 

A partir de WordPress 6.0, liberado en septiembre de 2022, se eliminó el Personalizador de los menús de WordPress y usuarios que a partir de esta versión instalan este CMS y consultan tutoriales escritos tiempo atrás de este cambio se encuentran que Personalizar no aparece en Apariencia y en ninguna otra parte.

Lejos de convertirse en un problema esto, hay una forma de solucionarlo que puedes aplicar en tu sitio web, previa copia de seguridad, para recuperar ese elemento del núcleo de WordPress y poder luego utilizarlo para las necesidades de la web.

A partir de la versión 6 de WordPress el Personalizador desaparece de Apariencia

Una forma sencilla de recuperar esta funcionalidad en la versión estable de WordPress 6.x es siguiendo estos pasos:

  1. Haz una copia de seguridad de tu web, ¡por si acaso!
  2. Ve a Apariencia ➜ Temas.
  3. Haz clic en Añadir nuevo.
  4. Busca un Tema que no tengas instalado desde el buscador Buscar temas…
  5. Por ejemplo Neve y haz clic en Instalar.
  6. Activa el Tema instalado para que sea por un momento el que figure en tu web.
  7. Ve a Apariencia y comprueba si ahora aparece Personalizar (1).

(1) además de Personalizar te aparecerán de nuevo otros ítems de menú como Widgets o Menús que también han desaparecido en las últimas versiones estables de WordPress y ahora se gestionan con el editor de bloques Gutenberg.

Si vas a Personalizar podrás añadir el favicon que hayas creado para tu sitio web, que puede ser una versión miniatura de tu logo, de manera que lo incorpores al sitio y se muestre en la pestaña del navegador.

Añadir el favicón desde la opción Personalizar del Tema

En la siguiente animación te ilustro todo el proceso de cambio temporal del Tema, como subir luego el favicon y finalmente cómo activar de nuevo el tema anterior y comprobar que el favicon persiste y no se elimina con el cambio.

Cambiar el Tema para disponer de la opción de menú Personalizar y añadir el favicon en la web

Claro que este hack que se aplica con el cambio de Tema del sitio web es un cambio temporal de Tema porque probablemente ya tienes tu propio Tema en tu web instalado y configurado y no quieres a estas alturas cambiarlo ¡lógico!

No te preocupes, una vez añades el favicon en WordPress puedes volver a Activar tu Tema, el que tenías antes del cambio, y verás que tu web vuelve a estar como antes, pero el favicon se mantiene, no desaparece, que es justamente lo que se busca con este pequeño cambio temporal, que puedas añadir fácilmente el favicon en WordPress 6.x sin volverte loc@ buscando donde han puesto ahora las opciones de personalizar del tema.

Sería conveniente que si tu web tiene bastante tráfico, este tipo de ajustes o pequeños cambios los hagas en franjas de horario en las que sepas que hay poco tráfico de visitas (mira tu Analytics para saber que horas tienes poco tráfico web), de manera que tus visitantes no perciban este cambio puntual. Así podrás añadir tu favicon sin que tu web se vea afectada y sin que esta sencilla acción de poner un icono en la pestaña del navegador para identificar tu web se convierta en un galimatías.

  Cómo añadir un favicon en WordPress con un plugin

 

El proceso usando un plugin suele ser bastante sencillo, ya que la mayoría se basan en la carga de una imagen en un formato soportado (png, jpg, etc.) que luego el plugin convierte al tamaño y paleta de color soportada para el favicon y lo muestra en el sitio correspondiente sin tener que editar archivos desde el “Administrador de Archivos” de tu Hosting o piruetas complejas.

Para este ejemplo se hace uso del plugin All In One Favicon con el que podrás presentar también el favicon en formato .png o .gif tanto para la administración como el frontend del sitio web.

Se trata de un plugin que te va a servir para añadir un favicon a tu sitio web de manera fácil y sencilla.

Algunas de las características son:

  • Compatibilidad con todos los navegadores habituales, incluidos Internet Explorer, Firefox, Chrome y Safari.
  • Posibilidad de subir diferentes tamaños de favicon, para que se adapten a los diferentes dispositivos.
  • También puedes subir un favicon para la versión móvil del sitio web.
  • Se integra bien con el editor de temas de WordPress para personalizar el favicon desde allí.
  • Permite añadir un favicon para el administrador del sitio web.
  • Opción para mostrar el favicon en el navegador en «modo incógnito».
  • Adicionalmente puedes subir un favicon para dispositivos de Apple (iPhone e iPad).
  • Es compatible con multisitios (red de sitios).

Hay otros plugins que también sirven para realizar el cambio o añadido del favicon en tu sitio web y que puedes encontrar en el directorio de plugins oficial.

  Instalación y configuración del plugin All In One Favicon

 

Para añadir un favicon en WordPress con la ayuda de un plugin, ve al panel de administración de WordPress, Plugins ➜ Añadir nuevo y busca el plugin All In One Favicon.

Plugin All In One Favicon

Haz clic en la imagen para acceder al plugin en WordPress.org

En los parámetros del plugin puedes elegir el formato del favicon (.png, .jpg, .gif). Para el caso del formato .ico tienes unos enlaces de interés para poderlo crear (consulta el punto 2 de este artículo para ver qué sitios puedes usar para crear tu favicon) y en los demás formatos bastaría simplemente con subir la imagen.

Parámetros del plugin

Ciertamente es un proceso muy sencillo, aunque si puedes evitar usar un plugin para tan simple tarea ¡mejor!, tu WordPress te lo agradecerá. 🤗

  Vídeo de cómo añadir favicon en WordPress

 

En el siguiente video te muestro cómo generar tu favicon a partir de tu propio logo del sitio web y cómo añadir tu favicon a WordPress desde el Personalizador de WordPress.

 

 

Este procedimiento puede variar dependiendo del Tema (plantilla) que utilices en tu sitio web y de si trabajas con el editor de bloques Gutenberg.

  ¿Qué implicaciones tiene el favicon en el SEO de tu web?

 

El favicon no tiene un impacto directo en el SEO de tu sitio web, ya que no es un factor de clasificación utilizado por los motores de búsqueda. Sin embargo, puede tener ciertas implicaciones indirectas en el SEO.

Algunas de estas implicaciones son:

  • Un favicon reconocible y atractivo puede ayudar a los usuarios a identificar rápidamente tu sitio web en los resultados de búsqueda y en las pestañas abiertas del navegador. Esto puede aumentar la tasa de clics y reducir el rebote.
  • Utilizar un favicon personalizado puede ayudar a fortalecer la marca y la presencia en línea de tu web, ayudando a aumentar la confianza del usuario y mejorar la recordación de la marca.
  • También es una forma de identificar tu sitio web o marca, entre otras que son similares, ayudando a diferenciarte y a destacarte entre ellas.

No obstante, es importante tener en cuenta que el favicon es solo una pequeña parte de la experiencia del usuario y la presencia en línea de tu web. El contenido de calidad, la estructura de la web y la optimización técnica son factores mucho más importantes para el SEO.

  Conclusiones

 

Mostrar un favicon o “icono favorito” en tu sitio web es una tarea tan simple que después de leer este artículo lo tendrás muy claro y lo realizarás casi con los ojos cerrados.

Al final de lo que se trata es de “hacerse ver”, o “mostrar de alguna manera de que sitio se trata, sobre todo en una amalgama de pestañas abiertas en cualquier navegador de este siglo, donde sufrimos de “pestañitis” y cuesta saber qué pestaña es cada cual, por lo que el favion tiene un papel preponderante en estos casos.

Asi que ¡ponlo en tu web!, y da igual que lo hagas con un plugin o manualmente, que uses un generador o que lo dibujes en tu “Cava”, mientras lo hagas, lo demás es otra historia.

¿Te ha resultado útil este artículo?

Promo Hosting 50% descuento marzo 2024