Cómo hacer un FAVICON.ICO para tu web
3,141 LecturasAntes de entrar de lleno en el tema, les comento que siempre me pregunté como se hacía para
que apareciera un ícono en el espacio del navegador donde se escribe la dirección de un
sitio. Lo supe hasta que recibí este mensaje, muy interesante por cierto y que comparto con
todos ustedes, si desean ponerlo en práctica en sus sitios.
¿Qué es el FAVICON.ICO?
Por su composición en inglés, FAVICON significa Favorites icon, y no es más que el gráfico
diminuto que aparece en la parte superior izquierda al lado de la URL de tu barra de
direcciones. Esa imagen quedará igualmente almacenada en la memoria caché de la máquina
cliente para identificar tu sitio en, por ejemplo, los favoritos de tu navegador.
Aunque tanto IExplorer como Firefox tienen comportamientos muy similares, en lo que respecta
al favicon pueden actuar de manera diferente. Igualmente, uno de lo problemas principales al
mostrar apropiadamente el favicon son las versiones de los navegadores.
El hecho que aparezca el logo de tu sitio, o un identificador del mismo, le da una pizca
mayor de profesionalismo a tu página web y de manera constante ayuda a tu visitante a
identificar con facilidad tu sitio. He allí su importancia.
¿Cómo hago un FAVICON.ICO?
De manera general, el gráfico favicon es un cuadrado de 16 x 16 pixeles.
Es recomendable utilizar estas medidas para tener la certeza de que se ve apropidamente en
los navegadores más populares.
En este boletín te mencionaremos dos de las muchas formas de obtener una imagen favicon.
En la primera forma asumimos que tienes Photoshop en tu máquina.
1. Descarga el plugin de Photoshop que te permitirá crear imagenes con extensión ICO de la
siguiente liga ( enlace, link ):
DESCARGAR PLUGIN DE PHOTOSHOP
2. Desempaca el archivo ZIP.
3. Coloca el archivo ICOFormat.8bi dentro de la carpeta de:
C:\Archivos de programa\Adobe\Photoshop\Pluings\Formatos de archivos
(o la ruta donde tengas instalado Photoshop en tu máquina)
4. Abre Photoshop y al tratar de guardar en los tipos de archivos aparecerá la opción de
guardar con la extensión ICO. Esa es la que te permite guardar el archivo favicon.ico
La segunda forma es aún más simple, aunque tienes menos control sobre el resultado.
Utilizala herramienta en línea de fabricación de favicons que se encuentra en
El resultado que se obtiene es bastante decente y extremadamente fácil de usar. Esta sin
duda puede ser tu opción.
Cómo coloco mi FAVICON.ICO en mi web?
Sigue las siguientes indicaciones para colocar apropiadamente tu gráfico ICO en la web.
1. Coloca la imagen favicon.ico en el directorio raíz de tu web.
2. Dentro del HEAD de la página principal copia el siguiente código:
link rel=”icon” href=”http://www.tudominio.com/favicon.ico” type=”image/x-icon”>
llink rel=”shortcut icon” href=”http://www.tudominio.com/favicon.ico” type=”image/x-icon”>
( colocar < antes de link en cada línea ) Aunque en teoría ambas líneas hacen lo mismo, hemos notado que algunos navegadores reponden mejor a una que a otra. No ocasiona ningún daño tener ambas y tu favicon se mostrará conmayor seguridad en más navegadores.
3. 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.
4. Es altamente probable que tan pronto lo coloques no aparezca en tu página. Si estás
usando IExplorer ciérralo y utiliza Firefox o cualquier otro navegador. Es recomendable que
limpies la memoria caché de tu máquina en ambos navegadores, o los que tengas, y sólo
entonces verás tu favicon adornando e identificando tu página web.
Para información sobre como limpiar la memoria caché, consulta el boletín sobre el tema en
www.cafetero100.info
Fuente: http://www.cafetero100.com
