sin programar: Cambiar icono de blogger en el navegador

24/10/10

Cambiar icono de blogger en el navegador

Para cambiar el icono de blogger por un icono personalizado hay que hacer algunas "trampillas" que sobreescriban el que ya existe. Lo explicaré paso a paso para que lo puedan entender los usuarios sin conocimientos de HTML.

El logo debe tener extensión "ico" con un tamaño de 16x16 pixels. Se pueden utilizar imágenes jpg o gif directamente cómo icono, pero algunos navegadores no los soportan, así que no lo recomiendo. Si no tienes ningún programa para crear iconos puedes utilizar herramientas gratuitas online, por ejemplo el generador online de genfavicon.com.
Una vez tenemos el gráfico creado, tenemos que subirlo a un hosting propio u otro alternativo distinto al de blogger, porque blogger no nos dejará subir imágenes con este tipo de extensión. Una posibilidad es crearte un sitio en "google sites", es gratis y tardarás un minuto (si tienes hosting propio salta directamente al paso 3):

Cómo crear un sitio en "google sites" y subir un archivo

Entra a sites.google.com con tu cuenta de blogger, crea un nuevo sitio, dale el nombre que quieras (la plantilla es lo de menos).

Entra al sitio que has creado, en la parte superior aparecen los botones de edición, despliega "Más acciones" y pulsa en "Administrar sitio".

En el menú de la izquierda ves a "Archivos Adjuntos" y por último pulsa en el botón "subir". Te aparecerá un botón de "examinar" donde deberás cargar tu logo con extensión "ico" de 16x16 pixels (puedes subirlo al nivel superior o a otro).

Una vez cargado te aparecerá en la lista con un enlace directo (Ver y descargar), copia la url de destino de "Ver" (botón derecho del ratón sobre el enlace, y en el desplegable busca copiar acceso directo o copiar ruta del enlace o similar).

Pega la url copiada en algún editor de texto. Obtendremos algo parecido a esto:
https://sites.google.com/site/sinprogramar2/favicon.ico?attredirects=0
Hay que borrar de la url el interrogante y todo lo que viene después, en mí caso queda así:
https://sites.google.com/site/sinprogramar2/favicon.ico
Pues este será nuestro enlace a el icono.

Copia el siguiente código y sustituye las "xxx" por la url del icono:
<link href='xxx' rel='shortcut icon' type='image/x-icon'/>

En mí caso queda así:
<link href='https://sites.google.com/site/sinprogramar2/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

Sólo queda añadir este código resultante a nuestra plantilla de blogger en modo HTML (Panel del blog > Diseño > Edición de HTML) justo por encima de la línea que pone </head>. Quedaría así:

...
<link href='https://sites.google.com/site/sinprogramar2/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

</head>
<body>
..

Guardas los cambios y si vas a ver el blog el icono del navegador debería haber cambiado.