El archivo favicon.ico es el típico icono que veis en el navegador cuando visitáis una página web. Por ejemplo en este blog es una H azul.
Bueno, no siempre se ve este icono y depende del navegador que se utilice el que se vea o no.
Pero del lado del diseño de la página web, podemos asegurar totalmente que este icono se vea bien en los navegadores.
Para ello, editamos nuestra página web, y en la etiqueta head añadimos esto:
<link type=”image/x-icon” href=”http://dominio.com/favicon.ico” rel=”icon” />
<link type=”image/x-icon” href=”http://dominio.com/favicon.ico” rel=”shortcut icon” />
Donde aparece: http://dominio.com/favicon.ico debería ser la ruta completa de vuestro favicon.ico.
Favicon2dots.com es un servicio online que permite generar nuestros favicon con una apariencia 3D.
Cada imagen generada permite visualizar cada pixel que forma al icono y su pertinente color. Por ejemplo, para renovar el icono de este blog, he utilizado esta herramienta.
¿Pero que es un favicon?
La definición via Wikipedia es la siguiente:
Favicon (término reducido de la palabra inglesa Favorites icon), también conocido como icono de página, es un icono asociado a una página web concreta. Un diseñador web puede crear este icono y muchos navegadores gráficos pueden usarlos. Los navegadores que permiten esta función suelen mostrar el icono junto a la barra de direcciones, al lado del nombre de la página web en la lista de favoritos y en los títulos de las páginas.
Bueno al lio. Si queremos tener en nuestra página un favicon, como el que tengo yo:
Lo más rápido y fácil es irnos a la siguiente página:
http://www.html-kit.com/favicon/
Subimos la imagen a generar, si queremos añadir un texto lo añadimos y le damos a Generate Favicon.ico
A continuación hacemos click en download.
Nos descargamos el archivo comprimido y lo subimos via ftp al home de tu página.
Finalmente añadimos en el head (cabecera) de la página el siguiente código :
< link rel=”icon” href=”rutacompleta/animated_favicon1.gif” type=”image/gif” >
Si queremos que el icono sea estático añadimos solamente esto :
< link rel=”shortcut icon” href=”favicon.ico” >
¿Has pensado alguna vez, que utilizando JavaScript se puede crear un favicon distinto para cada página de un Sitio Web? Por si no lo sabes, un favicon es el icono que esta asociado a la bookmark de un sitio web y que algunas veces suele acompañar a la url en la barra de direcciones… si usas firefox u Opera te habrás percatado de su existencia.
¿Porqué un favicón dinámico? La idea de tener un favicon dinámico (cambiante) es la de proporcionar a tus lectores, por ejemplo, la posibilidad de identificar fácilmente un artículo, noticia ó una página en particular de todo tu sitio web.
Esto es lo que pensó Michael Mahemoff al crear una pequeña librería JavaScript llamada favicon.js. Y en su artículo Dynamic Favicons explica como usarla en nuestro website.
Y creó dos ejemplos para verlo en funcionamiento:
- Ejemplo 1: El favicon cambia cada vez que se escribe en el formulario.
- Ejemplo 2: El favicon cambia cada 5 segundos.
Visto aqui.
Comentarios recientes