macuoren

0:36 27 Dic 07

Como Crear un Favicon Animado Simple con GIMP y Ponerlo en un Blog o Web

Escrito por Loren

Es posible que alguien se haya dado cuenta del “Favicon” de este blog, que sí, está chulo, pero ya lo tienen puesto otros blogs (por ejemplo el de Dabo). Y quería cambiarlo dándole algo mas de vidilla, y entre unas cosas y otras me ha salido esto:

Bueno, y ahora voy a escribir el “como” hacerlo:

Primero buscamos o diseñamos una imagen para el favicon.
Hay que tener en cuenta que el tamaño final del favicon es de 16×16 píxeles, así que la imagen debería ser algo muy simple.
Recomiendo utilizar imágenes con transparencias de fondo (en formato GIF o PNG), aunque esto es solo por una mejor estética.
Aviso de que los favicons que no tengan la extensión ICO no se verán en Internet Explorer (como siempre, hay que darle las gracias a Micro $oft y a sus formatos propietarios).
En este caso he utilizado esta:

Abrimos la imagen con el GIMP, si no lo tienes instalado te informo de que es gratuito, libre, y está para Windows, Linux y Mac. Puedes descargarlo de su Web: gimp.org.
Ahora toca aprender con un pescozón, aplicamos la animación de esfera a la imagen tal cual está:

Y obtenemos esto:

Y se queda muy… ¿mal? va… para mi gusto se queda mucho mejor ampliando el papel tapiz como se ve en el siguiente pantallazo :

Se aplica otra vez la animación y queda tal que así:

Mucho mejor, ¿no? queda redimensionarla a 16×16 o 32×32:

Y por último guardarla como GIF animado:

Ya está hecha la imagen animada, para ponerla en una Web o Blog:

Sube el archivo GIF que has generado. Yo lo he subido a mi cuenta de twango.com, y la URL que me da es esta:
```
http://media.twango.com/m1/original/0110/68dd6fab775f4010a04246435f068bb4.gif
```
Edita el archivo HTML principal (index.html) de tu Web o blog.

Coloca entre las etiquetas

<head>

</head>

esta linea:

<link href='http://ruta_del_archivo.com/ejemplo.gif' rel='shortcut icon'/>

, en mi caso se quedaría así:

<link href='http://media.twango.com/m1/original/0110/68dd6fab775f4010a04246435f068bb4.gif' rel='shortcut icon'/>

Para ampliar información: favicon.net.

¡Y se finí!

Si te ha servido de algo, que menos que comentarme que favicon te gusta mas para este blog de estos dos:

Ahí queda eso

6 frikadas se han comentado con un par!

#1
Diego escupió:
El 7 Marzo 2008 a las 16:50
La verdad es muy molesto ver el cosito ese girando arriba de la pagina y si usas firefox tb en la barra de direcciones.
Convendria mas hacer un buen favicon estatico
#2
macuoren escupió:
El 7 Marzo 2008 a las 18:18
Vale, me aplico el cuento
#3
Vera escupió:
El 24 Enero 2009 a las 20:34
Buenas Macuoren, he estado buscando en tu blog el lugar adecuado para este comentario, al final pude localizar el buscador ;). (Deberías ubicarlo en otro lugar más visible :D)

En fin, el motivo es que me gustaría disponer de tu favicon, es decir, tu participación en el proyecto http://tufavicon.verasoul.com, es totalmente gratis y no es necesario hacer un enlace recíproco.

Puedes obtener más información en http://www.verasoul.com/2009/01/tu-favicon-gratis-en.html

Saludos y espero tus datos para poder incluir el favicon. (siento molestarte con eso, pero al menos el requisito ha sido ese, dejar un comentario con los datos, independiente mente de que pueda obtenerlo yo directamente ;))
#4
Vera escupió:
El 25 Enero 2009 a las 16:47
Tu favicon ha sido incluido Macuoren, he tenido que recortar el título, pues las normas dicen 40 caracteres ;).

Saludos
#5
Loren escupió:
El 25 Enero 2009 a las 16:59
Ok no pasa nada. Gracias y eso
#6
alex escupió:
El 8 Mayo 2009 a las 8:32
ese codigo html no sirve no puedo ver mi favicon animado