¿Qué es un favicon? ¿como se hace?
Es un icono, es decir, una pequeña imagen, que aparece enalgunos navegadores junto a la dirección de una página web. En Explorer 5 osuperior tendrás que añadir primero la página a favoritos) en
firefox actualmente tiene menos dificultades.
El funcionamiento de los "faviconos" no resulta siempre deltodo predecible, ya que se comportan de manera diferente con cada navegador, pero esto se está solucionando con el tiempo y las nuevas generaciones de utilidades, intentare hacerlo de la manera los más simple posible por que en lo simple hay menos posibilidad de error.
¿Que necesito?
- Un editor de imágenes que guarde en formato .ico. 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, y hay utilidades online como chuano.net ó genfavicon.com .
- Un editor de páginas web, es decir, un editor de texto
normal y corriente. Hay decenas de ellos que son gratuitos
- Un cliente ftp para subir el icono a tu espacio web. El icono lo subes a la
web exactamente igual que el resto de los archivos que forman tu web.
4. Por supuesto, un navegador que soporte faviconos (IE5 o superior, Mozilla
0.96 o superior, Netscape 6.2 o superior, para ver el resultado de tu trabajo.
¿Como se hace?
1) Crear el iconoEl icono debe tener las
siguientes características:
- Dimensiones 16 píxeles x 16 píxeles;
- 16 colores (4 bits);
- Formato ICO,
ningún otro. Aquí tienes utilidades online
para generarlo.
chuano.net ó genfavicon.com
2) Subir el .ico al servidor.
Por supuesto debe ser un archivo .ico y con dicha
extensión.
Debes ser conciente de la url donde lo colocas por que la
tendrás que insertar en el siguiente código.
3) Insertar el códigoEl código debe estar entre <HEAD>
y </HEAD>
del HTML de las páginas en donde quieres que se vea el icono.
<link rel="shortcut icon" href="http://www.tudominio.com/tufavicon.ico">
O si el icono esta alojado en la raiz
de la página donde quieres mostrarlo puedes usar simplemente
<link
rel="shortcut icon" href="tufavicon.ico">
Nota. Primero sube la imagen después prueba el funcionamiento insertando el código en una página y si funciona correctamente, adelante a ponerlos hasta en la sopa.
YoHagoWeb, el kiosco de las chapuzas para webmasters principiantes
Imprimir |