28.1.10

Ícono para la barra de direcciones de Blogger



Siguiendo los siguientes pasos crearemos un ícono para ponerlo en la barra de direcciones de nuestro blog de Blogger:

1.- Diseñamos la imagen para nuestro ícono, de forma cuadrada, con todos sus lados iguales, de 100x100 pixeles, por ejemplo, y en formato gif o jpeg (puede ser con Paint). La guardamos en un archivo.

2.- Convertimos la imagen en ícono (extensión .ico) de 16×16 o 32×32 pixeles. Esto lo podemos hacer en chami.com

3.- Subimos el ícono a un hosting gratuito, que puede ser tinypic.com.


4.- Tinypic.com nos presentará este menú:


5.-Vamos a Editar HTML

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

Localizamos la siguiente etiqueta:

</head>

...y, antes de la misma, pegamos este código:

<!-- Código del Icono -->
<link href='favicon.ico' rel='shortcut icon' type='image/x-icon'/>

6.- En la línea resaltada en rojo pegamos la URL del ícono.

7.-Si tenemos complicaciones con la dirección HTML, ya que tiene los atributos Target y Title, entonces preferiblemente la obtenemos así:
    a.- Con el botón derecho del mouse hacemos click sobre el ícono que subimos a Tinypic, y después, con el botón izquierdo sobre Propiedades:
    b.- De la ventana que se nos presenta copiamos la URL y la pegamos en el código arriba mencionado.

 

Si tenemos problemas con el anterior método, intentemos con el siguiente:

1.- Diseñamos la imagen para nuestro ícono, de forma cuadrada, con todos sus lados iguales, de 100x100 pixeles, por ejemplo, y en formato gif o jpeg (puede ser con Paint). La guardamos en un archivo.

2.- Convertimos la imagen en ícono (extensión .ico) de 16×16 o 32×32 pixeles. Esto lo podemos hacer en chami.com.

3.- Una vez ingresados en la página se nos presentará el siguiente formulario:


4.- Bajamos la imagen de nuestro disco duro clickeando, primero en Examinar..., y después en Generate FavIcon.ico

5.- Para no complicarnos, de la página que se nos presenta nos dirigimos a este menú:


6.- Hacemos Click en la penúltima opción (Download only favicon.ico), para descargar únicamente el ícono.

7.- de la página que se nos presenta con el ícono copiamos la URL.

8.- Vamos a Editar HTML

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

Localizamos la siguiente etiqueta:

</head>

...y antes de la misma pegamos este código:

<!-- Código del Icono -->
<link href='favicon.ico' rel='shortcut icon' type='image/x-icon'/>

9.- En la línea resaltada en rojo pegamos la URL del ícono (la que copiamos en el punto 7).

10.- Por último guardamos los cambios.


Índice Edición HTML
Poner imagen de fondo a un blog Cambiar enlaces pie de página
Eliminar enlaces pie de página Eliminar 'Publicado por'
Eliminar fechas Eliminar la hora
Efecto subrayar links Eliminar barra superior
Evitar copias de blogs Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera Ícono para barra de direcciones
Centrar títulos posts Ensanchar blog
Cambiar color fondo posts Color fondo sidebar
Agregar una sidebar Color fondo de comentarios
Personalizar firma pie de posts Personalizar fechas de los posts
Diseñador de plantillas de Blogger Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
Centrar imagen de la cebecera

6 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por Kaede Shio : #

Hola. Tengo un problema... me funsiono erfectamente esto.. pero despues de un tiempo el icono desaparece y vuelve hacerse de blogger... ¿que es lo que ocurre?

ya me estoy cansando de subirlo

Comentario escrito por Pedro Pablo Pachón : #

Kaede: La verdad no tengo respuesta para esa pregunta. Aunque pienso que puede ocurrir que Blogger haya implementado un recurso para evitar que su ícono sea cambiado. En tal caso este tutorial ya sería obsoleto.

Saludos.

Comentario escrito por Pedro Pablo Pachón : #

Sin embargo, como se dijo en el tutorial, el código del ícono no es interpretado correctamente por todos los navegadores.

Comentario escrito por Kaede Shio : #

Hola. No creo que Blogger haya hecho eso, ya que muchos blogs que visito regularmente tienen su icono en la barra de direcciones... aun asi, su tutorial fue de mucha ayuda, porque logre tener mi propio icono n_n, y el problema que tengo de seguro tiene solucion.

Comentario escrito por Im_Hell : #

Gracias depues e buscar tanto como poner mi icono lo pude hacer, se te agradece y espero que no se borre...

Comentario escrito por Pedro Pablo Pachón : #

Im_Hell: Vi que tu ícono sí está funcionando.
Felicitaciones.

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.