Creación Web

Cómo incluir un favicon en tu blog

Hoy hablamos sobre detalles, algo que estarás de acuerdo conmigo que es muy importante, ¿verdad? Pues, entonces, ¿por qué no tienes un favicon con tu marca en tu blog? ¿Por que no sabes? Aquí te lo explico!

El post de hoy va sobre detalles y lo importantísimos que son en todo, incluso en tu blog personal. Los detalles son eso que apenas percibes o que resulta insignificante, de forma aislada pero que, en conjunto, marcan una gran diferencia. ¿Verdad que sabes a lo que me refiero?

Pues bien, estoy seguro que estarás mas que de acuerdo conmigo en que hay que cuidarlos. Por eso hoy he decidido hablarte del favicon, un aspecto cuya época dorada paso y que, aunque en la actualidad casi todos lo tienen, sigue habiendo un alto porcentaje de blogs/webs que no. Y eso, a mi entender, es algo que hay que cambiar. Son detalles.

¿Qué es un favicon?

El nombre de favicon viene del inglés “Favourite Icon” o “Icono de Favorito” y se refiere al icono que debería aparecer si añadimos una página web a nuestros Marcadores (en Firefox o Chrome) o Favoritos como antiguamente se llamaba en Internet Explorer.

Pero desde hace ya bastantes años los navegadores reconocen el favicon de una web para mostrar el icono en la pestaña (incluso si minimizas la ventana). ¿No te has dado cuenta? ¡Seguro que si!

Los favicon pueden ser animados o estáticos. Yo personalmente no soy nada partidario de los primeros porque cuanto más cosas se muevan alrededor del cuerpo de tu post, más distracciones habrán que impida su lectura. Por el contrario, opino que como detalle decorativo debe estar ahí “completando un todo” pero sin acaparar mucho protagonismo.

¿Cómo genero un favicon a partir de mi logo?

Crear un favicon a partir de tu logo es realmente sencillo con la cantidad de herramientas online gratuitas que existen en la actualidad.

Por ejemplo, puedes usar este generador de favicon. Solo tendrás que subir una imagen e incluso te genera el código html que tendrás que publicar. Pero, “soooooo”, espera un momento!

Cosas que debes saber:

  • El favicon es una imagen muy pequeñita así que, si usas una foto muy detallada, se emborronará todo. ¡Es imprescindible que simplifiques al máximo la imagen!
  • El favicon es una imagen cuadrada así que intenta adaptarlo antes de generar el favicon.
  • El favicon es un archivo, es decir, tienes que generar un archivo y subirlo a tu servidor.
  • No basta con subir el archivo sino que tu theme tiene que incluir el código HTML que le indica al navegador cual es tu favicon.
  • El favicon se guarda en caché. Esto es muy importante saberlo porque, si no, aplicarás los cambios indicados en el vídeo o dichos a continuación, y verás que no funciona. No te preocupes, tarda un tiempecito en aparecer en tu navegador.

¿Cómo incluir el favicon en tu blog?

Bueno, como haber, hay muchas formas de incluirlo pero yo te voy a guiar en lo que creo que es el camino más sencillo.

Primero, ver si ya existe el código

Muchos themes vienen con su favicon por defecto y activado. Para comprobarlo, te sugiero que abras tu blog y pinches con el botón derecho en un espacio vacío (fondo) y selecciones “Mostrar código fuente”.

En ese chorro de código, que no tienes que entender si no quieres, pulsa Ctrl+F (para buscar) e introduce “favico”. Si aparecen resultados, es muy probable que ya tuvieses el favico puesto por el theme. Sube el archivo generado en la misma ruta y listo!!

Igual forma parte de las opciones de tu Theme…

Si, en la mayoría de los themes profesionales (y muchos gratuitos) te ofrecen la posibilidad de subir el favicon de forma cómoda, como parte de las opciones del propio theme. ¡Busca esa opción!

No, hay que hacerlo manual

Vaya vaya, toca “arremangarse”. Bueno, te lo voy a contar fácil y, si quieres, mírate el vídeo donde muestro el proceso completo, ¿vale?

Lo único que tienes que hacer es:

  1. Generar el favicon con la herramienta online.
  2. Subir el favicon a tu servidor, y anotar la url con la que puedes acceder a ese icono.
  3. Ir a Apariencia->Editor y buscar el archivo header.php.
  4. Pegar el siguiente código justo antes de </head>.
  5. Actualizar el archivo.
  6. Esperar a que aparezca (pueden ser horas).

El código que hay que poner es sencillo:

<link rel="icon" type="image/x-icon" href="##url-al-icono##" />

Aquí solo tendrás que cambiar ##url-al-icono## por la url donde hayas subido tu favicon.

¡Y ya está! Un pasito mas hacia tener tu blog bonito, que se note que cuidas cada detalle, que lo mimas y que estás comprometido/a con el.

¿Opinas como yo? ¿Crees que cada detalle es importante? ¿Tienes favicon en tu blog? ¿Has encontrado difícil el mecanismo? ¿No crees que ya es hora de que el rosa deje de ser el color de las chicas?

 

¿Qué te ha parecido este artículo?

¡Espero que te haya gustado! ¿Me permites pedirte un favorcito?

1. Participa con tu comentario

Los comentarios son el alma de este blog. Aquí se premia la participación y la comunidad es lo más. ¡Prueba!

Dejar un comentario

2. ¡No olvides compartirlo!

Se llama generosidad: si algo te gusta y puedes compartirlo, ¿por qué no hacerlo?

¡Millones de gracias! Te lo agradezco un montonazo, de verdad.

Acerca del autor

Víctor Campuzano

Growth Hacker no soy, pero lo vivo. De mi blog no vivo, pero aquí si que soy como soy. Marketing Digital, Creatividad y Blogging con pasión y desenfado.

Hazte notar. ¡Participa!

*

23 comentarios

Uso de cookies

Esta web utiliza cookies propias y de terceros, como Google Analytics, para optimizar su navegación y realizar tareas de análisis y las pertenecientes a WordPress. Advierto que si continuas navegando, aceptas su uso. Puede cambiar la configuración, desactivarlas u obtener más información.

ACEPTAR
Aviso de cookies
Víctor Campuzano

¡Muchísimas gracias por comentar!

Has hecho algo muy grande, que lo sepas. Te estoy tan agradecido que me gustaría ofrecerte un regalo: un ebook sobre "Growth Hacking para impulsar rápidamente tu proyecto". Bueno, y algunas cositas extra que descubrirás si te suscribes. ¿Me aceptarías en tu buzón? Porfi, porfi, porfi...

¡Perfecto! Te has suscrito correctamente

Víctor Campuzano

¡Ey que te mola mi blog ¿eh?!

He detectado que has visto más de 3 páginas en esta sesión y, digo yo... ¿Te está molando? Si es así, suscríbete y recibirás cada nuevo post en tu buzón, regalos exclusivos, contenido privado.. ¡Lo más de mi! ¿Quieres? ¿Si? ¡Bien!

¡Perfecto! Te has suscrito correctamente