Crea e Inserta un Favicon a tu Blog

Por angitawbm

Lo Primordial

Favicon (abreviatura del inglés 'favorites icon'), también conocido como icono de página, es un icono asociado con un sitio web o página web en particular. Un diseñador web puede crear este icono, y muchos navegadores gráficos puede hacer uso de él. Los navegadores que permiten esta función suelen mostrar el icono junto a la barra de direcciones, al lado del nombre del sitio en la lista de favoritos, y al lado del título de la página en una interfaz de documentos en pestañas.

Para que tengamos el nuestro, Les mostraré 2 formas:

1. podemos acceder a esta página favicon.cc (que es una herramienta online para crear un icono rápidamente, cabe recalcar que esta página solo se ve con FIREFOX)

2. Entramos a FavIconfromPics y subimos cualquier imagen que nos guste, y la transformamos en Favicon.

¿Qué es un Favicon?¿Qué es un Favicon?

Formas que utilizaremos para agregarlos al blogFormas que utilizaremos para agregarlos al blog

Ya dentro de la Pagina comenzamos a crear nuestro icono.

Les Mostraré primero la forma nº 1

Aquí lo dibujamos, obviamente nuestro icono no será de este tamaño, sino mucho más pequeño

Esto es lo que he conseguido, se que no es la gran cosa pero para explicar lo que se debe hacer, sirve.

Cuando ya tengamos listo nuestro icono, nos fijamos que un poco más abajo sale “Download Favicon”, le das click ahí y lo bajas .

Ahora les Explicaré la forma 2, que es la que yo utilicé para hacer mi icono.

Le damos click a “Examinar” y buscamos la imagen que queremos utilizar.

Esto es mejor dejarlo en blanco

Este es el que yo utilizaré ->

<-Buscamos nuestra imagen

Cuando ya lo tengamos listo hacemos click en “Download Favicon”

Ahora les mostraré donde pueden subir su icono, un buen lugar es Ahora les mostraré donde pueden subir su icono, un buen lugar es googlepages ya que soporta imágenes Ico. Si no tienes una cuenta, no te preocupes, puedes ya que soporta imágenes Ico. Si no tienes una cuenta, no te preocupes, puedes utilizar el mismo correo que usas en blogger para entrar.utilizar el mismo correo que usas en blogger para entrar.

Bien para subir nuestro ico, hacemos click en “Upload”.Bien para subir nuestro ico, hacemos click en “Upload”.

Una vez subido, con el boton secundario del mouse, Una vez subido, con el boton secundario del mouse, hacemos click sobre el enlace, y copiamos la ruta.hacemos click sobre el enlace, y copiamos la ruta.

Siguiente paso, agregandolo a blog Siguiente paso, agregandolo a blog

Nos vamos a Nos vamos a nuestro panel de nuestro panel de

control, y hacemos control, y hacemos click en diseño.click en diseño.

En diseño, nos vamos a Edición de HTML.

Y buscamos lo siguiente

<title><data:blog.pageTitle/></title>

Esta casi al principio, pero si no lo encuentras, utiliza Ctrl+F

Ya ubicado lo anterior, pegamos justo abajo lo siguiente:<link href=‘DIRECCION DE TU ICONO' rel='shortcut icon' type='image/x-icon'/><link href=‘DIRECCION DE TU ICONO' rel='icon' type='image/png'/>

En dirección de tu icono, pegas la copia del enlace que hiciste desde google pages,

En la siguiente pgina les mostraré como.

Como ve ya he pegado la direccion de mi icono.

NOTA: cuando se descargan su icono (en la forma 2) les baja un zip, donde viene su icono, y una carpeta llamada extra, si no les funciona al utilizar su icono “original” el de 32px, utilicen el que esta en fomato .png, siguiendo los mismos pasos.

Pueden utilizar vista previa para ver los cambios, si les gusta, Guarden plantilla.

A continuación detalles muy importantes.

Ahora se pueden ver los cambios realizados, como verán, se ve el icono en la barra de direcciones y el la ventana.

Aquí podemos apreciar, que esto funciona perfectamente en FIREFOX

Como se darán cuenta, no tenemos el mismo resultado con Internet Explorer.

Supuestamente, esto cambia una vez hayamos agregado la página a “favoritos”

^^FIN^^Para más guias, ayuda, códigos, trucos, javascript, y más. Visita:Para más guias, ayuda, códigos, trucos, javascript, y más. Visita:

http://angi-vivallo.blogspot.com

Para descargas directas GRATIS de música, videos, peliculas, anime, Para descargas directas GRATIS de música, videos, peliculas, anime, juegos, software, series de tv, Ebooks, tutoriales, y mucho, mucho más, juegos, software, series de tv, Ebooks, tutoriales, y mucho, mucho más, visita:visita:

http://angitawbmxd.blogspot.com