epelpad

Colocar un icono en la barra de direcciones web con HTML

Favicon - Colocar un icono en la barra de direcciones

Al finalizar una web me puse a buscar cómo poner un FAVICON en mi URL de web pero no me funcionaban y esta fue la opción ya que 1 sí me funcionó y 2 no quería convertir mi imagen en formato, la quería dejar en PNG.



1. Primero piensa en la img que será tu favicon que sea vea bien en formato chico de PX.

Si quieres puedes crear un favicon en estos links:

Un programa de diseño (Gimp, pixia, inkscape...) (ver Programas de grafismo)
Programas especializado (aconsejo IconEdit32 o también IconWare)
Sitios web que transforma una imagen en favicon:
http://www.chami.com/html-kit/services/favicon/
http://www.favicon.co.uk/
http://www.genfavicon.com/es/
http://tools.dynamicdrive.com/favicon/
http://favikon.com/


2. El favicon debe respetar los estándares:

Una imagen en formato png o gif (formatos estándares). (podemos también utilizar formatos menos comunes, ver el enlace al final de la página). Puedes elegir entre 16x16 o 32x32 pixeles.

NOTA
Como de costumbre, Internet Explorer no respeta los estándares y no utiliza las imágenes con los formatos correctos. Para este navegador, hay que utilizar una imagen en formato ico (o bmp) (no estándar, de preferencia evitarlo), y dimensiones de16x16 pixeles.
Poner favicon en línea

3. Luego tienes que poner el favicon en tu página web, recomiendo en la carpeta de imagenes que hayas creado, e indicar su ruta con la etiqueta link entre las etiquetas de cabecera <head> ......</head>

Veamos un ejemplo con una imagen en formato png:
<link rel="icon" type="image/png" href="/images/mifavicon.png" />


Dependiendo del formato, el atributo “type” cambiará:
Formato png: image/png
Formato gif: image/gif
Formato jpeg (extension jpg o jpeg): image/jpeg


Si tienes un favicon que no respeta los estándares, el atributo “rel” también cambia:

<link rel="shortcut icon" type="image/x-icon" href="/images/icon1.ico" />

También se puede poner un archivo favicon.ico en la raíz de la página para que algunos navegadores lo utilicen automáticamente, pero esto no es estándar.
Notas

Creo que no es muy útil hacer un favicon para IE, dado que éste sólo lo utiliza para los favoritos.
Si utilizas un icono en un formato estándar y otro en formato ico, no te aconsejo que pongas este último en la raíz: los navegadores lo mostrarán si no encuentran la imagen en formato png.
También podemos utilizar un icono animado (ver enlace).

Enlaces relacionados

http://ilmaistro.com/como-crear-un-favicon/
http://www.tufuncion.com/favicon_iconos_ico
http://es.ccm.net/faq/494-favicon-colocar-un-icono-en-la-barra-de-direccciones

1 comentario - Colocar un icono en la barra de direcciones web con HTML