Creando un ‘Shortcut Icon’
Publicado por Guill3m el 9 de Julio de 2006 en Diseño Web, TutorialAntes de nada hay que aclarir que és un Shortcut Icon, esto és la imágen que encontramos al lado de la dirección web en nuestro navegador junto a la dirección o su nombre en nuestros favoritos (
). Nadie me ha pedido que haga este “tutorial”, ni tampoco me han preguntado como se hace, pero como tengo ganas de escribir algo, ¿porque no algo útil?. Me he decidido a escribir sobre esto en concreto puesto que he visto en muchos blogs/webs no hay (o tienen el mismo que les venia con el theme de Wordpress) y realmente es algo muy sencillo y rápido de hacer (y es bastante cómodo a la hora de diferenciar los diferentes enlaces de nuestros favoritos).
Para esto necesitamos un editor de imágenes (Photoshop, Gimp, Paint Shop Pro…) y, si queremos, un editor de iconos, pero este último es opcional, aquí vamos a ver como hacerlo a partir de una imágen. El icono que vamos a crear va a tener un tamaño final de 16*16 píxeles, pero como este es un tamaño muy pequeño, trabajaremos sobre una imágen cuadrada de más tamaño y luego le reduciremos el tamaño.
Vamos a ponernos manos a la obra, creamos una nueva imágen de 300*300 píxeles, a una resolución de 72 píxeles/pulgada y en color RGB (para web siempre usaremos RGB, el CMYK es para imprenta). Después hacemos el dibujo que queramos (si hay logo en la web es lo más recomendable, y sino os inventais algo…) y cuando hayamos acabado (después de guardar, por si quisieramos editarlo otro día) le cambiamos el tamaño a la imágen (en Photoshop és Imágen>Tamaño de Imágen…) a 16*16 píxeles y lo guardamos como GIF ó JPG (con compresión 8 va bién, incluso sobra). Si alguien quiere hacerlo con un icono, solo tendria que transformar la imágen que acabamos de hacer a *.ico con el conversor/editor pertinente y listos. Bueno, hasta ahora nada del otro mundo, realmente lo que es interesante es lo siguente, para poder insertarlo en la página, debemos insertar esta línea de código dentro del head, es decir, entre el <head> y el </head>:
<link rel="shortcut icon" xhref="http://www.tuweb.com/imagenes/icono.gif />
No se porque me añade una x donde yo no le he dicho, delande del href no va ninguna x, se ha colado y no se quitarla, por si acaso no sabeis lo que quiero decir, aquí lo teneis en imágen.
¿Facilito no? ;) pues ahora quiero ver como lo haceis vosotros.
Hay 5 Comentarios to “Creando un ‘Shortcut Icon’”
- 1 Pingback on 5 de Octubre de 2007 a las 22:55
Deja tu Comentario!
Tienes que identificarte para dejar un comentario.
Buscar
Entradas Relacionadas
- Enviar a GMail - ...
- Cambio de Feeds - ...
Este blog está publicado bajo una licencia de Creative Commons.
OLEEEE!!
pensaba que con blogger no saldria, pero mira que estrellita azul más mona :D
Voy a intentar hacer algo mejor cuando tenga un poco mas de tiempo, graciaaaas!!!
a ver si pones mas truquitos de estos.. :D
Vaya Gina, me alegro de que te haya servido, durante el verano no tengo mucho tiempo (aproximadamente 2 ó 3 horas diarias para hacer todo lo que quiero hacer en mi tiempo libre) así que no puedo postear demasiado, pero mi intención es hacer más “tutoriales” de estos, aunque no es fácil saber que elegir, estuve apunto cuando ya tenia hecho este de quitarlo, puesto que es demasiado sencillo (una simple linia de código), pero como ya lo tenia… pero si te ha servido… GENIAL!
PD:Ahora solo te falta pasarte a Wordpress y añadir los asides :P jejej