51
Gracias

Unas palabras de agradecimiento nunca están de más.

Cómo colocar un icono en la barra de direcciones (favicon)

Habrás observado que algunas páginas web muestran una pequeña imagen en el encabezado de la pestaña de la página, en la barra de direcciones y en los marcadores del navegador. Esta imagen es conocida como icono de favoritos o favicon. Su función permite asociar nuestro sitio web a un elemento gráfico que lo represente y, además, facilitar su identificación. En este artículo veremos cómo crear y asociar este icono a tu página de manera sencilla.



Cómo crear un favicon

Existen varias maneras de crear un favicon. El formato de estos iconos ha de ser .ico, al menos si queremos que funcione en todos los navegadores (los más actuales aceptan los formatos .png o .jpg). Ello se puede realizar con programas de edición de imágenes, como GIMP (software de código abierto totalmente gratuito), que nos permite ajustar la imagen al formato y al tamaño requeridos. Si buscamos algo más sencillo y directo, también existen servicios web con los que podemos obtenerlo de manera inmediata. FavIcon from Pics, GenFavIcon, FavIcon Generator y Favikon son algunos ejemplos.

Cómo hacer un favicon compatible con la mayoría de navegadores

Se deberá de ajustar la imagen a un formato .png, .jpeg, .gif, .svg, .bmp o .ico y, a continuación, habrá que redefinir su tamaño. El tamaño más común de favicon suele ser de 16x16 píxeles, aunque según la plataforma en la que se quiera visualizar habrá que utilizar una dimensión u otra.

Cómo hacer un favicon para Internet Explorer

Dado que Internet Explorer no soporta imágenes en los formatos estándar, hay que En el caso especial de Internet Explorer, hay que tener en cuenta que no se podrán utilizar formatos distintos a .ico o .bmp y la dimensión será estrictamente 16x16 píxeles.

No obstante, no es de gran utilidad realizar un favicon para este navegador, ya que sólo lo utilizará para los favoritos.

Cómo poner un favicon en tu página web

Si se quiere que en la página web se muestre correctamente el favicon debe editarse el código HTML de dicha página, especificando la ruta con una etiqueta link entre las etiquetas de cabecera head del archivo.

A continuación puedes ver un ejemplo con un favicon en formato .png, ubicado en la carpeta imágenes:

<link rel="icon" type="image/png" href="/imágenes/mifavicon.png" />


Dependiendo del formato, el atributo type cambiará:

Formato PNG: image/png;

Formato GIF: image/gif;

Formato JPEG (extensión .jpg o .jpeg): image/jpeg.

Si tienes un favicon que no está en un formato de imagen estándar, como es el caso del .ico, el atributo rel también cambia:

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

Foto: ©123RF
51
Gracias

Unas palabras de agradecimiento nunca están de más.

Haz una pregunta
Nuestros contenidos son redactados en colaboración con expertos del ámbito tecnológico bajo la dirección de Jean-François Pillou, fundador de CCM.net y director digital en el Grupo Figaro. CCM es un sitio de tecnología líder a nivel internacional y está disponible en 11 idiomas.

Consulta también

El documento « Cómo colocar un icono en la barra de direcciones (favicon) » se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.
1 voto - 5.0/5

9 Comentarios


Muy buen post, no lo digo solo por la información técnica, sino también por los consejos, felicidades.