BLACK FRIDAY: 50% DE DESCUENTO EN TODOS NUESTROS PLANES

Hosting WordPress Webempresa

Cómo añadir el favicon en WordPress

por | Ago 12, 2022 | Aprender WordPress

Cómo añadir el favicon en WordPress

Si estás aquí es por que sabes qué es un favicon, y necesitas saber cómo crear y añadir un 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 jeje, 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.

   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

 

   Dónde se muestra el favicon de WordPress

 

Todos los navegadores web de escritorio muestran esta pequeña imagen en el encabezado o en la pestaña correspondiente.

favicon en WordPress 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 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 para WordPress 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.

  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 soportados 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.

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

 

Para añadir un favico en WordPress con la ayuda de un plugin deberemos ir al panel de administración de WordPress > Plugins > Añadir nuevo > busca el plugin: All In One Favicon.

añadir favicon en WordPress

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 4 de este artículo para ver que sitios puedes usar para crear tu favicon) y en los demás formatos bastaría simplemente con subir la imagen.

subir favicon en wordpress

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

  Conclusiones

 

Subir un favicon en WordPress o “icono favorito” 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.

Así 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?

Hosting Divi - Wp Fácil - Webempresa