Cómo hacer un FAVICON.ICO para tu web

Antes 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.

Favicon de Blog Guatemala

¿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

GENERADOR DE FAVICONS

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

admin

Algo de programación en Access, diseño web y principalmente electrónica.

You may also like...

7 Responses

  1. carlos ache dice:

    go..! buscando te encontre… no tengo web todavía… pero voy hacer el intento de crearlo… después te cuento si me salio bien gracias
    soy un novato en esto gracias lo intentareeeeeeeeeee 🙁 good luck…

  2. karina dice:

    en que otra aplicacion se puede obtener una imagen con la extencion ico

  3. admin dice:

    Puedes utilizar los siguientes formatos: gif, jpg, png, y bmp.
    Hay sitios que generan el favicon animado ( gif ), busca generador favicon animado.

    Saludos.

  4. pablo dice:

    Creo que falta algo de código…¿no debería empezar por “

  5. recuweb dice:

    Aqui teneis otro generador de favicon online

    http://herramientas.recuweb.com/favicon/

    Espero que os sirva,

    Saludos

  6. chozov dice:

    Tengo un favicon en mi pagina web, pero si le cambio la imagen, quiero decir que subo una ico diferente con el mismo nombre(favicon) no se quita el que tenia antes.
    Otro problema: solo se ve en firefox

  7. Hugo dice:

    chozov:
    Como todo lo que reescribas, el que tienes en este momento ya no se verá al subir el otro. Sobre que únicamente se visualiza en Firefox, prueba limpiar el historial en Explorer, o sea archivos temporales, etc.

    Saludos cordiales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *