Crea un Favicon, el icono de tu web

Diseño Web, Diseño gráfico, Html, Introducción Dejar un comentario

Los detalles, a veces inapreciables, de cualquier desarrollo web, ofrecen en ocasiones el carácter diferenciador, que dice mucho del diseñador web que realiza el producto. Uno de estos detalles es el favicon que aparece en la barra de titulo, a veces en la barra de direcciones de algunos navegadores web y es el icono que se muestra al añadir la página a los favoritos.

favicon

Existen distintos tipos de herramientas webs gratuitas para generar favicons o programas para desarrollar el diseño en el ordenador, podrás definirlo según el tamaño deseado 16×16, 32×32, 48×48, 64×64 o 128×128, incluso algunos ofrecen la posibilidad de crear iconos animados.

favicon.cc

Favicon.cc es mi aplicación web favorita para editar de pixels on line, con todo lo necesario para crear el favicon al tamaño deseado incluso darle animación fotograma a fotograma, para que tu página web tenga un toque único. Si no tienes un día muy inspirado también puedes ver, editar o descargar los trabajos compartidos por la comunidad. Los más votados están en la sección del top. Si prefieres iniciar el trabajo desde una imagen, jpg, gif, png, bmp, ico o cur, como máximo de 5 MB, puedes subirla desde la opción “import image” redimensionandola proporcionalmente o ajustándola.

genfavicon

Un sistema parecido puedes probar en genfavicon que permite en tres sencillos pasos crear un favicon, sube una imagen jpeg, gif, png como máximo de 4 Mb, selecciona el area a capturar, escoge el tamaño del icono (16, 32, 48, 64 o 128 pixels), previsualiza el resultado y descargalo. Del generador de faviconblog me gusta su interesante opción de Scrolling Text.

GFIE Pro

Si no estas conectado y quieres tener una aplicación portátil para llevar en una memoria y usar en cualquier lugar Greenfish Icon Editor (GFIE) Pro es el editor gratuito de iconos y cursores, estáticos o animados. Ofrece filtros de alta calidad como el biselado, sombra o iluminación que permiten conseguir un aspecto profesional. Permite crear iconos a partir de otras imágenes y es compatible con la edición de cursores animados o la gestión de librerías de iconos. Ofrece un interface limpio, personalizable y en varios idiomas, lo que lo hace fácil de usar y rápido de aprender.

Una vez que se ha creado el favicon.ico, no olvides que hay que subirlo al directorio raíz de la página web, con el siguiente código en la cabecera (head) de tu página html:

<link rel="shortcut icon" href="/favicon.ico" />

Blog Widget by LinkWithin
¿Te gustó?, VOTA el post. SÍGUEME por Twitter, Facebook o RSS.

Sigue leyendo:

Un Trackback

2 Comentarios

  1. Gravatar 16 junio 2011, 10:21
    cgnauta: Reply to this comment

    Yo te recomiendo Irfanview que es el que hace un favicon más compatible con Internet Explorer.

    Por cierto pancho, en Chrome no se ve tu favicon quizás deberías ponerlo en absolutas.

  2. Gravatar 17 junio 2011, 9:40
    Pancho opcionweb: Reply to this comment

    Que raro, yo si lo veo en Chrome, haré algunas pruebas. Gracias por el chivatazo.
    Un saludo, nos leemos.

Escribe tu comentario o... ¡salta!

Etiquetas XHTML permitidas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Entradas RSS Comentarios RSS Acceder Subir
twitter facebook Rss mail rssSígueme en Google Currents