Insertar imagen navegador en una pagina web

Las últimas versiones de Internet Explorer y Firefox, permiten mostrar en la barra superior una pequeña imagen, que la mayoría de sitios ya incorporan con algún icono.
A continuación les mostraré cual es el proceso que hay que seguir para crear correctamente el contenido e insertarlo adecuadamente.
1. En primer lugar hemos de crear un logotipo que ha de ser una imagen lo suficientemente pequeña para que el peso de la imagen al cargar la página represente muy poco espacio. Si no encontráis la manera de reducir el tamaño páginas como Genfavicon convierten imágenes de cualquiera tamaño a pequeños iconos.

 

2. A continuación hemos de subir la imagen en googlepages, siguiendo el método que expliqué anteriormente para subir archivos.

 

3. Finalmente hemos de introducir en nuestro blog la siguiente línea, justo después de la etiqueta <head> del código html:

1
<link href='http://tuweb.googlepages.com/tuimagen.ico' rel='shortcut icon'/>

36 pensamientos en “Insertar imagen navegador en una pagina web

  1. Óscar GP

    Exacto Diego, es lo que comentas solo sería sustituir el codigo de google pages por el que comentas.

    En mi web sería mi imagen de google, si tienes dudas por donde pone rel=”shortcut icon”, no hace falta cambiarlo.

  2. Diego Math

    Entonces como quedaria? Por favor arma la linea que tengo que copiar con mis datos, porque yo pruebo pero me da error. GRacias

  3. Oscar GP

    Solucionado del todo, el problema radicaba en que al codificar al blog he cambiado la comilla individual por comillas provocando un error al guardar la plantilla.

  4. administradores

    Hola de nuevo oscar… siento mucho tener que mandarte tantas dudas pero somos muy novatos en esto…

    esta es la linea que he insertado yo:
    link href=’http://tuweb.googlepages.com/icono.ico’ rel=’shortcut icon’
    y me da un error, este: No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type “link” must be terminated by the matching end-tag “”. Cuando puedas, te agradecerís una ayudita.

    Muchas Gracias por tu trabajo!!

  5. Oscar GP

    Hola Administradores, solo asegúrate que la has puesto después del head, tal y como comento.

    En segundo lugar, comprueba si la plantilla sin hacer ningún cambio te deja guardarla, es un hecho un poco anormal, porque el código es bastante sencillo. Cóméntame algo si te sale.

    Saludos,

  6. bto

    oscar es cierto cuando trato de guardarlo sale esto:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Open quote is expected for attribute “{1}” associated with an element type “href”.

    y lo he hecho tal y como dices…

  7. admin Autor

    Hola Bto,

    mil gracias por tu problema, que si me sirvió para detectar un fallo que se dio a causa del cambio de Blogger a WordPress, ya lo pueden volver a usar y les garantizo que no fallará.

  8. Diplomafia

    Saludos Oscar,
    Estoy creando un nuevo blog y gracias a ti he logrado cambiar muchas cosas de mi blog. Pero aun no he podido entrar a googlepages para seguir editando mi blog y añadirle cosas nuevas, a ver si tu me puedes ayudar.

    Gracias anticipadas

  9. oscargp

    Hola Diplomafia,

    Googlepages no admite nuevas altas, con lo cual recomiendo usar SkyDrive, sobre el cual espero escribir un artículo pronto. Saludos.

  10. Priya

    Hola Oscar, mira hace tiempo puse un logo en el navegador para mi blog, todo iba bien, pero nosé porque desde hace unos días ya no sale, me ha ocurrido con otro blog también, y la foto del ico la tengo subida a un servidor mio. ¿Sabes si ha cambiado algo blogger? porque yo no he tocado nada de eso.

    ¿Le ha pasado a más gente?

    Gracias por la atención

  11. oscargp

    Hola Priya, nadie más me ha comentado nada, puede ser un fallo temporal del servidor ya que seguro que el código continúa funcionando porque es HTML estándar.

    Dicho esto, comprueba a poner en el navegador la ruta de la imagen. Blogger no está cambiando pero googlepages está desapareciendo y nadie sabe hasta cuando estará ahroa mismo. Un saludo

  12. fernando

    hola, que tal, estoy editando el xml de una galeria de imagenes web de psd cs3,
    la cuestion es que quiero q el ico se inserte autamaticamente desde el xml a todas las pages e index de la galeria….

    pero no me sale :(, alguien podria ayudarme???

    mi mail: ferdesigner@delfenar.com.ar

  13. Richard Alexander

    Ojo:
    *De vez en cuando, cuando haz iniciado sesión en Gmail, ó para acceder a Blogger, Google Pages o a otro servicio de Gmail. Solo veras el icono de Blogger en las paginas de Blogger. Sin embargo, si cierras sesión y/o reinicias tu ordenador el problema estará resuelto.
    * Como dice Oscar Google Pages està desapareciendo temporalmente ya que Google Corporation està dando más enfasis e importancia a Google Sites. Una de las opciones que proporciona Google ante este problema es mover su espacio a Google Sites manualmente Como se puede ver en «http://pages.google.com/-/about.html#faq » otra opcion es elegir otro tipo de servidor, como es en MSN (Spaces, Skydrive), etc

  14. Gabriel

    yo puse el html asi

    <![CDATA[/*

    y no funciono, no puedo en google pages por que no me lo permite
    Quisiera que me dijeran que hacer
    Gracias

  15. AME

    Hola Óscar, enhorabuena por tu trabajo, te sigo desde hace tiempo.
    He insertado la imagen, y funciona con el Explorer, pero no con Firefox. ¿Podrías ayudarme?

  16. OnlyPablo

    Hola, lo primero de todo es felicitarte por tu trabajo, esta muy bien esto que haces, a mí me has ayudado en muchas cosas, pero en esta tengo un problemillas:S tengo blogger y he intentado poner la imagen como digiste, subiendola tal y como dijiste, pero no hay manera, inserte el codigo en head y nada, mira haber si me puedes hechar una manita porfa. Muchas gracias de antemano, te agradeceria que me dieses la respuesta por correo : onlyerreape@gmail.com

  17. Emmanuel

    En general todo esta bien hasta el paso de crear el favicon que es el icono.

    Pero antes de “” se situa este codigo “”

    Solo se sustituye la parte que dice “direccion http del icono” y ya…

  18. Emmanuel

    En general todo esta bien hasta el paso de crear el favicon que es el icono.

    Pero antes de /body“” se situa este codigo “link href=’http://sitio.com/favicon.ico’ rel=’shortcut icon’
    type=’image/x-icon’/” todo eso va entre los simbolos “”

    Solo se sustituye la parte que dice “direccion http del icono” y ya…

Los comentarios están cerrados.