Crear y utilizar Favicon para tu web

mayo 24, 2010 | En: Blog, Diseño, Internet, Manuales, Web

Favicon, del inglés favorites icon (icono de favoritos), también conocido como icono de página, es aquella pequeña imagen que aparece en algunos navegadores junto a la dirección de una página web. Los navegadores gráficos suelen mostrar el favicon de la página visitada, si ésta lo posee, en la barra de direcciones y en el encabezado de la pestaña correspondiente.

Ejemplo:

Vista del favicon de mi blog en la barra de dirección, en favoritos, y en la pestaña.

Características

Dimensiones 16×16px
16 colores (4 bits)
Formato .ico

En algunos navegadores puedes usar iconos de mayor tamaño y más colores, también otros formatos como .gif o .png, pero si quieres que tu icono funcione correctamente en cualquier navegador, utiliza el tamaño de 16×16px con 16 colores y en formato .ico.

Como hacer uno para tu web
Hay varias páginas web que te generan ya el favicon en formato .ico, y una de ellas, que fue la que yo utilizé es: http://www.favicon.cc/

Puedes hacerlo de dos formas:

Tú mismo puedes dibujarte el favicon a tu gusto y te va mostrando como quedaría en la barra de direcciones y pestaña.

Vista de como va quedando el favicon dibujado.
La otra opción es subir una imagen y te generará el favicon, puedes dejar que ajuste automáticamente el favicon o que sea la misma imagen reducida a 16×16px de tamaño.

Formulario de la imagen que subirás para generar el favicon.

Generadores de Favicon online:

favicon.ico Generator (RECOMENDABLE)
FavIcon from Pics
Favicon Editor
Getfavicon
Favicon Generator

Integrar en nuestra web
Subimos el favicon al servidor y copiamos la ruta, por ejemplo: http://blog.pdropablo.net/favicon.ico

Modificar el HTML y ponemos el siguiente código dentro de la etiquetas <head> y </head>:

<link rel="shortcut icon" href="http://blog.pdropablo.net/favicon.ico" />

Recordad cambiar mi ruta de ejemplo por la vuestra, y recomiendo que siempre salga la ruta de la web: http://www.tuweb.com/favicon.ico, así no tendrás problema de que te desaparezca el favicon en alguna página de tu web.

Y listo, ya tendríamos nuestro favicon instalado en nuestra página web