lunes, 2 de junio de 2008

Favicon, el icono de las paginas web

Antes de comenzar, lo siguiente ha sido copiado integramente del sitio que vinculare mas abajo.

El motivo para no cambiar nada es que de por si me parece bastante explicativo y ademas yo no podria agregar nada que realmente valiese la pena.

Ultimamente dos personas me han consukltado sobre como mostrar un icono en la barra de direcciones o los favoritos cuando se crea un sitio web, pues bien, estos iconos se llaman favicon (favorites icon) y la pagina que encontre para obtener informacion es lo bastante buena y explicativa como para resumirla.

El sitio en cuestión es: Favicon.net .




B - Pasos a seguir para que salga a la primera



En realidad es muy sencillo, pero no te saltes ningún paso. No vale la pena perder mucho tiempo con esto de los iconos, así que no te pongas nervioso y sigue los pasos uno por uno.



Qué necesitas


Antes de nada, asegúrate de que tienes todo esto:



  1. Un editor de imágenes que guarde en formato .ico. No, un .ico no es una imagen cualquiera con la extensión cambiada. Tienes que guardar la imagen con formato .ico. Hay muchos programas que lo hacen. Aquí tienes una lista.


  2. Un editor de páginas web, es decir, un editor de texto normal y corriente. Hay decenas de ellos que son gratuitos (aquí tienes una lista de editores HTML), pero también puedes comprar uno (si quieres y te lo puedes permitir).

  3. Un programa para subir el icono a tu espacio web. El icono lo subes a la web exactamente igual que el resto de tus páginas.

  4. Una página web (naturalmente). No te hace falta un dominio propio. El servidor donde esté tu página web tiene que estar configurado correctamente, aunque normalmente casi todos lo están.

  5. Nada más.


Por supuesto, un navegador que soporte faviconos (IE5 o superior, Mozilla 0.96 o superior, Netscape 6.2 o superior, o Konqueror), sería útil para probar que todo funciona correctamente.



Paso a paso



1 - Crear el icono


El icono debe tener las siguientes características:



  • Dimensiones 16 píxeles x 16 píxeles;

  • 16 colores (4 bits);

  • Formato ICO, no BMP, no GIF, no JPG.



En algunos navegadores puedes usar iconos mayores, con más colores y en otros formatos, pero si quieres que tu icono funcione a la primera, hazlo de 16x16, con 16 colores y en formato ICO.



Puedes bajarte un editor de iconos y crear tu icono tranquilamente en la comodidad de tu hogar. Para una lista completa de editores de iconos freeware y shareware, visita el sitio web de softonic.com.



Otra opción es crear tu icono con cualquier programa de edición gráfica (por ejemplo el programa de dibujo Paint que viene con Windows, o cualquier otro que ya tengas), y el pequeño programa Clic, que lo guarda en formato ICO y con la paleta de 16 colores de Windows. Así es como está hecho el icono de favicon.net



Crear iconos es una experiencia apasionante para algunos y un suplicio muy frustrante para el resto. Tómatelo con calma. En todo caso, al final tendrás tu favicono en un fichero con el nombre favicon.ico ¡Acuérdate de dónde lo guardas!



2 - Modificar nuestras páginas HTML



Ahora modificaremos nuestras páginas web para que los navegadores muestren el iconito en la barra de direcciones. Es muy sencillo, sólo hay que poner un elemento LINK entre las etiquetas <HEAD> y </HEAD> de tus ficheros HTML (vamos, que se lo metas en la cabeza), por ejemplo:


<link rel="shortcut icon" href="http://www.tudominio.com/favicon.ico">


o por ejemplo:




<link rel="shortcut icon" href="http://www.undominio.com/directorio/favicon.ico">


De momento sólo tienes un favicon.ico (es suficiente, ¿no?) así que lo mejor será que lo pongas junto con el fichero principal de tu página web.


Modifica todas las páginas HTML que quieras. Para empezar te aconsejo que cambies sólo la inicial, no vaya a ser que después de todo el esfuerzo resulte que te has equivocado en alguna tontería. Ya tendrás tiempo para cambiar el resto cuando veas que funciona.


Nota: realmente no hace falta que el icono se llame favicon.ico, ya que con el elemento LINK podemos especificar cualquier nombre; por otro lado, si no ponemos el elemento LINK en el HTML, el navegador buscará el fichero favicon.ico en el directorio raíz del dominio.



3 - Subirlo todo a la web


