Favicon Transparente para tu Web

Actualmente la mayoria de sitios web contienen un favicon, por si eres de los pocos que no sabes que es, se trata del icono que muestran los navegadores en sus pestañas, el cual normalmente se trata de el logotipo que representa tu marca o tu pagina web.

Un favicon te puede servir para darle presencia y personalidad a tu página web y que los visitantes sean capaces de reconocer tu marca de forma fácil.

Para crear nuestro favicon usaremos una página web que nos permitira crearlo en base a una imagen, la cual puede tener los formatos: gif, jpg, png, y bmp.

Creando nuestro favicon

1. Acceder a tools.dynamicdrive.com/favicon

2. Cargamos nuestra imagen en el icono examinar y le damos a create icon

3. Ahora nos aparecera un preview de nuestro icono creado y le damos en descargar (Download FavIcon).

Descargar FavIcon

Ahora debemos colocar nuestro archivo favicon.ico en la raíz de nuestro sitio para que los navegadores lo reconozcan.
Adicionalmente y para asegurarnos que nuestro favicon sea reconocido por todos los navegadores añadiremos esta linea en nuestro head de nuestra página:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

La linea lo que hace referencia al favicon, la propiedad rel indica el tipo de relación que tiene mientras en la propiedad href le indicamos donde y cual es el nombre de nuestro favicon, la propiedad type indica el tipo de archivo relacionado.

Existen muchas herramientas en internet para crear nuestro favicon, algunas de ellas con ciertas limitaciones o un poco complicadas para usar, yo e elegido dynamicdrive.com porque nos permite crear nuestro favicon con traspareciencias que le dara un aspecto mas elegante a nuestro icono.

Como habrán visto esta página lo que nos permite es crear nuestro icono para nuestro sitio en base a una imagen no crear nuestro icono desde0 para crear nuestro icono debemos usar otras herramientas de edición de imagenes. Para nuestro ejemplo y nuestro icono e utilizado Inkscape el cual es una herramienta gratuita, despues mejorare nuestro icono y mostrare como hacerlo mediante dicho software, tu puedes hacer uso de cualquier editor de imagenes, como gimp, photoshop, kripta u algún otro software. 

Recuerda que si quieres crear un favicon con trasparencia debes guardar tu imagen en formato png y dejar las trasparencias que tu quieras

Nuestro Favicon Usado