Incluir un favicon en tu pagina web!!!

Hola a todos como siempre es bueno contestar a las dudas hoy les dejo una sencilla forma de incluir un favicon en tu pagina web.

Los pasos a seguir son estos:

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 16×16 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 reponden 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.

Categorías

About Gustavo Martinez

Phd. en computación, Senior Bloguer, Amante de la tecnología móvil, aplicaciones web, educación online.

Deja un comentario

Por favor, usa tu nombre real en vez de un nick.

Time limit is exhausted. Please reload CAPTCHA.