Sube las páginas HTML que hayas modificado a tu espacio web, y tu icono favicon.ico al sitio donde les hayas dicho a tus páginas HTML que va a estar. Si subes el icono con un cliente FTP asegúrate de que lo subes en modo binario.



4 - Comprobar que funciona


En teoría ya está, vamos a probarlo:




  • Si tienes Internet Explorer 5 o superior, ve a tu página y añádela a favoritos. Hasta que no la añadas a favoritos no saldrá el icono, por eso se llama favicon.ico ("fav" de favoritos). Una vez que la hayas añadido a favoritos debería salir el icono tanto en el menú de favoritos como en la barra de direcciones, a la izquierda de la dirección de la página. Si no sale abre el menú de favoritos y selecciona tu página. Si sigue sin salir cierra todas las ventanas que tengas abiertas del Explorer, arráncalo de nuevo y vuelve a tu página.
    En realidad hay una forma de ver el icono de favoritos en Explorer 5 sin añadir la página a favoritos, y es la siguiente: pincha con el ratón sobre el icono de explorer que aparece en la barra de direcciones, y sin soltar el botón del ratón arrástralo hacia la derecha hasta que estés encima de las letras "http", y entonces lo sueltas. Si no sale el icono, inténtalo dos o tres veces más.


  • Si tienes Mozilla 0.9.6 o superior, ve a tu página. El icono debería salir directamente en la barra de direcciones (o en la pestaña si está activada la navegación por pestañas) sin añadir la página a tu lista de marcadores. El icono no saldrá en la lista de marcadores, sólo en la barra de direcciones.

  • Si tienes KDE/Konqueror, el icono aparecerá al menos en cuatro sitios diferentes:

    • en la barra del título de la ventana, como botón para abrir el menú de la ventana;


    • en la barra de direcciones de Konqueror;

    • en la lista de marcadores;

    • en el panel Kicker, junto al nombre de la ventana o aplicación.




Si no funciona, primero tranquilízate. Pregunta a tus amigos si ellos pueden ver tu favicono. Si ellos lo ven y tú no es porque tu navegador no soporta faviconos, porque no lo has añadido a favoritos correctamente, o porque tienes problemas con la caché de tu navegador. Borra tu página de favoritos, cierra todas las ventanas que tengas del navegador, vuelve a abrirlo y añade de nuevo tu página a favoritos. Si sigue sin salir, borra tu página de favoritos, borra toda la caché (aunque eso borrará todos los iconos de favoritos del resto de las páginas que tengas en favoritos), cierra todas las ventanas del navegador, y vuelve a intentarlo todo desde el principio.



^ subir ^

B - Pasos a seguir para que salga a la primera



En realidad es muy sencillo, pero no te saltes ningún paso. No vale la pena perder mucho tiempo con esto de los iconos, así que no te pongas nervioso y sigue los pasos uno por uno.



Qué necesitas


Antes de nada, asegúrate de que tienes todo esto:



  1. Un editor de imágenes que guarde en formato .ico. No, un .ico no es una imagen cualquiera con la extensión cambiada. Tienes que guardar la imagen con formato .ico. Hay muchos programas que lo hacen. Aquí tienes una lista.


  2. Un editor de páginas web, es decir, un editor de texto normal y corriente. Hay decenas de ellos que son gratuitos (aquí tienes una lista de editores HTML), pero también puedes comprar uno (si quieres y te lo puedes permitir).

  3. Un programa para subir el icono a tu espacio web. El icono lo subes a la web exactamente igual que el resto de tus páginas.

  4. Una página web (naturalmente). No te hace falta un dominio propio. El servidor donde esté tu página web tiene que estar configurado correctamente, aunque normalmente casi todos lo están.

  5. Nada más.


Por supuesto, un navegador que soporte faviconos (IE5 o superior, Mozilla 0.96 o superior, Netscape 6.2 o superior, o Konqueror), sería útil para probar que todo funciona correctamente.



Paso a paso



1 - Crear el icono


El icono debe tener las siguientes características:



  • Dimensiones 16 píxeles x 16 píxeles;

  • 16 colores (4 bits);

  • Formato ICO, no BMP, no GIF, no JPG.



En algunos navegadores puedes usar iconos mayores, con más colores y en otros formatos, pero si quieres que tu icono funcione a la primera, hazlo de 16x16, con 16 colores y en formato ICO.



Puedes bajarte un editor de iconos y crear tu icono tranquilamente en la comodidad de tu hogar. Para una lista completa de editores de iconos freeware y shareware, visita el sitio web de softonic.com.



