Blog

Home/Recursos/Cómo añadir un favicon a tu blog

Cómo añadir un favicon a tu blog

La palabra favicon es una abreviación que proviene del inglés “favorite icon”, icono de favoritos, es decir que se trata de la imagen que va asociada a una página web cuando el usuario la guarda en su carpeta de favoritos. Si quieres aprender a incorporarlo a tu blog no te pierdas este post. 

Elige el diseño de tu favicon

Comenzaré diciéndote que lógicamente tu favicon tiene que estar relacionado con el diseño de tu blog o con el nombre del mismo. Piensa que es un espacio minúsculo y que debe ser el icono que identifique a tu bitácora. Puedes optar por tus iniciales, un icono relacionado con tu temática o si tienes un logo, lo tienes mucho más fácil. 

Genera tu favicon

La mejor herramienta desde mi punto de vista para crear tu favicon es Favicon CC, porque te permite la opción de hacerlo desde cero, es decir que puedes hacer uno nuevo desde su aplicación. Aunque si ya tienes tu propio diseño puedes subir tu imagen y éste creará el icon.

Favicon CC

Favicon CC

 

Una vez que hayas subido tu imagen, pulsa sobre “generate”, en cuestión de segundos se generará tu icono. Para descargártelo pincha en “download favicon”.

Favicon preview

Favicon preview

 

Cómo insertar el favicon en mi blog

Ahora viene el momento clave de todo el proceso. Mi primera recomendación es que subas tu nuevo favicon a la galería de tu WordPress. Ya sabes, en el menú de la izquierda selecciona “medios” y después en “añadir nuevo”. Copia la url de la imagen porque te hará falta a continuación. 

Para el siguiente paso tenemos que utilizar lenguaje Html pero no te asustes, te aseguro que es sencillo y que te lo voy a contar paso por paso. Dirígete de nuevo al menú principal de WordPress y pincha sobre “apariencia” y en el menú desplegable, escoge “editor”. 

Aquí tienes varias plantillas de tu blog que cada una corresponde con el diseño de éstas. Tú tienes que buscar el que se llame “Cabecera o header” tiene una extensión que acaba en .php, pínchalo para abrirlo.

Favicon Header

Favicon Header

 

El siguiente paso es muy sencillo tienes que introducir el siguiente código html dentro del Head para incluir tu favicon: 

<link rel=”shortcut icon” type=”image/x-icon” href=”http://Aqui la url de tu favicon” /> 

En la imagen puedes apreciar que el código va justo debajo de la etiqueta <Head>, puedes ponerlo en la línea que quieras porque no afecta mucho dónde esté. Recuerda poner la url de tu favicon. 

Por último recuerda pinchar en “actualizar archivo” para que se guarden los cambios. Después vete a tu página de inicio y verás como ya aparece tu icono junto al título de tu blog. También puedes hacer la prueba y guardarlo en tus favoritos. 

Espero que te haya resultado de utilidad este post. Recuerda que si quieres encontrar iconos gratuitos para tus favicon puedes consultar este artículo. ¿Te parece útil añadir el favicon? ¿Consideras que refuerza tu imagen de branding o que da igual?

 

Suscríbete al newsletter

mailTodas las semanas encontrarás nuevos post sobre Redes Sociales, la Guía Legal, Recursos, Consejos, Tutoriales, ¿te gustaría recibir todos mis nuevos artículos en tu correo? Pues suscríbete a través del siguiente formulario para recibir todas las novedades y no perderte nada. Recuerda mirar en correo no deseado para confirmar tu suscripción.

Apuntate!

Written by

Periodista, especializada en Comunicación Corporativa y Protocolo y RRII. Ahora oriento mi carrera profesional al mundo del Social Media y el Community Management.

6 Responses to “Cómo añadir un favicon a tu blog”

By Julio Rodríguez cruz - 26 febrero 2014 Responder

Buen post, me lo guardo 😀

soy fan de los artículos dummies ^^ siempre vienen bien para pasarselo a quien quiere aprender

By Nuria García - 26 febrero 2014 Responder

A veces hay que recordar las cosas básicas, jeje. Todavía veo webs que no tienen favicon eh!
Gracias Julio, que pases un feliz día 😉

By Manuel - 26 febrero 2014 Responder

Muy bueno, Nuria. Gracias por compartir.

By Nuria García - 26 febrero 2014 Responder

Muchas gracias a ti Manuel, espero que te resulte de utilidad!

Feliz tarde y saludos desde Granada 😀

By Fernando - 28 febrero 2014 Responder

Me encantan tus artículos y aprendo mucho de ellos. Por cierto para blogger también se puede crear el favicon. Gracias y saludos. http://misfotografiasdelavida.blogspot.com.es/

By Nuria García - 28 febrero 2014 Responder

Desde luego Fernando, yo os he contado el caso de WordPress porque es el que yo tengo y el que mejor conozco.
Me alegra mucha saber que te son de utilidad.

Que tengas un fantástico día 😉

Leave a Comment