Cómo crear fav icons para tu Website

Haz visto esos pequeños iconos que salen en las barra de direcciones de tu explorador? Pues bien, aqui te enseñamos como crear uno para tu web.

Haz visto esos pequeños iconos que salen en las barra de direcciones de tu explorador? Pues bien, aqui te enseñamos como crear uno para tu web.

¿Qué es un favicon?

Un favicon es una pequeña imagen que se incluye en la barra de dirección del explorador, y que identifica a tu página. Este refleja como se ve tu Website y hace que el usuario se familiarice más con tu Web. Este también se graba si guardas una página en favoritos, de ahí su nombre, y asi la puedes encontrar más fácil en otra ocasión.

Imagen 2 (muy grande)

¿Como poner un favicon en mi Web?

Lo primero que debes tener definido es lo que vas a poner en tu favicon. Puedes poner una imagen que quieras o algun iconito que represente lo que presentas en tu web. Debe tener un tamaño de 16x16 pixeles aproximadamente.

Luego de que lo tengas hecho solo tienes que ponerlo en tu website de la siguiente manera:

1. Coloca el icono en el root de tu Web, así el explorador lo detectará ahi, ya que el busca el ícono automáticamente en este directorio (deberás tener una extensión /favicon.ico, ya que es como un estándar).

2. Puedes poner tambien el siguiente código en la parte del header de tu web:

Code:
Tip
Incluye diferentes resoluciones para tu favicon, por ej: 16x16, 128x128 etc, de esta manera te aseguras de que le salga a las personas con diferente resolución.

Creando tu propia imagen favicon

Bueno en esta parte te voy a enseñar a hacer tu propio favicon con ADobe Pdotoshop. Lo primero que debes hacer es bajar el plugin para hacer iconos de photoshop. Lo puedes descargar aquí.

Es muy fácil, después de tener el plugin solo tienes que hacer tu imagen en un canvas de 16*16 px, bueno, como es muy pequeño puedes hacer tu diseño en un canvas mas grande y luego reducirlo a 16*16. En este caso yo lo que hice fue darle zoom a la imagen para trabajar mejor.



Luego (como tienes el plugin instalado) pues solo tienes que grabarlo como un icono de la siguiente manera:

Links

Si quieres inspirarte puedes visitar la siguiente web donde podrás ver favicons que se han diseñado para diferentes páginas Web: MpP Favicon Gallery

O si eres medio vaguito y quieres generar tu favicon poniendo solo la imagen y dandole a un boton, pues entra a esta web: FavIcon from Pics