viernes, 14 de noviembre de 2008

¿cómo poner un favicon en mi web?

Para empezar,¿Qué es eso del favicon.ico?
favicon.ico es un icono (o ícono), es decir, una pequeña imagen, que aparece en algunos navegadores junto a la dirección de una página web. Por ejemplo, ahora deberías estar viendo algo parecido a esto:

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.

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.
2-Un editor de páginas web, es decir, un editor de texto normal y corriente.
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) si no la tienes olvida todos los pasos anteriores jaja.

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.

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.

3 - Subirlo todo a la web
4 - Comprobar que funciona

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

Si tienes Internet Explorer, 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).
-Si tienes Mozilla , 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 no te funciona,tranquilo! tu web no tiene porque ser tan bonita como la de los demás,a que no? jajaja(con esto te he picao y hasta que no lo consigas hacer no descansarás...muajaja!!)

No hay comentarios: