JMiur [E]

El favicon es un ícono; esa pequeña imagen que aparece en los navegadores junto a la dirección, ya sea en la barra de títulos del navegador, en las pestañas o en los marcadores.

En Blogger se insertan igual que en cualquier otra página web, basta colocar el código necesario pero, respetando algunas condiciones.

Como Blogger agrega su propio favicon a muestras páginas, el código debemos colocarlo siempre después de:
<b:include data='blog' name='all-head-content'/>
El segundo detalle importante a tener en cuenta es que en Internet Explorer, los favicons sólo pueden ser imágenes en formato ICO y su nombre debe ser favicon.ico; en el resto de los navegadores, podemos usar cualquier otro formato de imagen e incluso, gifs animados.

En todos los casos, basta alojar la imagen en algún servidor y luego, colocar esto debajo del código indicado o bien, en cualquier aprte antes de </head>:
<link href='URL_imagen' rel='shortcut icon' type='image/x-icon' />
<link href='URL_imagen' rel='icon' type='image/x-icon' />
Ya que Internet Explorer no acepta cualquier imagen, podríamos condicionar el favicon de tal modo que se viera uno en ese navegador y otro en el resto así que a lo anterior, podemos agregarle algo así:
<!--[if IE]>
  <link href='URL_favicon.ico' rel='shortcut icon' type='image/x-icon' />
  <link href='URL_favicon.ico' rel='icon' type='image/x-icon' />
<![endif]-->
Voy a volver a insistir con algo ya que la mayoría de los problemas por los que consultan terminan teniendo la misma solución. Como los archivos en formato ICO no son sencillos de alojar ya que no hay demasiados lugares donde se los acepte, a veces, se los aloja en servicios que no aceptan el hotlink es decir, que podemos descargarlos pero no podemos usarlos en una página web. En caso de dudas, la manera más sencilla de probar esto es colocar la URL de la imagen que vamos a utilizar en la barra de direcciones del navegador y mirar. Si se abre una página, significa que la dirección no nos sirve.

Si queremos usar un ícono, el formato debe ser ICO y cambiarle la extensión a una imagen no servirá de nada.

Hay muchos programas gratuitos que permiten crear íconos y sino, se puede recurrir a los servicios online donde podemos subir una imagen cualquiera y ellos la transformarán y nos permitián descargarla.

A mi me sigue gustando como funciona FavIcon from Pics pero hay muchos otros. Claro que no cualquier imagen será útil; hay que recordar que estos íconos son muy pequeños así que hay que ir probando o buscar en bibliotecas como iconspedia o favicon.cc.

Un nuevo editor se suma a los ya existentes, se trata de Favigen y funciona de manera similar al resto, subimos una imagen en cualquier formato, genera el ícono y lo descargamos.

13 comentarios:

Stranno  

Google Sites, sin ir más lejos, permite hotlink de archivos ico

Responder
La hormiguita  

Muy interesante y una pregunta.... no se pueden alojar en una entrada en Blogger?

Responder
JMiur  

Sólo puedes alojarlos en Blogegr si son imágenes comunes; si son imágenes en formato ICO, no ya que no serán aceptadas.

Responder
Andybel  

.-J.MIUR: He hecho todo lo que has dicho en relación a colocar el favicon. Ha estado funcionando bien durante unos días; pero ya llevo dos que no aparece el favicon en la barra de navegación del internet explorer.

.-Te dejo mi dirección del blog Cosas y Casos para ver qué ves tú y me lo digas. www.cosasandybel.blogspot.com

.-Es raro que haya funcionado durante algunos días y ahora no.

.-Gracias anticipadas y un saludo desde Barcelona -España-

Responder
Carlos Javier  

Hola JMiur:

Ya que tocaste el tema, tengo una duda que no he podido resolver. Nunca he tenido problemas es poner, cambiar o quitar el favicon de mi blog principal, sin embargo, no entiendo por qué en las listas de blogs desde las que lo enlazan, el favicon que sale es el de Blogger, y no el que yo uso... ¿Sabes por qué ocurre esto?, ¿Conoces alguna forma de cambiarlo?

¡Saludos!... y gracias :)

Responder
Andybel  

.-CARLOS JAVIER: ¿Sabes tú algo en relación a lo que pregunto yo en mi comentario...?

.-¿Será debido a la dificultad de alojamiento de los archivos ".ico"?

.-Saludos y gracias.

Responder
Andybel  

.-CARLOS JAVIER: Y otra cosa, ¿qué navegador usas tú?

.-Tenía pensado cambiar el internet explorer por el google chrome...

.-Saludos y gracias.

Responder
JMiur  

Andybel:
Lo que ocurre con tu favicon es que, simplemente, la imagen ya no existe; fíjate lo que dice cuando se intenta verla
Probablemente no está alojada corecta,ente o el sitio ese sólo la mantiene durante cierto tiempo y luego la elimina. Súbela a Google Sites, cambia la URL y resolverás el problema.

Carlos Javier:
Ese detalle lo desconozco; es probable que Blogger envie su favicon en lugar del nuestro.

Responder
Andybel  

.-J.MIUR: Sí, yo también había pensado en esa posibilidad. Voy a probar lo que me dices y muchísimas gracias como siempre por tu ayuda y consejo.

.-Saludos desde Barcelona.

Responder
Carlos Javier  

Hola Andybel:... en realidad es relativo, los uso todos dependiendo de donde esté o de lo que esté haciendo: en casa uso chrome, en el trabajo, firefox, y en la portátil uso safari. También de vez en cuando uso IE, pero nunca por nada específico. En todo caso si puedo decir, que de todos mi favorito es todavía FF.

Saludos!

Responder
irukaumino  

Gracias por la información me sirvió de mucho, solo no he logrado en internet explorer pero seguiré intentando

Responder
mariaisabel  

Gracias por estos tutoriales tan útiles. El problema de donde alojar las imágenes es difícil de solucionar a veces, pero buscando en muchos sitios al fin dí con Dropbox, https://www.dropbox.com/ es increíble lo bueno que es, y aunque tiene un límite (suficiente en principio) gratis, si se quiere más, es de pago, es muy intuitivo y se puede trabajar desde el escritorio. Acepta favicon.ico, cualquier tamaño.
Un saludo

JMiur  

En Blogger ya no hace falta, se puede agregar directamente en la primera ventana de diseño.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR