11 de abril de 2011

Como crear un Favicon


En esta artículo vamos a crea un icono “favicon”, para que aparezca en la barra de dirección del navegador con el logotipo de nuestro sitio Web dando le un aspecto profesional y corporativo, además cuando lo agreguen a favoritos aparecerá este icono al lado de la URL.

Para crear una imagen .ico podemos usar un programa como puede ser: Gimp o cualquier otro programa que nos permita crear imágenes con esta extensión (*.ico).

Pero en este artículo vamos hacer un icono para ponerlo en nuestro sitio Web de una forma más sencilla sin necesidad de saber usar ningún programa de retoque digital como puede ser Gimp, pero seguramente tendremos que usarlo porque la imagen que necesitamos usar tiene que tener los mismo valores en el ancho de la imagen, como en el alto de la imagen, es decir que sea cuadrada, y seguro que como en mi caso tenemos que recortar un poco la imagen para que cumpla con esta condición.

Una vez que tengamos la imagen, abrimos el navegador y nos vamos a esta Web: http://www.chami.com/html-kit/services/favicon/


Cuando esté cargada la página pulsamos el botón examinar y cargamos la imagen:



Y pulsamos el botón Generate Favicon.ico, y se cargará otra página Web que nos indica que ya tenemos realizado el primer paso.

En esta página nos permite la opción de generar un favicion animado o estático, para que generar un favicon animado pulsamos el botón Edit: 


Y cuando nos cargue la nueva página, cambiamos los siguientes valores:

   

  • Editamos el texto y escribimos el texto que queramos que aparezca, sin quitar {PIC1} y pulsamos el botón de OK.
  • Editamos el color que queremos que tenga el texto y pulsamos el botón de OK.
  • Editamos el color de fondo y pulsamos que sea transparente y pulsamos el botón de OK.

Para finalizar pulsamos el botón Download Favicon Packager, y guardamos el archivo que se genera.

Descomprimimos la carpeta y abrimos el fichero ReadMe.txt y leemos el apartado número 2, que nos explica que código tenemos que pegar en nuestra página Web y donde, concretamete, entre las etiquetas de <head></head>.

Para el favicon estático:

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

Para el favicon animado:

<link rel="icon" type="image/gif" href="animated_favicon1.gif" >

Lo que si tenemos que modificar es el atributo href y decir en que directorio tenemos guardado el favicon, si esta en el directorio raíz se quedaría así, pero si cambiamos de directorio y lo guardamos por ejemplo en imagen, el código que tendríamos que insertar entre la etiquetas <head></head>, sería así:

Para el favicon estático:

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

Para el favicon animado:

<link rel="icon" type="image/gif" href="./imagen/animated_favicon1.gif" >

Un ejemplo de para probar este ejercicio puede ser:

           <html>
                    <head>
                        <title>Ejemplo</title>
                        <link rel="icon" type="image/gif" href="./imagen/animated_favicon1.gif" >
                    </head>
                    <body>
                        <div>Prueba de Favicon</div>
                    </body>
          </html>

Espero que os haya servido de ayuda, un saludo:

Antonio

2 comentarios:

No olvides dejar tu comentario y gracias por tu tiempo ;-)