Cristalab

¿Qué es un Favicon y cómo lo uso?

Por: Pedro + 13.02.2006

Favicon, en primer lugar, es una palabra compuesta y se deriva de la frase "Favorite Icon"; por tanto se pronuncia "fav-aicon" y no favicon como se lee… mmmm

En segundo lugar, un favicon es una imagen que los desarrolladores web incluyen en el sitio y aparece en la barra de direcciones, favoritos y bookmarks (en la mayoría de navegadores).



La imagen en mención, normalmente es el logo o ícono distintivo de la empresa, institución o persona para quien el sitio ha sido desarrollado. Sirve para promocionar su imagen, su marca y crear sitios más personalizados. Los desarrolladores profesionales, lo hacen para sus clientes.

Hay varias herramientas con las que se puede hacer un favicon, las que más he usado son Microangelo, Corel (creo que la versión 10 fue la última que un día probé), The Gimp, KIconEdit (el que más me ha gustado) y en la web, el Favicon from Pics.

¿Cómo agrego mi favicon en todas las páginas?
Bueno, la cosa es sencilla. Para que tu favicon se vea en una página, pues lo puedes poner en el mismo nivel de la página en la que quieres que se vea. Por ejemplo, si quieres que se vea en www.tudominio.com/blog/index.php entonces el favicon debe estar ubicado en ese mismo nivel (www.tudominio.com/blog/favicon.ico), esa será la primera dirección en la que el navegador la buscará. Sino lo encuentra en ese mismo nivel, pues buscará en el nivel superior: www.tudominio.com/favicon.ico; de allí que poniendo el favicon.ico en el "top-level" tendrás el favicon predeterminado para todas las páginas de tu sitio Guiño

Ahora, dependiendo del navegador y su configuación, el favicon podría no mostrarse (aún si lo tienes ubicado en las ubicaciones antes dichas); por ello, es necesario que lo declares entre las etiquetas head de tu código:

Código :

<!-- Prueba con una de estas dos líneas -->
<link type="image/x-icon" href="favicon.ico" rel="icon" />
<link type="image/x-icon" href="favicon.ico" rel="shortcut icon" />


A hacer bien las cosas se ha dicho!

Etiquetas browsers usabilidad webmasters

Comentarios | Enviar un comentario
eso de los link no me lo sabia, interesante miau
Por: FeNtO
Todos los días se aprende algo nuevo...

Ya no más "favicons" de ahora en adelante solo "favaicons" Muy Feliz Guiño
Por: Sr. QUHO
ahora ya se como poner Favicons en mi web ... Gracias Pedro..
Por: Mago.ozkuro
y funciona con iconos animados ???? Lengua
Por: MARXco_blog
no creo que funcione con gif, animados o si WTF!?
Por: lmenendez

lmenendez :

no creo que funcione con gif, animados o si WTF!?


lee esto
http://www.cristalab.com/foros/viewtopic.php?t=4945
Por: linuxroot
Yo siempre uso PNG's. Es mas sencillo y funciona igual.

<link rel="icon" href="imagen.png" type="image/png">
Por: groof
DATAAAZO!!!!! Mr. PEDRO, se agradece el aporte y llego muy muy uf! muy a tiempo


Espero devolver la ayuda en algun momento... es deuda!
Por: lex-EX_blog

lex-EX_blog :

Espero devolver la ayuda en algun momento... es deuda!


Siempre puedes depositar algo de efectivo a mi cuenta de banco... Riendo Riendo ...

Excelente artículo pedro Thumbs up, no me sabía lo del shorcut icon...
Por: Aoyama
Excelente siempre me preguntaba como le hacian para meter esos iconitos en las paginas weby q se viera tan original. Riendo


gracias y ¡¡¡ ahora todos a poner favicons!!! Guiño
Por: Jack Royce
Gracias a tu artículo por fin se me quitó la pereza y decidí implementarlo en mi blog miau
Por: Zarzamora
o tAmbien pueden ver eso en la firma de LA100RRA 8)
Por: Stopa
Este aporte esta LO ULTIMO DE LO ULTIMO quien iva a pensar que algo tan sencillo me tubiera en quiebre de craneo. :p gracias amigo.
Por: Georginho_blog
jajajaj Riendo
Por: Stopa

MARXco_blog :

y funciona con iconos animados ???? Lengua
Sí funciona: http://www.html-kit.com/favicon/

if you would like to display the animated favicon, upload animated_favicon1.gif as well and insert the following HTML tags.

Código :

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

Por: Pedro
¿Qué medidas tiene un favicon?
Por: elav

elav_blog :

¿Qué medidas tiene un favicon?


16 X 16 pixeles
Por: Zarzamora
Una buena herramienta.
http://www.html-kit.com/favicon/
Por: NEO_JP
Lo que necesito es una herramienta que me permita importar imagenes para hacer los favicons. ¿Existe alguna? Descargué de esta web un soft gratuito llamado AWicons Lite para hacer iconos, cursores animados y no animados pero no me permite importar ninguna imagen... Triste
Por: elav
elav, pero ... leiste o diste si quiera click sobre lo que te paso JP?...
Por: Freddie

elav_blog :

