Cómo Insertar el Favicon.ico en Tu Página Web

Una vez tenemos listo y preparado nuestro icono lo guardaremos en el lugar adecuado para mantener siempre el orden, que como ya os he dicho tropecientas veces, es muy importante en esto de hacer webs para no perdernos.

Recordar que se trata de un pequeño archivo con extensión .ico (se llama extensión a las tres letritas que aparecen al final del nombre del archivo y que caracterizan el tipo de archivo de que se trata).

Ahora, para que cuando un visitante al agregar vuestra web en sus favoritos le salga el icono que hemos creado junto a la dirección de la página, tendremos que incluir un pequeño código en nuestra web. No os asustéis cuando os hable de código pues es algo muy sencillito. Os lo explico paso a paso para no variar.

  • 1.- Acceder al Código: Tenéis que acceder al código Html de vuestra página. Esto lo podéis hacer de distintas formas, según el editor que estéis utilizando (FrontPage, Dreamweaver...etc). Por ejemplo, con el FrontPage Express tendréis que hacer clic en Ver y luego en html.... Con el FrontPage en cambio, bastará con hacer clic en la lengüeta de la parte baja, donde aparece la palabra HTML. Con el Dreamweaver basta hacer clic abajo, en el icono con esta figura "".
  • 2.- Localizar Dónde Incluir el Código: Podréis observar una serie de palabrejas más o menos desconocidas y más o menos ininteligibles. El trozo de código que vamos a introducir, lo tenemos que meter entre la línea donde pone <head> y la que pone </head> (toda esta parte se llama cabecera). Para ello podemos hacer lo siguiente: Ponemos el cursor justo al final de la palabra <head>, pulsamos la tecla Intro o Enter o como queráis llamarla. Con eso, crearemos una línea nueva debajo de la anterior. En esa nueva línea introduciremos el siguiente código.
  • 3.- Introducir el Código: Tenemos que escribir lo siguiente:
    <link rel="shortcut icon" href="http://XXXXrutaXXXX/favicon.ico">

    pero donde yo he puesto XXXXrutaXXXX, vosotros tenéis que poner la ruta donde habéis guardado el archivo del icono, y donde pone favicon.ico, tenéis que poner el nombre completo de dicho archivo, con su .ico (extensión) incluida.

    Si aún no controláis bien el tema de las rutas, no dudéis en leeros la sección Las Rutas pues os evitará la mayoría de quebraderos de cabeza.  Para los impacientes, os digo que es el camino que hay que seguir para encontrar dicho archivo, pero leeros esa lección bien para tener bien claro lo que tenéis que poner.

  • 4.- Para finalizar: Ya esta todo. Ahora solo tenéis que guardar la página que hemos modificado y luego, mediante el FTP[?] o el programa que usemos para subir los archivos de nuestra web al servidor, actualizamos nuestra web, es decir, subimos esa página recién modificada y, claro está, el icono.
  • 5.- La comprobación: Para comprobar que lo hemos hecho bien, una vez que hemos subido todo con el FTP o lo que sea, nos conectamos a Internet, (en mi caso lo llamaría más bien interLENT), visitamos nuestra web y, en nuestro navegador, pulsamos en Favoritos y luego en Agregar a Favoritos. Si todo ha ido bien, aparecerá nuestro icono junto a la dirección de nuestra página, y lo mismo le ocurrirá a los visitantes que hagan lo mismo.

Debo avisaros de una cosilla. Esto solo funciona si el visitante agrega a sus favoritos esa página, pero no si agrega otra cualquiera de vuestra web, pues solo hemos hecho esto en una de las páginas que componen nuestra web. Para que funcione desde todas las páginas que forman nuestra web hemos de hacer esto para cada una de las páginas que la componen. A menos que nuestra web sea de marcos, en cuyo caso bastará con que añadamos el código a la página principal de los marcos, generalmente la llamada index.htm. Para evitar el tener que meter todo esto en cada una de las páginas (solo en el caso de páginas simples) podríamos haber previsto todo esto antes y haber creado una plantilla, en la cual, habríamos metido todo lo común a todas las páginas de nuestra web, como por ejemplo este código, el fondo de pantalla, el logotipo, etc, etc. Si vuestra web no es de marcos (o Frames) y no tenéis ganas de hacerlo página a página, hacedlo solo en la principal, pues es desde la que la mayoría de los visitantes agregan a Favoritos.

También os aviso, que los navegadores son algo caprichosillos y a veces, a pesar de tener el código bien, no muestran el icono. Por tanto, si estáis seguros de haberlo hecho todo bien y aún así no aparece, pensad que es posible que el navegador sea la causa. Esto no significa que los visitantes no lo vean, sino que tú no lo ves. También es normal que al vaciar la carpeta Temporal de Archivos de Internet del Windows dejes de ver dicho icono, hasta que vuelvas a cargar esa página de nuevo. En el Foro podéis ver algunos problemillas al respecto y algunas soluciones. Personalmente, yo dejé de ver el mio hace tiempo, pero como en una época si lo veía, pienso que se trata del navegador, que se ha empeñao en no enseñarmelo. Debe estar enfadado conmigo je je je.