El favicon (abreviatura del inglés 'favorites icon') es ese icono que aparece a la izquierda junto a la url cuando visitamos algunos sitios web. Además de “decorar”, el favicon ayuda a los lectores a reconocer y localizar más fácilmente la página entre sus marcadores. Es una buena forma de marketing.
El favicon debe ser un icono de 16×16 píxeles, en 16 colores y en formato .ico (soportado por todos los navegadores) .png o .gif (soportado sólo por los navegadores más modernos). Si son de resolución mayor, los navegadores lo reajustan perdiendo algo de la calidad original.
Para crear el nuestro lo que tenemos que hacer es:
1. Crear nuestro icono, para ello puedes usar programas de diseño como Adobe Photoshop, pero también existen en la web diferentes Generadores de favicon, es decir, que cualquier imagen la convierten a las medidas del favicon. El más completo es FavIcon from Pics que permite crear faviconos estáticos y animados, incluso con texto.
Lo único que tienes que hacer es cargar la imagen y dar clic en "generate FavIcon.ico" (aparece una vista previa, si no te gusta puedes crear otro) Esto va a generar un archivo Zip que debes guardar en tu PC. Al descomprimirlo saldrán 3 archivos: un icono (que por defecto denominan favicon.ico), un archivo de texto ReadMe y una foto del icono, llamada prewiev_16x16.png.
2. Ahora debemos subir la imagen a un servidor. Aunque en algunas webs indican que la imagen debe ser .ico yo prefiero usar .png ya que es difícil encontrar un hosting de imágenes gratuito que acepte el formato .ico (uno de ellos es yourupload ), pero yo prefiero usar imageshack con imágenes .png. Una vez que subas el archivo te va a dar como resultado la direccion URL del icono por ejemplo, http://img84.imageshack.us/img84/8977/preview16x16.png
3. ¿Cómo insertar el favicon?
Colocar el favicon en tu sitio es tan simple como ir a tu panel - "Plantilla - Edicion HTML" e introducir la siguiente línea de código dentro del header (entre <head> y </head>) de tu sitio
<link href='DIRECCION WEB FOTO' rel='shortcut icon' type='image/png'/>
Guardar lo cambios en la plantilla y no debería fallar.
<link href='DIRECCION WEB FOTO' rel='shortcut icon' type='image/png'/>
Guardar lo cambios en la plantilla y no debería fallar.
OBSERVACIÓN:
Hay que tener en cuenta que algunos navegadores (sobretodo Internet Explorer) no tienen compatibilidad con esta función, por lo que dependiendo del browser, se verá el icono o no.
Entradas
No hay comentarios:
Publicar un comentario