Otra opción es crear tu icono con cualquier programa de edición gráfica (por ejemplo el programa de dibujo Paint que viene con Windows, o cualquier otro que ya tengas), y el pequeño programa Clic, que lo guarda en formato ICO y con la paleta de 16 colores de Windows. Así es como está hecho el icono de favicon.net



Crear iconos es una experiencia apasionante para algunos y un suplicio muy frustrante para el resto. Tómatelo con calma. En todo caso, al final tendrás tu favicono en un fichero con el nombre favicon.ico ¡Acuérdate de dónde lo guardas!



2 - Modificar nuestras páginas HTML



Ahora modificaremos nuestras páginas web para que los navegadores muestren el iconito en la barra de direcciones. Es muy sencillo, sólo hay que poner un elemento LINK entre las etiquetas <HEAD> y </HEAD> de tus ficheros HTML (vamos, que se lo metas en la cabeza), por ejemplo:


<link rel="shortcut icon" href="http://www.tudominio.com/favicon.ico">


o por ejemplo:




<link rel="shortcut icon" href="http://www.undominio.com/directorio/favicon.ico">


De momento sólo tienes un favicon.ico (es suficiente, ¿no?) así que lo mejor será que lo pongas junto con el fichero principal de tu página web.


Modifica todas las páginas HTML que quieras. Para empezar te aconsejo que cambies sólo la inicial, no vaya a ser que después de todo el esfuerzo resulte que te has equivocado en alguna tontería. Ya tendrás tiempo para cambiar el resto cuando veas que funciona.


Nota: realmente no hace falta que el icono se llame favicon.ico, ya que con el elemento LINK podemos especificar cualquier nombre; por otro lado, si no ponemos el elemento LINK en el HTML, el navegador buscará el fichero favicon.ico en el directorio raíz del dominio.



3 - Subirlo todo a la web


Sube las páginas HTML que hayas modificado a tu espacio web, y tu icono favicon.ico al sitio donde les hayas dicho a tus páginas HTML que va a estar. Si subes el icono con un cliente FTP asegúrate de que lo subes en modo binario.



4 - Comprobar que funciona


En teoría ya está, vamos a probarlo:




  • Si tienes Internet Explorer 5 o superior, ve a tu página y añádela a favoritos. Hasta que no la añadas a favoritos no saldrá el icono, por eso se llama favicon.ico ("fav" de favoritos). Una vez que la hayas añadido a favoritos debería salir el icono tanto en el menú de favoritos como en la barra de direcciones, a la izquierda de la dirección de la página. Si no sale abre el menú de favoritos y selecciona tu página. Si sigue sin salir cierra todas las ventanas que tengas abiertas del Explorer, arráncalo de nuevo y vuelve a tu página.
    En realidad hay una forma de ver el icono de favoritos en Explorer 5 sin añadir la página a favoritos, y es la siguiente: pincha con el ratón sobre el icono de explorer que aparece en la barra de direcciones, y sin soltar el botón del ratón arrástralo hacia la derecha hasta que estés encima de las letras "http", y entonces lo sueltas. Si no sale el icono, inténtalo dos o tres veces más.


  • Si tienes Mozilla 0.9.6 o superior, ve a tu página. El icono debería salir directamente en la barra de direcciones (o en la pestaña si está activada la navegación por pestañas) sin añadir la página a tu lista de marcadores. El icono no saldrá en la lista de marcadores, sólo en la barra de direcciones.

  • Si tienes KDE/Konqueror, el icono aparecerá al menos en cuatro sitios diferentes:

    • en la barra del título de la ventana, como botón para abrir el menú de la ventana;


    • en la barra de direcciones de Konqueror;

    • en la lista de marcadores;

    • en el panel Kicker, junto al nombre de la ventana o aplicación.




Si no funciona, primero tranquilízate. Pregunta a tus amigos si ellos pueden ver tu favicono. Si ellos lo ven y tú no es porque tu navegador no soporta faviconos, porque no lo has añadido a favoritos correctamente, o porque tienes problemas con la caché de tu navegador. Borra tu página de favoritos, cierra todas las ventanas que tengas del navegador, vuelve a abrirlo y añade de nuevo tu página a favoritos. Si sigue sin salir, borra tu página de favoritos, borra toda la caché (aunque eso borrará todos los iconos de favoritos del resto de las páginas que tengas en favoritos), cierra todas las ventanas del navegador, y vuelve a intentarlo todo desde el principio.



^ subir ^







Si desean interiorizar mas, ademas de ver preguntas frecuentes visiten el sitio: http://www.favicon.net