Tutorial para crear un FAVICON

20-ago-2008, 17:38

FAVICONES

Suena a taco y de los gordos, pero un favicon no es sino el icono que antecede a la url en muchos sites. En IE para los que seguís navegando con él (y no hacéis ni caso a las sabias y no pocas recomendaciones del pequeño zorrillo :lol: :lol: ) es el papelillo ese con la e azul que antecede cualquier url.

Estos iconos suelen también aparecer cuando guardamos una página web en favoritos al lado de su dirección.

Esos pequeños iconos de extensión .ICO suelen tener unas dimensiones de 16x16 (lo más normal) y a ser posible y para que funcione bien, lo ideal es que tenga 16 colores (usando la paleta estándar de 16 colores de Windows), e incluso ya la gran mayoría pueden soportar las siguientes dimensiones 32x32x256.

Recomendación: si queréis que os salga SEGURO, SEGURO, SEGURO…Hacedlo de 16.

¿Cómo creo un favicon?
Lo importante es saber que un favicon debe tener extensión .ico , pero esa extensión la debe aportar el programa con el que lo diseñéis, no cada uno de vosotros poniéndolo como nombre. O sea, que no vale a el logo de nuestro site con formato .png (“logo.png”), cambiarle el nombre manualmente a “logo.ico”…eso es una chapuza enorme. :lol: :lol: :lol: 8)

Así pues el programa que os recomiendo, y que yo creo más sencillo de usar es el iconomaker, cuya versión 2.0 podemos encontrar en su web y podemos descargar una versión trial de 15 días de este link

[Solo Miembros registrados ven los enlaces. ]

Tras la descarga, lo instalamos y la primera pantalla que nos sale inmediatamente después nos ofrece elegir entre las siguientes opciones.

Ya sabéis16x 16 para que sea de 4bits.

El aspecto de la pantalla de diseño es este (sí, ya se que el icono de ejemplo es una caca, pero es eso, un ejempo):

Una vez diseñado y guardado como favicon.ico, lo subís de igual forma que subís cualquier imagen, página o archivo a vuestra página web (por ejemplo con el filezilla y por ftp)

En función de dónde lo guardéis y cómo el script que debemos introducir varía ligeramente pero creo que el groso de los lectores de este minituto captara la pequeña diferencia. En cualquier caso se introduce entre head y head:

<head>
bla, bla, bla...
<link rel="shortcut icon" href="[Solo Miembros registrados ven los enlaces. ]">
bla, bla, bla....
</head>

La diferencia sería que no lo hubierais metido en ningún directorio o carpeta y ese paso os lo saltáis. O sea,

<link rel="shortcut icon" href="[Solo Miembros registrados ven los enlaces. ]">
Normalmente podréis ver el icono en los navegadores que lo permitan, pero os dejo aquí este link para alguna otra duda, a mi me fue muy útil en su día.

[Solo Miembros registrados ven los enlaces. ]

**Viejo** · 20-ago-2008, 18:32

No hace falta que sea exclusivamente un icono.. puede ser una imagen gif por ejemplo...

Dentro del " head "

Ponemos esto

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

Lo que esta en rojo es la url de la imagen que va a ser el icono de nuestra pagina web

Terminado quedaria asi

Código HTML:

<html>
<head>
<title> Web Site </title> <!-- Titulo de la pagina -->
<link rel="shortcut icon" type="image/ico" href="/images/favicon.gif" /><!-- Favicon -->
</head>
<body>

</body>
</html>

20-ago-2008, 17:38	#1 (permalink)
MaDeS Guest Mensajes: n/a	Tutorial para crear un FAVICON FAVICONES Suena a taco y de los gordos, pero un favicon no es sino el icono que antecede a la url en muchos sites. En IE para los que seguís navegando con él (y no hacéis ni caso a las sabias y no pocas recomendaciones del pequeño zorrillo :lol: :lol: ) es el papelillo ese con la e azul que antecede cualquier url. Estos iconos suelen también aparecer cuando guardamos una página web en favoritos al lado de su dirección. Esos pequeños iconos de extensión .ICO suelen tener unas dimensiones de 16x16 (lo más normal) y a ser posible y para que funcione bien, lo ideal es que tenga 16 colores (usando la paleta estándar de 16 colores de Windows), e incluso ya la gran mayoría pueden soportar las siguientes dimensiones 32x32x256. Recomendación: si queréis que os salga SEGURO, SEGURO, SEGURO…Hacedlo de 16. ¿Cómo creo un favicon? Lo importante es saber que un favicon debe tener extensión .ico , pero esa extensión la debe aportar el programa con el que lo diseñéis, no cada uno de vosotros poniéndolo como nombre. O sea, que no vale a el logo de nuestro site con formato .png (“logo.png”), cambiarle el nombre manualmente a “logo.ico”…eso es una chapuza enorme. :lol: :lol: :lol: 8) Así pues el programa que os recomiendo, y que yo creo más sencillo de usar es el iconomaker, cuya versión 2.0 podemos encontrar en su web y podemos descargar una versión trial de 15 días de este link [Solo Miembros registrados ven los enlaces. ] Tras la descarga, lo instalamos y la primera pantalla que nos sale inmediatamente después nos ofrece elegir entre las siguientes opciones. Ya sabéis16x 16 para que sea de 4bits. El aspecto de la pantalla de diseño es este (sí, ya se que el icono de ejemplo es una caca, pero es eso, un ejempo): Una vez diseñado y guardado como favicon.ico, lo subís de igual forma que subís cualquier imagen, página o archivo a vuestra página web (por ejemplo con el filezilla y por ftp) En función de dónde lo guardéis y cómo el script que debemos introducir varía ligeramente pero creo que el groso de los lectores de este minituto captara la pequeña diferencia. En cualquier caso se introduce entre head y head: <head> bla, bla, bla... <link rel="shortcut icon" href="[Solo Miembros registrados ven los enlaces. ]"> bla, bla, bla.... </head> La diferencia sería que no lo hubierais metido en ningún directorio o carpeta y ese paso os lo saltáis. O sea, <link rel="shortcut icon" href="[Solo Miembros registrados ven los enlaces. ]"> Normalmente podréis ver el icono en los navegadores que lo permitan, pero os dejo aquí este link para alguna otra duda, a mi me fue muy útil en su día. [Solo Miembros registrados ven los enlaces. ]

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

Secciones de Interés