Clicky

Google cambia de favicon

Cómo hacer un favicon para tu pagina web

Desde el pasado viernes día 09/01/2009 Google navega en la red con un nuevo logo para su favicon.ico, cambiando el que tenía desde mayo (la g minúscula de su logotipo).

Parece que el título de este archivo proviene de una composición en inglés, fav-icon, que significa Favorites icon, y no es más que el gráfico diminuto y personalizado que aparece en la parte superior izquierda al lado de la URL de la barra de direcciones de tu navegador cuando visitas una página.

La vez anterior explicaban el cambio como una mejora de imagen para nuevas plataformas como el iPhone y otros dispositivos móviles. Además de asimilarlo con un pez (anunciaban su lanzamiento en el blog de Google con este titular: "One Fish, Two Fish, Red Fish, Blue Fish" (Un pez, dos peces, pez rojo, pez azul).

Esta vez  han hecho este comunicado: "Google's new favicon", aunque algunos comentarios por internet indican que pueda ser una compaginación con el logotipo de su navegador Chrome, en realidad Marissa Mayer  dice que ha sido inspirado del enviado por André Resende, un estudiante de ciencias de la computación en la Universidad de Campinas en Brasil.  La colocación de la "g" en un fondo blanco es muy reconocible y atractivo, mientras que parece capturar la esencia de Google, utilizando también los colores corporativos de la compañía (azul, rojo, amarillo y verde).
Aquí debajo os dejo las imágenes de los cambios:

Logos de google antiguos
favico.ico antiguo de google
nuevo favicon de google


Se puede ver la nueva imagen 16x16px en este enlace: "Nuevo favicon de Google"

Pero ,¿cómo podemos hacer un favicon para nuestras páginas? Sigamos estos pasos:


1) Primero creamos una imagen, que se identifique con el diseño corporativo de nuestra página, con cualquier herramienta de edición gráfica (Photoshop, Gimp...) con el fondo transparente (mejor en .gif que conserva las capas), le damos el tamaño de 16x16 píxeles, lo guardamos en formato .ico (ojo NO .bmp; NO .gif; NO .jgp). Photoshop tiene un plugin que tienes que instalar y en Gimp viene predeterminado. En webadictos tienes una lista de programas que convierten tu imagen al formato .ico

Nómbrale favicon.ico (En realidad vale cualquier nombre siempre que esté en el formato .ico).

Hay en la web diversos generadores de favicon online que te transforman cualquier imagen en un archivo listo para ser usado. A mi el que más me gusta es este: "FavIcon from Pics" de Chami, que incluso te genera uno animado, donde te lo puedes descargar).

Una vez generado solo tienes que seguir con el paso:

2) Sube mediante ftp el archivo favicon.ico al directorio raíz de tu web.

Entre las etiquetas <HEAD> y </HEAD> de la página principal o de tu plantilla, copia las siguientes líneas de código:

<link rel="icon" href="/http://www.tudominio.com/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/http://www.tudominio.com/favicon.ico" type="image/x-icon">

Ambas líneas hacen lo mismo, pero algunos navegadores responden mejor a una que a otra. No ocasiona ningún daño tener ambas y tu favicon se mostrará con mayor seguridad en más navegadores.

Sólo colócalo en el <HEAD> de la página principal. No es necesario que lo coloques en ningún otro lugar en tu página. Automáticamente debe aparecer para tus otras páginas. Si tienes subdirectorios con diferentes contenidos y quieres diferenciar su favicon sigue el procedimiento colocando el archivo en la carpeta correspondiente y dándole la ruta en las líneas <link> de arriba. Estas estarán colocadas en la plantilla que muestra esa página determinada.

También es altamente probable que tan pronto lo coloques no aparezca en tu página, así que no te pongas nervioso. Si estás usando IExplorer limpia los archivos temporales del navegador(cache) y ciérralo. Vuélvelo ha abrir y conectándote a tu página debería aparecer. Hazlo de igual manera si utilizas Firefox o cualquier otro navegador. Es muy recomendable que limpies la memoria caché de tu máquina en los navegadores pues sólo entonces verás tu favicon adornando e identificando tu página web.

Jesus_Caceres