Los ‘favicon’s son los pequeños íconos que aparecen al lado de la URL de tu navegador o en la lista de favoritos/marcadores (en Internet Explorer 6 solo aparece en la lista de favoritos). Como pueden ver, hoy agregué uno a este blog:
No me resultó muy fácil encontrar algún manual completo en español de cómo crear estos íconos, así que decidí escribir uno yo mismo. Antes de empezar, van estas notas previas:
- Para poder insertar un favicon en una página/blog deben poder editar el código HTML de la página o plantilla. Los que tienen blogs alojados en Wordpress.com no van a poder realizar esto
- Yo utilicé Photoshop CS3 para crear el favicon, aunque cualquier versión de este programa debe servir
Estos íconos, deberán ser de tamaño 16×16 píxeles, aunque para hacer el diseño más fácil, primero diseñamos uno de 64×64 y luego lo achicamos. Comencemos…
En Photoshop, crean una imagen de 64 x 64 píxeles. Usando sus mejores habilidades de artísticas, diseñan el ícono. Recordar que luego van a achicar la imagen, por lo tanto, traten de que el diseño sea lo más “limpio” posible. Cuando ya esté terminado guardan el archivo en formato PSD para respaldarlo antes de achicar el ícono. Luego van a Image->Image Size (en español: Imagen -> Tamaño de Imagen). Le cambian el tamaño a 16 x 16 con la opción ‘Bubic Sharper (best for reduction)‘:
Luego de achicarlo, lo guardan con el formato PNG.
Ahora sólo queda insertarlo en el sitio web. Para poder realizar esto, debemos subir el favicon, preferentemente en la raíz del directorio donde esté alojado el sitio/blog. Para los que no tienen acceso a la raíz (por ejemplo los usuarios de Blogger), lo más fácil es subir el favicon a algún hosting de imágenes. Yo recomiendo tinypic.com. Luego de subirla, copian la url de la imagen (en tinipic es la url marcada como Direct Link for Layouts).
Ahora lo único que falta es agregar una simple línea en el código HTML de la página o blog. Los usuarios de Blogger, entren en Plantilla->Edición de HTML.
Debajo de la etiqueta <head> inserten este código, donde [URL] es la dirección donde se encuentra la imagen:
<link href=’[URL]‘ rel=’Shortcut Icon’ type=’image/x-icon’/>
Por ejemplo, en mi caso la etiqueta sería:
<link href=’http://i16.tinypic.com/6owr7z8.png’ rel=’Shortcut Icon’ type=’image/x-icon’/>
Si quieren pueden probar insertando esta etiqueta y verificar que realmente funciona.
Si todo funcionó correctamente, al actualizar/recargar el sitio, su favicon debería aparecer. Espero que les haya servido esta guía, y no duden en preguntar cualquier duda por más simple que parezca - a veces no me suelo explicar bien, y esta guía no debe ser la excepción.
Anuncios: tarot desguace de coches
December 19th, 2007 a las 8:20 pm
Eso ta bueno. Ahora, si no querés quemarte la cabeza con photoshop y tenés una imagen que te gusta, y tenés ganas de poner un nuevo botón dentro de tu blog que sirva para algo, está el servicio que da ésta web http://www.myfavatar.com/
De lo único que te ahorrás es del pasaje por photoshop.