Lo que necesito es una herramienta que me permita importar imagenes para hacer los favicons. ¿Existe alguna? Descargué de esta web un soft gratuito llamado AWicons Lite para hacer iconos, cursores animados y no animados pero no me permite importar ninguna imagen... Triste
Sinceramente no conozco ese software ni esa web (y no los voy a conocer hoy), pero te aseguro que el link que ya te dió JP, es el mismo link que yo puse desde el principio, luego lo volví a poner... y en ESE LINK que te hemos dado TRES VECES, existe una cosita muy linda que te permite, como cuando añades un video porno como attachment en hotmail, subir una imagen (JPG, GIF, etc) y "en menos de lo que canta un gallo" (o sea, en cuestión de segundos) te devuelve en un zip, tres variantes hermosas de tu imagen convertida a favicon (te regresa un gif animado (que puedes usar como favicon animado), un ico de 16X16 y un ico de 32X32), como para que no lo "molestemos" (con J) más pidiéndole lo que nos da de una sóla vez...

O sea, es simple, leer es no sólo un hábito bueno que debemos cultivar, sino algo que se supone es inherente al diario vivir de quienes hemos tenido la fortuna de aprender el invaluable saber de la lectura... o sea, sólo lee muchacho!!! Es simple, de verdad te lo digo. NO necesitas saber mucho inglés (y como ya se que es uno de tus "impedimentos", te dejo este link: http://babelfish.altavista.com/ allí podrás resolver -al menos de manera temporal- ese tipo de problemas simples), te lo garantizo, ES MUY FÁCIL.

Recuerda, click, browse, elijes la imagen, le dices "generate favicon" y en menos de 15 segundos, tendrás tus favicons. Desde que escribí el artículo, a la fecha, he generado unos 8 favicons nuevos, obviamente SIN NINGÚN PROBLEMA.

Freddie® :

elav, pero ... leiste o diste si quiera click sobre lo que te paso JP?...
No lo creo Freddie, no lo creo mmmm.


P.D. Por si acaso, NO ESTOY MOLESTO, simplemente, me extraña de elav, que no se haya tomado al menos 5 minutos para:
a.- hacer click en cada link que le proveí en el artículo (desde el principio habría entendido de qué va el rollo)
b.- no es ningún novato... o sea, ya debería saber que en los links se hace click y algo surge... si es de fuentes fidedignas (como cristalab), no encontrarás viruses ni cosas así, sino, cosas que te ayudarám
c.- además, google es TAN bueno, que tu le preguntas y él te contesta, pones una frase como crees que podrías encontrar lo que buscas y te lo devuelve: por ejemplo este link: http://www.google.com.ar/search?q=hacer+favicon+partiendo+de+imagenes te dice un criterio de búsqueda que -con toda seguridad- arrojará un resultado. Yo ya vi el resultado y hay más de un link -de los que devuelve la búsqueda- que te pudo haber servido, en caso de RESISTIRTE a hacer click en los enlaces que -en bandeja de plata- puse (o pusimos) desde el principio.

Repito, no estoy molesto, sólo que quizá con esta respuesta, le ayude no sólo a elav, sino a más de uno que por aquí acostumbra a preguntar por preguntar, sin haber leído o hecho una simple búsqueda, antes de postear.
Marco, no necesitas editar esta respuesta.
Por: Pedro
Pedro, no pienso editarla en lo absoluto, está perfectamente explicado, y con motivos realmente válidos, de modo que de nuevo te digo, excelente artículo, excelente comentario. Guiño

El resto, por favor léan todo el hilo, no sólo el último comentario.

Thumbs up
Por: La100rra
un lujo lo de la página que te lo pasa a ".ico". Una cosa... a mi los gifs animados en explorer no me van. en ff todo ok.

Un saludo!
Por: rocenn
muy buen tips
Por: oscartitan
sabían que desde el paint puedes hacer un archivo .ico, todo es cuestión de que a la hora de guardar el archivo le pongas el nobre y la terminación .ico
ejemplo:
mifavaicon.ico,
asegurandote de poder dejar el tamaño de la imagen en 16*16 pixeles.

y sigues con el proceso de subirlo a tu paginaweb.
Ahora bien, tengo la duda de cómo hacerlo desde blogspot, puesto que no me permite subir imagenes a menos q sean jpeg y me las cambia aese formato o no las sube.qué puedo hacer?
Por: eljackesito_blog
Q bueno!
De todas formas sólo se me ve en Firefox...
Q hay q hacer para que tambien se vea en IE?
Por: rum_blog
rum_blog, para que se vea en IE tienes que agregar ese sitio a tus favoritos, IE hará el resto.
Por: NEO_JP
uish a mi no me funcionoooo Triste

lo hice en flash y le meti <link type="image/x-icon" href="favicon.ico" rel="shortcut icon" />

entre las etiquetas <head> </head>
Por: malu_blog
Si me funciono, pero solo si agrego la pagina como favorito. .. como puedo hacerle para que aparezca mi logo sin tener que agregar mi pagina como favorita? o a caso hize algo mal. . .
Por: sebastian_blog

sebastian_blog :

como puedo hacerle para que aparezca mi logo sin tener que agregar mi pagina como favorita?
Usa un navegador de verdad, no internet explorer
Por: Freddie
Deja un comentario
IMPORTANTE

Este mensaje ha sido cerrado; si deseas participar en la discusión o hablar de otro tema relacionado, hazlo en los foros de Cristalab