NOVEDADES

Cómo poner un Favicon en el nuevo editor de Blogger

Tutoriales - AccionGlobalXSoft



Información

Vamos a ver como poner un Favicon en una plantilla de blogger si estamos usando el nuevo 
editor de Blogger

Normalmente, si queremos poner un Favicon personalizado usando el editor antiguo de Blogger es fácil porque viene la opción predeterminada.

Hay que tener en cuenta que el Favicon debe de tener unas de medidas de 32x32 pixeles.
Tutoriales - AccionGlobalXSoft

 Pero en el nuevo editor esta opción de editar el Favicon desaparece, asi que vamos a ver como meterlo directamente en el HTML.

Lo prinero que haremos será subir el Favicon a una entrada de blogger que dejaremos siempre en borrador y que llamaremos IDB (imágenes del blog), es una manera de tener un servidor propio de imágenes. De aqui copiamos la URL de nuestra imagen.

Tutoriales - AccionGlobalXSoft

 Ahora vamos al editor HTML de nuestro blog: Tema > Editar HTML

Tutoriales - AccionGlobalXSoft

Damos a CTRL+F y buscamos esta linea 

<title><data:blog.pageTitle/></title>


Justo antes de esta linea, pegaremos estas otras dos

<link href='URL del favicon.ico' rel='shortcut icon' type='image/x-icon'/>

<link href='URL del favicon.ico' rel='icon' type='image/x-icon'/> 

Sustituiremos lo marcado en verde URL del favicon.ico por la url de nuestro favicon que hemos copiado anteriormente.

Guardamos los cambios y listo, nuestro favicon ya aparecerá en la barra del título del blog.

En el caso de que no aparezca esa línea

En los comentarios veo que hay blogs que no tienen esa línea de código.

En este caso, vamos a agregarla debajo del <head>, pero además añadiremos más código para mejorar el SEO de nuestro blog.

<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.url == &quot;https://tublog.blogspot.com/&quot;'>
<meta content='Aquí tu descripción' name='description'/>
<meta content='keyword1, keyword2, keyword3….' name='keywords'/>
</b:if>
 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | Keyword1 | Keyword2 | Keyword3 | Keyword4 | Keyword… </title>
</b:if>

 <title><data:blog.pageTitle/></title>

Aquí en lo marcado en verde sustituiremos por la url de nuestro blog, la descripción y las etiquetas.
Y añadiremos las dos líneas anteriores pertenecientes al favicon, justo antes de la última línea de este código.
En caso de que no funcione, probad a añadir las dos líneas justo antes de la primera de este código.


* Muy importante: recordad hacer copia de seguridad de la plantilla, siempre antes de hacer este tipo de modificaciones.


Publicar un comentario

24 Comentarios

  1. no aparece esta linea

    ResponderEliminar
  2. Prueba con pageTitle a ver si la encuentras.
    Saludos

    ResponderEliminar
  3. Respuestas
    1. Suele estar por debajo de la apertura de head, busca bien, o dime tu blog y te digo donde está.

      Eliminar
  4. Muchas gracias por la info. Muy interesante. Todo bien hasta dar a guardar. Me sale este mensaje y no me deja pasar de ahí.

    org.xml.sax.SAXParseException; lineNumber: 7; columnNumber: 17; The value of attribute "href" associated with an element type "link" must not contain the '<' character.

    Gracias de antemano

    ResponderEliminar
    Respuestas
    1. Te está diciendo que te falta un elemento del código en concreto <, revisa a ver si has hecho bien todo, y sobre todo nunca le des directamente a guardar, usa siempre vista previa, y si ves que carga bien la página, entonces ya guardas, más que nada para evitar algún error grave.
      Saludos.

      Eliminar
  5. Hola, lo he agregado pero no ocurre nada.

    ResponderEliminar
    Respuestas
    1. A veces tarda unos dias en aplicarse, espera dos o tres dias y si no te aparece, vuelve a comentar dejandome la url de tu blog y lo miro a ver si encuentro el fallo en caso que lo haya.
      Saludos.

      Eliminar
  6. Puedes añadir una captura como es el codigo que debemeos encontrar... es que a mi me aparece pero no exactamente como lo mencionas por favor

    ResponderEliminar
    Respuestas
    1. He editado el post, sigue las instrucciones nuevas que he añadido. Un saludo.

      Eliminar
  7. BUEN DIA , NO SE DONDE PONER EL FAVICON , YA QUE NO SALE YA ESA OPCION ,PROBE CON TUS PASOS Y NADA,

    ESPERO TU AYUDA .
    GRACIAS DE ANTEMANO.

    ResponderEliminar
    Respuestas
    1. Te iba a decir que si no podias con este tutorial que pasarás al editor clásico, y desde ahí lo aadieras, pero veo que ya lo tienes puesto.

      Saludos y gracias por visitarnos.

      Eliminar
  8. ESTE ES MI BLOGG

    https://peliculashindu-googledrive.blogspot.com/

    ResponderEliminar
  9. Hola, he probado las dos maneras, el favicon no aparece.,,

    ResponderEliminar
    Respuestas
    1. Hola Mónika, espera unos dias, normalmente no suele aparecer justo en el momento en que haces este cambio.

      Saludos y gracias por comentar.

      Eliminar
  10. Stanley Herrarte: he eliminado tu comentario porque tu imagen de avatar esta en http y hace que los navegadores me marquen la página como no segura, pero te contesto:
    has de buscar las linéas postdate o datetime en el html e ir eliminando, siempre haz copia de seguridad de la plantilla.
    Saludos.

    ResponderEliminar
  11. Stanley Herrarte ha contestado a un comentario en "Cómo poner un Favicon en el nuevo editor de Blogger"
    Hace 11 horas
    Gracias por tu respuesta! no sé porque mi avatar está en Http. Saludos!

    De nada, pero sólo aparece en Http en el recuadro de comentarios recientes.

    Saludos.

    ResponderEliminar
  12. No lo consigo de ninguna de las formas, tuve que optar por la opcion 2 ya que no tenia data:blog.page


    Pe no me funciona poniendo las lineas del ico sobre b:include data='blog' name='all-head-content'/> ni sobre data:blog.page

    Corroboré tambien que el ico estuviera en https, que podria estar pasando??



    Mi blog es https://barryeltorppe.blogspot.com/

    P.D.: la linea data:blog.pageTitle/> | Keyword1 | Keyword2 | Keyword3 | Keyword4 | Keyword ... hay que terminarla en "|" no sea que esto este fastidiando al cierre o algo, aunque he probado de las 2 formas

    ResponderEliminar
    Respuestas
    1. Al igual que he comentado a otros amigos del blog, el Favicon normalmente no se queda aplicado de inmediato, a veces tarda hasta dos o tres semanas en aparecer.
      Saludos.

      Eliminar
  13. ah perfect, entonces esperare, de gran ayuda, y casi mas el aprovechar para meterle las tags para los motores de busqueda, casi mejor que por lo principal por lo que consulte esta entrada. GRACIAS A TODOS!!

    ResponderEliminar
    Respuestas
    1. Gracias por tu visita y por dejarnos tu comentario.
      Saludos.

      Eliminar
    2. Hola Barry, entré a tu blog y ví que ya tenés el favicón. Te funcionó con el código de acá o de otra manera? Y si fue con el de acá, te tardó mucho? Porque yo lo acabo de hacer y necesitaría que esté para el sábado... me está matando la ansiedad jaja. Gracias a ambos!

      Eliminar
  14. Respuestas
    1. Desde Android lo tienes más complicado, todo esto desde una pantalla de móvil o tablet. En toeria los mismos pasos.

      Eliminar

Anímate a dejar un comentario, es la mejor manera de interactuar y ayudarnos a mantener el blog actualizado.