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.

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

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!

Escrito por 

Hola! Mi nombre es Ricardo Prieto y trabajo (y escribo) sobre diseño web, maquetación y experiencia de usuario en SiloCreativo, desde donde ayudamos a personas a desarrollar sus proyectos con tutoriales, consejos y recursos.

Un Comentario en “Cómo añadir un Favicon a WordPress

  1. Juan | icono png

    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.

Deja un comentario

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