FavIcon – Coloca la imagen que distingue webs

7 Jul 2008

Un Favicon es la imagen que aparece antes de la direccion web en la barra de direcciones y en las pestañas.

Yo acabo de colocar el mio. Esta basado en la imagen que ves a tu izquierda. Esta vez cree uno animado. No sabia que poner hasta que vi esta imagen de un avion y la modifique hasta crear la imagen izquierda, pero como se habran dado cuenta, utilcé la imagen inversa.

Y como estoy muy entusiasmado te voy a enseñar a colocar uno en tu blog -aunque existan muchos blogs que ya tienen algún turorial parafavicons-.

Tutorial:

[1} Lo primero que debemos hacer es crear o escoger una imagen, o bien empezar desde cero – pero eso viene mas adelatne-.

[2} Ya que tenemos la imagen puedes utilizar un creador de favicon en internet. Yo recomiendo dos:

[2.1} Uno es, el que recomiendo El escaparate de rosa, Favicon from Pics que te permite subir una imagen, añadirle texto o una animaciónde tipo srcoll. Y te da 3 imagenes ,un icono (.ico), un .gif y un .png -que es el que nos va a servir-, en una carpeta zip la cual deberas de extaer.

[2.2} El otro, el cual utilizé para crea mi favicon, es Favicon.cc. Este te permite -ahora si- empezar desde cero, o subir una imagen. Te da más opciones de animación ya que tiene una funcion tipo cuadro por cuadro. La unica situación desfavorable es que te da un .ico, pero no te preocupes.

[3} Ahora subes tu archivo (ya sea .png o .ico) a internet. Yo utilizo Google Page Creatos para alojar archivos e imagenes.

[4} Ahora vamos a Diseño-> Edición HTML, (no se necesita expandir plantillas de artilugios) y buscamos el título del blog:

<head>
Y justo después insertamos el siguiente código:
<link href='URL DE TU IMAGEN-FAVICON' rel='shortcut icon' type='image/x-icon'/>

<link href='URL DE TU IMAGEN-FAVICON' rel='icon' type='image/png'/>
[5} Antes de acabar has una vista previa. Si todo sale bien guarda lo y listo ya tienes un favicon.

Nota: con Internet Explorer suele no funcionar, pero no te preocupes, la gente que sabe ya no lo utiliza.

Comparte: