Cómo crear blogs y páginas web, trucos de posicionamiento SEO, consejos para hacer un blog con blogger o wordpress y más!

Cómo poner un favicon (icono) en nuestra web o blog

Imagen para el favicon BlogsPopuliTras 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="http://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! ;)

11 comentarios
  1. No tengo ni idea de HTML, lo justo de usuario,¿Para qe sirven estas referecias y que funcion tienen? las del final de la página?.¿Es conveniente tener una pagina en blogger de domio o sea, colocar mis cinco blogs en uno solo,que defina los contenios?O en n Worpres? Porque para muchos gastos, la verdad no está la cosa…..
    i
    (Este es otro, pero la cuenta viene en el nterior)angoinfo.Por v¡favot, el email., privado.

    ¿Puedo yo misma ir visitando mis paginas, y pasta)

    Gracias,Angelinaque proporcionen ingresos, porque la ¡verdad es que muchas horas y poca

  2. No se si he acabado de entender tus preguntas. Vamos por pasos, si no entiendo mal la referencia a la que te refieres es la que utilizamos para ubicar el archivo de imagen. (Al ser usuaria de Blogger no necesitas añadir nada de esto, lo puedes hacer sin problemas desde el panel de administración).

    Por lo que comentas de colocar tus cinco blogs en un dominio único, lo veo una buena opción siempre y cuando traten sobre lo mismo. Si no son de la misma temática, te recomendaría utilizar o bien un dominio diferente para cada uno, o si lo ves muy mal, utilizar 5 subdominios..

    La última pregunta que has hecho, si no he entendido mal, ¿es si puedes hacer click en tus propios anuncios? En caso de hacerlo, poco tiempo tardarían en dar de baja tu cuenta para adsense, así que no te lo recomendaría. Espero que te haya sido de ayuda, y cualquier cosa, ya sabes dónde encontrarme! ;)

  3. Hola,

    He intentado poner mi favicon en blogger pero aunque lo he puesto sin problema, a la hora de la verdad no se ve.

    ¿Qué puedo hacer?

    Saludos!

  4. Hola Luna!
    Te has asegurado de que la imagen esté en formato *.ico y que no sea mayor que 10kb? El otro requisito es que la imagen sea cuadrada. Si todo esto lo tienes correcto y aún así no ves el favicon en tu navegador, posiblemente sea porque estés utilizando una versión antigua de Internet Explorer. Si es así, el problema es del navegador, las demás personas si que lo verían.
    Si el blog en el que lo has probado es el de Laboratorio de opinión yo lo veo perfectamente. Si no es así deja la dirección y te lo compruebo.
    Un saludo!

  5. Hola!

    Gracias por contestar tan rápido! :-D

    Si tú lo has visto será que tengo una versión antigua del explorer. Lo comprobaré.

    Muchas gracias, como siempre!!

    Hasta pronto!

  6. Excelente!! muy bueno , por fin alguien que lo explica tan bien :)

  7. oye como le go para q el favicon aparesca en youtube es decir en la barra de sitios ?

  8. Hola!
    Yo también lo he realizado con blogger y no lo veo… Me puedes confirmar por favor si lo ves, o qué problema tengo.
    Mil gracias!

  9. Hola! estoy queriendo colocar el favicon en mi sitio web y no entiendo en qué archivo necesito editar el html como lo indicas. He podido subir el archivo .ico a la raiz del directorio, pero luego no sé en qué archivo modificar el html para que se lea correctamente el archivo .ico. Muchas gracias por tu ayuda! excelente artículo.

    • Hola Ana! El archivo a editar es el Header.php. Si utilizas WordPress lo encontrarás en “Apariencia” “Editor”. Suerte! :)

Responder