Pequeñas Ayudas y Tutoriales: Genera Tu Propio Favicon.ico

sábado, 9 de agosto de 2008

Genera Tu Propio Favicon.ico - Icono de Favoritos

Como Crear, Poner y/o Cambiar un Favicon?

Favicon (abreviatura del inglés 'favorites icon'), también conocido como icono de página, es un icono asociado a un sitio web o página web en particular. Un diseñador web puede crear este icono y muchos navegadores gráficos pueden hacer uso de él.

Los navegadores que permiten esta función suelen mostrar el icono junto a la barra de direcciones, al lado del nombre del sitio en la lista de favoritos y al lado del título de la página en una inferfaz de navegación en pestañas.

La forma original de definir un favicon era poniendo un archivo llamado favicon.ico en el directorio raíz de un servidor web. Esto debería ser usado automáticamente en los favoritos de Internet Explorer. Después, sin embargo, se creó un sistema más flexible, usando HTML para indicar la localización de un icono para cada página. De esta manera, cualquier imagen de un tamaño apropiado (16×16 pixels o más) puede ser usada, y aunque todavía muchos usan el formato ICO, otros navegadores ahora también soportan los formatos de imágen gráficos animados GIF y PNG.

Los navegadores más modernos implementan ambos métodos.

Por lo tanto si nosotros quisieramos agregar un nuevo Favicon (FI) a nuestro Blog o Website, agregariamos entre <head> y </head>

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>

[Si el Archivo "favicon.ico" se encuentra en el Directorio raíz]

o

<link rel="shortcut icon" href="link.com/favicon.ico" type="image/x-icon"/>

[Si el Archivo se encuentra Fuera del Directorio raíz]

Ahora Veamos como Agregar un FavIcon Animado:

GIF) <link rel="icon" href="/favicon.gif" type="image/gif"/>

PNG) <link rel="icon" href="/favicon.png" type="image/png"/>

Dependiendo del tipo de imagen que deseemos usar, tendremos que tener en cuenta las posibilidades entre tamaño (en pixels) y colores que podemos utilizar:


ICO
Tamaño: 16×16 / 32×32 / 64×64 / 128×128
Colores: 16,256,16 millones
GIF
Tamaño: 16×16
Colores: 256
PNG
Tamaño: 16×16
Colores: Desde 256 a 24-bit. 
Herramienta para Generar FavIcon tanto fijos como animados: