Cómo añadir un Favicon a WordPress

Cuando hablamos de branding, una de los principios básicos es conseguir que nuestra marca o logo esté presente en el mayor número de ubicaciones para que el usuario nos recuerde y nos relaciones en un futuro. El favicon es uno de los elementos más olvidados pero cumple una labor muy importante de nuestra presencia online, y más a día de hoy cuando la mayoría de navegadores funcionan con pestañas y podemos saltar de una otra.

El favicon es además el icono que usará Android y iOS cuando agreguemos la página que estamos visitando como acceso directo. Se creará un icono en el escritorio o fondo de pantalla utilizando el favicon que tengamos asignado, algo muy útil para reforzar nuestra marca también en los dispositivos móviles.

En este tutorial vamos a aprender que es un favicon y la importancia de tenerlo activo en nuestra web. Además, veremos el paso a paso con capturas de pantalla para agregarlo a nuestro WordPress, ya sea en WordPress.com o WordPress.org. Si eres de los que prefiere seguir el paso a paso en video en vez de texto, un poco más abajo encontrarás un videotutorial para agregar tu favicon a WordPress. Espero sea de ayuda!

¿Que es un favicon y para qué sirve en mi web?

Un favicon (o favicon) en una pequeña imagen que los navegadores pueden mostrar en la cabecera de las pestañas, junto al título de la página. Dicha imagen puede ser administrada por nosotros y es además el icono que guardará el usuario en caso de que añada nuestra página a favoritos. De ahí la importancia de este elemento, pues es la forma que tendrán nuestros usuarios de identificarnos cuando estén navegando por otra web y tengan una pestaña abierta con nuestro sitio.

Para qué sirve un favicon

No es necesario que sea el logo de nuestra empresa o proyecto, pues es posible que no entre en el formato cuadrado que deben tener los favicons. Pero puede ser una inical del blog, un color representativo o la versión responsive de nuestro logo.

Añadir un favicon a WordPress.org

Lo primero es identificar si estás bajo WordPress.org o WordPress.com. Este artículo será de ayuda para comprobar que estás usando.

Empezaremos por WordPress.org. Desde la versión 4.3 WordPress incorpora una funcionalidad llamada icono del sitio, donde nos permite subir una imagen en formato cuadrado y dimensiones mínimas de 512 píxeles de ancho y alto para que actúe como favicon. Selecciona bien el formato de tu imagen, aquí tienes mas información sobre cada una.

Para poderlo subir necesitamos ir al panel de Personalizar. Desde nuestro panel de administración de WordPress vamos al menú de Apariencia > Personalizar > Identidad del sitio > Icono del sitio

Añadir favicon a WordPress.org

Esto es muy útil, pues desde una imagen png creada con un editor de imágenes podemos conseguir el favicon necesario para los distintos navegadores sin preocuparnos por subir varias imágenes de distinto formato y dimensiones.

Añadir un favicon a WordPress.com

El proceso en WordPress.com es ligeramente distinto. Aquí la funcionalidad de llama Blavatars, y funciona de la misma forma, podemos añadir nuestra imagen en formato .png o .jpg para que actúe como favicon. No se nos exige ninguna dimensión mínima ni máxima, pero recomiendan un mínimo de 128 píxeles de ancho y alto.

Para hacer uso de la funcionalidad de blavatars, tendremos que acceder a nuestro panel de administración. Para ello basta con añadir /wp-admin detrás de nuestro dominio, por ejemplo miblog.wordpress.com/wp-admin.

Añadir favicon a WordPress.com

Una vez dentro, navegar hasta Ajustes > Generales > Imagen/icono del sitio. Nos encontraremos con un espacio para poder cargar nuestra imagen y sustituir el logo de WordPress que aparece en el navegador por nuestro propio favicon.

Ten en cuenta que el cambio puede tardar unas horas, debido a la caché que utiliza WordPress.com para su red de blogs.

Bravatars subido icono en WordPress

Adiós a crear manualmente los favicon.ico

Antes este proceso era mucho más complejo. Habría que crear una etiqueta en el head de la web, subir la imagen en formato .ico, crear varios tamaños para según qué navegadores…un proceso que se ha simplificado mucho con las dos funcionalidades de las que hemos hablado anteriormente.

Si te interesa conocer el proceso y como los autores de temas teníamos que incluirlo como una funcionalidad básico de nuestras plantillas (con su correspondiente pérdida cuando el usuario cambiaba de tema) puedes leer esta entrada del Codex de WordPress.

Y si ya te has convencido de la importancia de tener un buen favicon ahora solo queda tener algo de inspiración para crear ese icono memorable que apetezca tener en la barra de favoritos. Para ello te recomiendo que leas este artículo sobre tendencias para crear logotipos y este otro para encontrar algunas ideas, que nunca viene mal.

Espero te haya servido el tutorial!

Comentarios (5)

  1. Aunque no lo parezca, la mini ilustración que muestra el Favicon, puede ser la diferencia entre ubicar nuestra web o no prestarle atención. A muchos nos ha pasado que ubicamos un determinado blog, y cuando vemos su favicon, nos recordamos quienes son, y lo ubicamos mas cómodamente, cuando lo comparamos con otros blogs.

    Imagínense si un blog, no tuviera favicon, se tendría menos oportunidades de recordarlo para ingresar.

  2. Hola, tengo un pequeño inconveniente en mi sitio web de wordpres.org. Solamente me aparece en mi panel de administrador pero No en el sitio web exactamente.

    He intentado de mil maneras ajustar mi favicon pero no ha sido posible. Ya eliminé posibles plugins que hagan interferencia, lo ingresé mediante código en la raíz de html del theme, vacié el caché de mi navegador y el de mi admin de wordpress (bases de datos, post, etc…) y aún no he podido solucionar absolutamente nada. Mi sitio web es migarciarovira.com

    1. Saludos Guillermo,

      a mi se me muestra correctamente tu favicon: un recuadro verde con borde redondeados y el centro transparente. Lo estoy visualizando con Chrome. ¿Quizás es un problema del navegador?

      Saludos!

  3. Muchas gracias, me ha sido útil, ya llevo tiempo haciendo esto y se me había olvidado cómo hacerlo.
    Lo agregué a mi grupo de Facebook y lo compartí.
    Saludos…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *