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

13 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

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