jueves, 26 de agosto de 2010

Favicon?

Me encanta perder el tiempo aquí (?) lolololol. Por cierto, hoy falté a un taller/club (o como le digan) por un maldito dolor de cabeza, que todavía tengo Dx
Quería comentarles (debo subir cosas coherentes al blog...) sobre el famoso Favicon, algo que encontré hace tiempo y ahora decidí darles un tutorial de como colocarlo. Una breve definición: Es una pequeña imagen asociada con una página o sitio web en particular, generalmente se muestra al lado izquierdo antes de la dirección web en la barra de direcciones.

Comenzamos:
1-. Primero se debe tener una Imagen de 16x16 o 32x32, si no la tienes, puedes crearla con cualquier editor, pero que tengan esas dimensiones. Recuerda que si quieres una Imagen sin el fondo blanco, el formato en el que debes guardar la Imagen es .png

2-. Encontrar un Host de Imagenes para subirla y convertirla a Icon. (Extencion Obligatoria del Favicon). Por ejemplo: Iconverticons. Luego la descargas como .ico, ya llevas un buen paso terminado

3-. Ahora nos iremos a PicPanda, un servidor gratuito donde alojaremos nuestro archivo .ico. Esta pagina nos dará cuatro Links respectivos del archivo, con los cuales podremos publicar nuestro Favicon donde nos plazca

4.- En el Host, solo tendremos pendiente el que dice "HotLink for Forums" y lo copiaremos. Abriremos un block de notas, wordpad, microsoft word o cualquier editor de texto y pegaremos allí el Link.

5-.Ahora eliminaremos todo lo marcado en rojo de aquel texto: [URL=http://picpanda.com/][IMG]http://picpanda.com/images/qrss5xpcwfglw9o83ce9.jpg[/IMG][/URL]

Quedaría algo así: http://picpanda.com/images/qrss5xpcwfglw9o83ce9.jpg

6,- Copiamos y pegamos este código en el mismo bloc de notas u otro cualquiera:
<link href="URL" rel="shortcut icon" type="image/x-icon"/>.
Luego agregamos el link de la imagen entre las comillas y encima de la palabra "URL"

Quedaría algo así: <link href="http://picpanda.com/images/qrss5xpcwfglw9o83ce9.jpg" rel="shortcut icon" type="image/x-icon"/>

7-.  Por ultimo copiaremos todo el texto y lo colocaremos antes de "</head>" desde Diseño -> HTML
(Pueden usar el CTRL+F para hacer una busqueda mas rápida del código)

8-. ¡Y listo! ¡Ya tienes tu Favicon hecho!

No hay comentarios :

Publicar un comentario