Seleccionar página

faviconNo se si os habéis dado cuenta que muchas paginas tienen un pequeño icono o imagen en la barra de url y que queda muy gracioso e interesante para cuando nos tengan en favoritos que identifiquen nuestra pagina solo con ver el icono. Vamos a ver como podemos poner un icono en la barra de direcciones cuando pones tu página Web en el navegador. Asociar este icono es muy fácil, solo tienes que seguir estos pequeños pasos:

  1. Primero necesitas tener tu imagen. Una que sea bonita y que identifique a tu página. Debes de creártela usando algunos programas como por ejemplo pixia o gimp o iconedit32. Luego tenemos la opción fácil que seria tener una imagen en cualquier formato y mediante algunas paginas Web especializadas y de forma gratuita podemos conseguirlo. Por ejemplo una de estas:
  2. Luego debemos ver que nuestra imagen respete o no los estándares porque en cada caso será diferente y tendremos diferentes formas de hacer referencia al objeto.
    1. Cuando respetamos los estándares por ejemplo con extensiones como PNG o GIF con dimensiones 16×16 o 32×32 píxeles. Debemos usar este código en nuestro <head></head> este código:   <link rel=”icon” type=”image/png” href=”/images/mifavicon.png” />  Depende de la extensión del archive debemos de usar un type u otro. Ejemplos:
      • Formato PNG: image/png 
      • Formato GIF: image/gif 
      • Formato JPEG image/jpeg
    2. Cuando no respetamos los estándares por ejemplo con Internet Explorer hay que utilizar extensiones como ICO y BMP y unas dimensiones de 16×16 píxeles. Debemos de poner en nuestro <head></head> este código:     <link rel=”shortcut icon” type=”image/x-icon” href=”/images/ic.ico” />
  3.   Otra forma seria poner un icono con extensión ICO para que algunos navegadores pongan el favicon automáticamente cuando entren en la página, pero esto no seria estándar.

No es muy útil hacer un favicon para IE, dado que éste sólo lo utiliza para los favoritos. Si utilizas un icono en un formato estándar y otro en formato ICO, no te aconsejo que pongas este último en la raíz: los navegadores lo mostrarán si no encuentran la imagen en formato PNG. También podemos utilizar un icono animado (ver enlaces de favicon arriba).