Cómo poner un ícono o favicon en HTML: pestaña, página web
Algunas páginas web muestran una pequeña imagen (png, etc) 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. En este artículo veremos cómo crear e insertar este icono a tu página web con HTML.
¿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 agregar 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 añadir un favicon en otros navegadores?
- Diseña tu favicon: Crea un icono que represente tu sitio web, utilizando herramientas de diseño gráfico como Adobe Illustrator o similares. El tamaño recomendado es de 16x16, 32x32 o 48x48 píxeles.
- Guarda el favicon en formato .ico o .png: Asegúrate de guardar tu icono en uno de estos formatos para garantizar la compatibilidad con la mayoría de los navegadores, incluidos Google Chrome y Firefox.
- Sube el favicon a tu servidor: Sube el archivo del favicon a la raíz de tu sitio web o en una carpeta específica. Asegúrate de que el archivo esté accesible a través de una URL.
- Añade el código HTML apropiado: Para que el favicon aparezca en los navegadores, debes insertar un código HTML en la sección <head> de tu página web. El código varía según el formato de archivo que hayas elegido.
¿Cómo poner un favicon en tu página web con HTML?
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" />