Crear un logo favicon para tu blog.



Quizá hayan podido ver que en diferentes paginas existe un logo pequeño al lado de la dirección URL, es a esto que se denomina FAVICON.

Como siempre es bueno darle un logo o insignia característico a nuestro sitio que lo diferencie de los demás. Sería mejor entonces cambiar el clásico logo de blogger por uno mucho más original y propio. Para esto, contamos con varias páginas que nos aportan esa opción, una de ellas es Favicon From Pics.

Paso a explicarles paso a paso:


Primero que nada diseñamos o elegimos la imagen que queramos poner como favicon, no importa el tamaño, e ingresamo a Favicon From Pics.


Luego, donde dice "Image To Use" es donde seleccionaremos el archivo que vamos a convertir al tamaño correcto, luego click en "Generate Favicon.ico". Como verán también puede hacerlo con la imagen que tienen en su cuenta en twitter.



Luego de hacerlo, podremos ver como quedaría. Tienen dos opciones, uno simple y estático, y el otro corredizo, este último es el que uso yo. Descargamos el paquete comprimido que incluye las dos versiones para luego subir a un hosting de imágenes una de ellas.



Un buen hosting de imágenes que uso es Imgur, pero pueden usar el que a ustedes mas les guste. Así que subimos la imagen .ico (simple y estática) o la .gif (corredizo).

Para insertarla en nuestro blog, sólo tenemos que ir a Diseño/Edición de HTML y con Ctrl + f buscamos el código <b:skin><![CDATA[/*

Arriba del código antes buscado, pegamos el siguiente:


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


Lo que está marcado con rojo es lo que deben sustituir por la dirección que el hosting de imagenes les proporcionó, como verán lo tienen que pegar 2 veces: 


Luego guardamos la plantilla y ya está, al abrir su blog verán su favicon.

NOTA: Si no les funciona pueden probar pegándo el código después de la etiqueta <b:include data='blog' name='all-head-content'/> o si no después del código </head>

Espero que les sea útil, saludos!!!
Share on Google Plus

About Unknown

    Blogger Comment
    Facebook Comment

1 comentarios: