viernes, 12 de agosto de 2011

Minitutorial: Como cambiar el favicon de tu blog

Buenos días!!!! Por fin es vierness!!!!

Hace tiempo que no hago un minitutorial de "Cosas de ordenadores". Como anteayer decidí cambiar mi favicon, pues me dije que podría hacer un vídeo para enseñároslo.

Pero lo primero es lo primero ¿Qué es un favicon? Según su definición es:

Favicon (de Favorites icon): es un icono asociado a una página web. Los navegadores muestran este icono junto a la barra de direcciones, al lado del nombre de la página web en la lista de favoritos y en los títulos de las páginas. Los Favicon son de un tamaño 16x16, y de extensión .ico





Mi favicon era el de Blogger, es el que viene predeterminado y casi todas lo tenemos aun puesto. Lo he ido dejando y dejando hasta que hace dos días me levante pensando que era el día de cambiarlo. Ahora tengo un punto rosa, creo que es la síntesis perfecta de Rocco & Miss Murderer Style. No me enrollo más y vamos al lío.

Los navegadores han evolucionado y el html también. Esta abierto a cambios que antes daban error. El clásico favicon era como el de la definición, era un engorro cumplir todos los parámetros y cambiarlo a la extensión .ico aun peor porque tenías que usar un programa. El mio es cuadrado y con poco peso, además es .gif. Según la definición no sería un favicon, pero el mundo está en proceso cambio y el mio cumple perfectamente la función. 

Lo he hecho en gif para ahorrarme el paso de convertirlo en .ico. Además con .gif me muevo mejor con las transparencias. 

Cuando tienes la imagen creada el siguiente paso es subir la imagen a un servidor. El que uso es www.tinypic.com es gratuito y no tienes por qué registrarte. Lo subimos, pinchamos en la imagen y lo reservamos (como dice Argüiñano).

En nuestro blog entramos en la zona de diseño, en el editor de html. Ahí con Ctrl+F escribimos la palabra /head. Justo arriba de esa palabra escribimos el siguiente código:


Ahora vamos a la imagen que hemos subido, con el puntero sobre la imagen pulsamos el botón derecho y copiamos el URL de la imagen. Esa dirección sustituye http//sitio.com/favicon.ico

Le damos guardar plantilla y listo. En todas formas he hecho un pequeño vídeo de 2 minutos para que veáis lo fácil que es. Tiene calidad HD, así que podéis verlo a pantalla completa. 



Pero si teneis blogger es más sencillo. Lo podeis ver en la siguiente entrada. ^_^

Espero que os haya servido de ayuda el minitutorial y sobretodo que lo pongáis en práctica. Seguro que salen cosas muy monas. Besitooss y feliz find!!!!!

19 comentarios:

  1. Qué apañadísima eres, niña! Me encanta cuando nos explicas estas cosas, mil gracias!!

    ResponderEliminar
  2. Muchas gracias guapa, a ver si este finde me pongo y cambio el mío.
    Un besito!
    La moda y la belleza

    ResponderEliminar
  3. Muchas gracias, hasta hace poco me preguntaba por qué a la gente le salían flores y demás.
    Un besazo

    ResponderEliminar
  4. Yo hace tiempo qu etengo mi favicon, y m egusta ver los de los demás...a ver si se anima más gente y se pone el suyo.
    Un beso,
    MLu

    ResponderEliminar
  5. Mil gracias, guapa.
    A ver si me pongo con los cambios de una santa vez y trasteo el tutorial.
    Besos!

    ResponderEliminar
  6. Este tipo de cosas son las que guardo pa cuando tengo un rato tranquila poder bichear. Muchas gracias guapa!

    ResponderEliminar
  7. Gracias por este tuto, a ver si mas gente se anima a ponerlo, que es muy comodo cuando tienes un moton de ventanitas abiertas! jeje

    Yo, que tambien soy basntantilla friki, me lo he puesto en cuanto he creado mi blog: http://trihiasmakeupsite.blogspot.com/ (pasate si puedes, plisss =^_^= )

    Pero en blogger, que yo no llego a dominar tanto como lo que explicas en el video, lo pude cambiar mas facilmente en la pestaña de Diseño> Elementos de la pagina> Arriba a la izquierda, me pone "Favicon-> editar""
    Y desde ahi lo cambie como nada... permite subir la imagen desde tu propio Pc directamente y todo...

    Lo dicho, a ver si nos vemos pronto en mi blog, sois geniales! :p

    ResponderEliminar
  8. sisisisisii, estos tutoriales me encantan, me lo guardo para cuando tenga un ratito.
    BESOS,
    Nury

    ResponderEliminar
  9. Me encantan estos tutoriales Rocío, oye cómo se hace para poner el contador de visitas reales es que como el mío lo puse después de inaugurar el blog figuran la mitad de visitas más o menos... Muakkk

    ResponderEliminar
  10. Me encantan tus tutoriales :)
    En blogger se pone más fácilmente (afortunadamente) desde hace poco.
    Un besazo!

    ResponderEliminar
  11. Este tuto me lo guardo para cuando tenga tiempo cambiarlo, muchas gracias wapi

    ResponderEliminar
  12. Trihia. cierto hare la puntualización. ^_^ Besooss guapísimaaaa

    ResponderEliminar
  13. ya lo he cambiado...pero tarda un poco en cargar el dibujo...sabes por que puede ser?

    ResponderEliminar
  14. Sandra: tardan todos en general en cargar. Puedes mirar el favicon de otros como twitter facebook etc. Siempre tardan algo más. Pero es normal. De todas formas cuanto más grande sea la imagen más tarda, así que es mejor que sea de baja resolución para que no tarde. ^_^ Besitooooossss

    ResponderEliminar
  15. Gracias por el paso a paso preciosa se aprecia mucho sobre todo yo que ando en vísperasy preparativos para abrir uno!

    Besos

    ResponderEliminar
  16. gracias ahora intentare hacerlo a ver si me sale

    ResponderEliminar
  17. Joer qué interesant!!:O siempre me habia dado curiosidad de como lo hacía la gente, y no es tan difícil como pensaba!!^^ muchas gracias!! ;) un besote!

    ResponderEliminar
  18. Hola, yo lo he cambiado de las 2 maneras, se guarda como que está correcto pero me sigue saliendo la b de blogguer algo estoy haciendo mal seguro.
    Enviame en email porfa y me dices
    missisters@hotmail.es
    Gracias por adelantado!

    ResponderEliminar
  19. Missisters. Seguramente es porque hayas copiado mal el código: Te lo paso por aquí a ver si te vale ^_^

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

    ResponderEliminar