Tras petición popular de varios conocidos, he decidido publicar en éste sencilísimo tutorial cómo tenemos que hacerlo para que en lugar de la “e” de Internet Explorer aparezca en la pestaña del navegador, o en la misma barra de direcciones, un logotipo (al que se conoce como favicon) a nuestra elección. En nuestro caso se trata de una cara hecha a partir de las letras b y p. Para los que todavía no lo ubiquen, o utilicen otro explorador, debemos fijarnos en el pequeño icono que aparece al lado izquierdo de la dirección de la página web que estamos visitando.
Para facilitar aún más las cosas, he diferenciado entre WordPress, Blogger, y páginas web en las que lo añadiremos tocando un poco el código (nada complicado).
Ante todo necesitamos una imagen en formato *.ico o *.png de tamaño 16×16 (aunque si no se usa una versión de Internet Explorer antigua se permiten perfectamente imágenes de 32×32 que pueden ser, incluso, de otros formatos). Si no tenemos ningún editor de imágenes que nos permita guardar en formato *.ico existen muchas webs que permiten crear tu propio favicon online a partir de una imagen o desde cero y descargarlo después. Aquí os dejo algunos ejemplos de páginas desde las que podeis transformar una imagen vuestra en un favicon y descargarla posteriormente:
Poner un favicon a tu blog de WordPress
Este tutorial es válido para todos aquellos que utiliceis WordPress alojado en un servidor, y no los de WordPress.com. En caso de que utiliceis WordPress en un servidor, para conseguir que aparezca el ansiado icono sustituto de la “e“, es tan básico como utilizar algún plugin creado para ello, que hay unos cuantos, como por ejemplo, Shockingly Simple Favicon, que no tiene ningún misterio. Aún así, os recomendaría hacerlo del modo que os explico a continuación.
Si no quereis cargar demasiado vuestro blog añadiendo plugins (mejor aprovecharlos para algo que lo merezca) siempre podeis seguir los pasos de como añadir el favicon a vuestra web que os explico un poco más abajo y modificar el codigo.
Tendréis que hacerlo a través de “Apariencia” “Editor” desde el escritorio de WordPress. Desde ahí accederemos al apartado llamado Header, o cabecera si lo teneis traducido, y una vez ahí seguiremos los pasos mencionados. Únicamente se trata de añadir una línea de código, veréis que no es nada complicado y que en 5 minutos lo teneis hecho.
Poner un favicon a tu blog de Blogger
Ante todo, nos dirigiremos al Panel de Administración del blog, “Diseño” y “Elementos de la página”.
Una vez ahí damos clic en Editar justo al lado de donde pone Favicon. Es momento de subir la imagen ya preparada, que en éste caso debe estar en formato *.ico y ser inferior a 10kb. Por supuesto siempre debe tratarse de una imagen cuadrada. Y nada más, ya lo tenemos listo!
Añadir un favicon a una web mediante código HTML
Para facilitar las cosas y poder utilizar todos la misma línea de código , llamaremos a la imagen favicon.ico y la guardaremos en la raiz de nuestro dominio. Para ello podeis utilizar o bien un programa del estilo de Filezilla y será tan sencillo como arrastrarlo al directorio que os interesa, normalmente dentro de public_html. Otra forma de hacerlo es, a través del cPanel de vuestro alojamiento web, (si tiene uno) utilizando alguna herramienta de la que disponga para administrar los archivos.
A continuación, sólo debemos añadir éste fragmento de código entre las etiquetas <head> y </head> de nuestra página. ( Da igual la posición siempre y cuando se encuentre entre las dos etiquetas).
El código a añadir es el siguiente:
<link rel="shortcut icon" href="https://blogspopuli.com/favicon.ico">Sustituye blogspopuli.com por tu nombre de dominio (en caso de llevar las www inclúyelas) y voilá, ya tenemos nuestro propio favicon! 😉
En caso de haberlo guardado en alguna carpeta en particular, únicamente tendrás que modificar la dirección en el códico para ubicarlo correctamente.
Si todavía tienes alguna duda, no dudes en dejar un comentario e intentaré resolvértela! 😉
