Tutorial: favicons
He hecho una recopilación de información sobre el tema de los favicons.
¿Qué es un favicon?
Es una pequeña imagen que aparece normalmente a la izquierda de la dirección (dependiendo del navegador que se utilice).
¿Para que sirve tener un favicon en tu web/blog?
Realmente es solo para el tema de diseño y para que los usuarios puedan identificar mejor tu web/blog si utilizan un navegador con pestañas.
- ¿Qué formato debe tener esta imagen?
- La imagen debería esta guardada en formato ICO. ICO es un formato propietario de Microsoft para almacenar varios ficheros BMP (bitmaps) juntos, y normalmente se utiliza para contener iconos de escritorio de Microsoft Windows. Lo más conservador es que el icono tenga unas dimensiones de 16×16 píxeles y 16 colores (usando la paleta estándar de 16 colores de Windows), pero teniendo en cuenta que los iconos se pueden arrastrar al escritorio como accesos directos, y que la mayoría de la gente navega con 256 colores o más, se puede usar perfectamente un icono de 32×32 y 256 colores. De hecho, como el formato ICO puede contener varios iconos, se pueden meter cuatro iconos dentro de un mismo fichero favicon.ico: 16×16x16 colores, 32×32x16 colores, 16×16x256 colores y 32×32x256 colores, y Windows se encargará de escoger el más apropiado para cada contexto (al menos en teoría).
- Pasos para crear un favicon:
- Necesitas descargar un programa con el que puedas guardar la imagen en formato .ico. Lista de programas.
- También será necesario un editor web, el mismo bloc de notas puede valer. Lista de editores HTML.
- Por último necesitaras un programa para subir el archivo a tu web, tal y como hace para subir las páginas. Personalmente recomiendo guardar el favicon.ico en el directorio raíz de tu web/blog para asi evitar los posibles problemas de visualización con alguno navegadores webs.
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 16×16, con 16 colores y en formato ICO.
Alternativas:
Hay otros caminos que pueden facilitar mucho la labor de crear el favicon.
Una de la alternativas que yo recomiendo es la de crearlo mediante una de las tantas webs que hay cuya función es la de transformar la extensión de una imagen a .ico.
Listados de estas webs:
- FavIcon Generator - Convierte imágen en ícono o favicon.
- Favicon.ico Generator - Dibuja tu favicon en un recuadro de 16 x 16 píxeles.
- Online fav-icon creator - Debes crear tu favicon en un espacio reducido.
- Favicon Generator - Convierte imágen en ícono o favicon.
- Favicon Editor - Crea o convierte una imágen en ícono o favicon.
- Favicon from Pics - Crea favicon desde tus imágenes.
- 256 Pixel - Diseña tu favicon en un espacio reducido.
La otra alternativa es la de usar un favicon ya creado. En Favourite Favicons puedes encontrar una gran variedad de ellos.
—–
Páginas utilizadas: Favicon.net | TecnoBita.