martes, 22 de enero de 2008

Poner favicon en una página Web

¿Sabes qué es un favicon? Es un iconito que últimamente se ha puesto de moda. Sí, es el que sale en la parte izquierda de la barra de direcciones de los navegadores (descentes), al lado de la URI (más conocida como URL). Regularmente el iconito es el logo de la empresa, organización dueña de la página Web.


Siempre había querido saber como se ponían esas cositas ahora que lo sé, me gustaría compartirlo.
En primera debes crear tu logo en formato ico, la dimensión estándar es 16x16 pixeles. Ahora que lo tienes, agregas una línea dentro de la etiqueta 'head' de tu documento html:

<link rel="shortcut icon" href="favicon.ico" />


El nombre estándar es favicon por el nombre "Favorites Icon", pero el archivo puede llamarse de la forma que tu quieras, también claramente puedes cambiar la ruta de tu favicon. Al parecer se soportan ya formatos de imágenes como gif o png.
Algunos CMS actuales ya buscan el iconito por defecto en la ruta donde se encuentra el documento index.

Si no tienen tiempo para crear su favicon pueden acceder a este sitio Web donde subes tu imagen y se te genera tu favicon.ico.

Saludos.

3 comentarios:

Saúl dijo...

vientos memín, gracias por enseñarme a hacer esto :p, yo te puedo enseñar como configurar un servidor DHCP jajaja

maruzcg dijo...

Hay un pequeño problemita. En el sitio de turing tú puedes ver el favicon solamente cuando estás en la página principal (index.php), pero si te remites a algún post o alguna de las secciones, el favicon se pierde... Me temo que te falta un href, porque me imagino que Jaws solamente lo encuentra por default en el index.php sin necesidad del href =(. La opción que trae sólo te pregunta si lo muestra o no, pero no te pide el path para establecerlo y mostrarlo en cualquier sección del sitio

Unknown dijo...

a mi me gustó mucho la aplicación web para hacer brillant buttons

http://www.lucazappa.com/brilliantMaker/buttonImage.php

a mi me gustó mucho uno que hice de la UAM Iztapalapa, de hecho está en turing

http://turing.izt.uam.mx/html/data/banners/uam-iztapalapa(3).png