CÓMO HACER UN FAVICON


Un “favicon” (imagino que es la contracción de favorite icon) es un iconito de 16×16 pìxeles que se coloca automáticamente cuando visitamos algunos sitios web como por ejemplo google (fijate en la barra de direcciones que sale un iconito con la G). La ventaja adicional es que también cuando tu guardas un favorito o marcador de la página que tiene el favicon, éste se guarda con dicha referencia y aparece en tu listado de favoritos, permitiendo que el usuario localice tu página más fácilmente.

Pues bien, este iconito no es que se coloque automáticamente por arte de magia (obviamente), sino que lo tienes que crear tú mismo y colocarlo en tu sitio, vamos a ver cómo crearlo:

En Photoshop:

1. Debes bajar el plugin que te permitirá, en Photoshop, guardar archivos como .ICO que son los necesarios para crear íconos. Descarga gratuitamente el plugin y luego cópialo en la carpeta “formatos de archivo” dentro de “plugins” (típicamente esta carpeta se encuentra en C:\Archivos de programa\Adobe\Photoshop CS\PlugIns\Formatos de archivo).
2. Reinicia tu Photoshop y ya permitirá leer y guardar archivos .ICO
3. Create un archivo nuevo de 16×16 pixeles y con fondo transparente.
4. Dibuja tu icono y guárdalo como favicon.ico en la carpeta raíz de tu sitio web.
5. Si lo prefieres también puedes redimensionar un dibujo o una foto que tengas a mayor tamaño, volviéndola de 16×16 (por el menú ‘Imagen’ opción ‘Tamaño de la imagen’).

En línea (si no tiene Photoshop):

1. Abres la página http://www.html-kit.com/favicon/
2. Presionas el botón de examinar que aparece al lado de ‘Source Image’ y seleccionas la imagen que quieres volver un ícono (si lo deseas puedes añadir un texto que se moverá animado).
3. Presionas el botón ‘Generate Favicon.ico’ y esperas a que se cargue de nuevo la página.
4. Una vez cargada, en la página aparece un botón ‘Download Favicon’, presiónalo y te descargará el ícono, con su versión animada e incluso las instrucciones de cómo insertarlo en tu página.
5. Si lo que deseas es dibujarlo puedes hacerlo en la página http://www.degraeve.com/favicon/

Cómo colocarlo en tu sitio

1. Subes el ícono a la raíz de tu sitio.
2. Le agregas, entre las etiquetas del head de tu página, lo siguiente instruccion entre < >
3. link rel=”shortcut icon” href=”http://www.tusitio.com/favicon.ico&#8221;

4. Y listo!!! ya puedes disfrutar de tener un sitio web con favicon…

Encuentra éste y otros tips sobre web en: http://www.conocimientovirtual.com

Esta entrada fue publicada en tips por kailep. Guarda el enlace permanente.

Acerca de kailep

soy kailep, tengo 21 y soy estudiante de la carrera de diseño gráfico en Morelia. Mayo 2010: soy kailep, tengo 23 y trabajo en una imprenta de Morelia. Junio 2010: soy kailep, tengo 23 y estoy estudiando en Digital Invaders. Octubre 2010: soy kailep, tengo 23 y estoy trabajando en una agencia en Saltillo. Marzo 2011: soy caleb, tengo 24 y soy Director de Arte en Monterrey. Julio 2012: soy caleb, tengo 25 y ahora soy Director Creativo en el DF Agosto 2013: soy caleb, tengo 26 y sigo de Director Creativo en el DF Septiembre 2014: soy caleb, tengo 27 y soy Director Creativo en Quito, Ecuador.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s