¿Qué es el favicon?

Es un icono, una pequeña imagen, que aparece en los navegadores junto a la dirección de una página web en la zona izquierda. Se podría decir que es similar a un logo que representa a un sitio web.

Ejemplo de este mi humilde "blos":



Cualquier imagen una vez elegida la adecuada debe ser subida a un servidor p.ej: sites, flickr de donde tomar su url.

La mejor fórmula es que el icono sea un .ico porque Internet Explorer es lo que reconoce:


<link href="http://www.dirección_web_donde_está_el_icono/nombre_archivo.ico" rel="shortcut icon"/>



Otra fórmula es que la imagen sea .jpg, .png, .gif usándose el código:


<link href='url-favicon' rel='icon' type='image/gif'/>

<link href='url-favicon' rel='shortcut icon' type='image/gif'/>

La etiqueta TYPE hay que modificar "gif" por el tipo de archivo que hayamos confeccionado o tengamos a mano: jpg, png, gif ...


■ En Resumen:

- Hay que tocar la plantilla e ir a:

Escritorio>Diseño>Edición de HTML


- Apretamos a la vez las teclas Ctrl+F para que nos aparezca el "bendito buscador de palabras" y localizamos el código:

<head> justo antes de la etiqueta <title>

- Debajo de <head> se coloca el Código general:


<!--poner favicon en cualquier buscador-->


<link href='url-favicon-con-icono-en-formato-punto-ico' rel='shortcut icon' type='image/x-icon'/>

<!--fin poner favivon en cualquier buscador-->



<!--Link del favicon en resto exploradores-->

<link href='url-favicon-jpg' rel='shortcut icon' type='image/png'/>

<link href='url-favicon-jpg' rel='icon' type='image/png'/>

<!--Fin Link del favicon-->


- Hacemos "Vista Previa".

- Guardar plantilla.


En mi opinión lo mejor es usar Photoshop para hacer un favicon, pero si no se tiene mucha idea seguro que los siguientes generadores serán de gran ayuda:


■ Generadores de favicon. Listado y consejos.


Favigen permite crear un favicon partiendo de una imagen que subamos desde nuestro PC.
Una vez subido el logo deseado para representar nuestra web se indican las proporciones (generalmente 16x16). Después es necesario subir la imagen a un servidor p.ej: sites, flickr
Favigen facilita el código a introducir en la plantilla de la web que habrá que rellenar con la url que nos dé nuestro servidor de la imagen del favicon.

De esta forma cada vez que se cargue nuestra página, en la barra de direcciones y/o en la pestaña, dependiendo del navegador que usado, se visualizará el favicon.


► Generar un favicon con un archivo. ico en FavIcon from Pics

► Más generadores de favicon:

Favicon Generator
Favicon.cc
Favicon.co.uk
Favicongenerator.org
Animated Favicon
Genfavicon
Myfaves
Favicon Tool
Favicon Center
Favikon
Anti Favicon
Favicon.ca
Iconz World
Favicon Prime
Degraeve
Favicongenerator.us
X-Icon Crea iconos online

* Crear gif con Gickr

Y esto es todo...



9 comentarios:

ANITA

Esto me lo guardo que me lo tengo que estudiar detenidamente, muchas gracias por tanta información.
Jo eres una eminencia en estas cosas chica.
Te voy a cambiar unas vacaciones por clases prácticas.
Besotesssssssss

Lujo

@ANITA Holaa,
Esto son apuntes que tomo para que no se olvide cómo lo hice.(-^o^-)
Ojalá hubiera tenido toda esta información cuando lo puse.(ToT)
Si tienes problemas con Photoshop o programas de imagen usa algún generador.(^_-)
En el fondo es muy simple una vez tengas la imagen. Basta subirla a Sites, Flickr, photobooket o similares y cambiar la url en el código.
Eso sí, procura estar relajada cuando lo hagas.
Miles de abrazotes enormes!!!
Pd: Me apunto a las próximas vacas(-^o^-)

Abi E.

Hola Lujo, ¿para cuando unas clases particulares sobre la informatica y sus aplicaciones?
Cada día me sorprendes mas, incluso me resulta dificil seguirte, con tanto como actualizas las entradas.

Un beso enorme
el lio de Abi

Gildo Kaldorana

Gracias Lujo.
Lo interesante también es elegir un icono que pegue con tu blog. Además algunos no se ven bien al reducirlos.
Mogollón de generadores (tu trabajo te habra costado).
Un saludo
Ah y otra vez gracias, por tanto comentario (pero deja alguno para más adelante, jejejeje)

LadyMarian

Sí, qué velocidad para publicar, como dice Abi!!! O.O

Me gustan los favicones. Incluso me resultan prácticos para encontrar los sitios en la barra donde tengo algunos favoritos. En mi caso no es algo simplemente decorativo.

Besos

Lujo

@Abi E. Holaaa,
Soy yo la que tiene que pedirte un autógrafo cuando nos veamos. ¡Eres un genio!

Palabrita que es real que tomo apuntes y tengo un Bloc de notas para no olvidarme de cosas muy interesantes. Lo que pasa es que lo subo al blog cuando puedo y pasan estos "despelotes" (-^o^-)
Abrazotes enooormes!

Lujo

@Gildo Holaaaa,
Cárgate de paciencia para elegir un logo. Si puedes hasta haz una selección de los que más te convencen.
Los expertos dicen que se elijan simples, sencillos para que al reducirlos no sea "algo extraño".

Espero que los generadores sirvan para algo. Son una solución cuando los programas de dibujos son "traviesos".

Nooooo, no me tienes que dar las gracias por nada. Siempre lo miro lo que pasa es que comento si puedo y me dejan (ToT) ; de todas formas si lo hago es porque quiero....nunca por obligación.
(-^o^-)
Abrazotes enormesssss!
Buen finde!

Sonix

Yo lo tengo que ver con calma también, porque la verdad es que me puse uno pero no se ve en todos los navegadores y no sé por qué puede ocurrir esto.

Lujo

@Sonix Holaaa,
Usa una imagen con extensión .ico y súbela a Sites (por ejemplo).
De todas formas, en mi caso, vi que usar las dos opciones que indico funcionaba en los 5 navegadores que conozco.
Tómalo con calma y paciencia.
Abrazos!!

Publicar un comentario en la entrada

(-^o^-) (^_-) (#^_^#) (ÖoÖ) (*^o^*) (>_<) ( ̄へ ̄)(;_・) (ô_Ó) (O_O) (ˇ~ˇ) (ToT)(Q____Q) ಠ_ಠ (。◕‿◕) [(--)]ZZzzz

- Si el comentario es anónimo hay muchas posibilidades que no se publique.

 


UP