Qué es el favicon y como ponerlo en HTML

Un favicon es un ícono muy pequeño que aparece en la pestaña del navegador, generalmente a la izquierda del título del documento. Cuando tenemos un número difícil de manejar de pestañas abiertas, las pestañas se reducirán y el título puede desaparecer por completo, pero el icono siempre permanece visible

favicones

 

Poner favicon en HTML

Este es un ejemplo del código HTML que deberíamos usar, luego explicamos sus partes. Este código tiene que ir en la parte del head de nuestro sitio web, es decir, después de la apertura de la etiqueta <head> y antes de su cierre </head>

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="images/myicon.png" />

Aquí está el significado de cada atributo:

  • rel=”icon” : Indica que el archivo enlazado es el favicon del sitio web.
  • sizes=”16×16 32×32 48×48″ : Especifica los tamaños del favicon disponibles. En este caso, se proporcionan tres tamaños diferentes: 16×16 píxeles, 32×32 píxeles y 48×48 píxeles. Los navegadores pueden elegir el tamaño más apropiado según el contexto.
  • type=”image/png” : Indica el tipo MIME del archivo del favicon. En este caso, se trata de un archivo de imagen en formato PNG.
  • href=”images/myicon.png” : Especifica la ubicación del archivo de imagen del favicon. En este ejemplo, se encuentra en el directorio “images” con el nombre de archivo “myicon.png”.

 

Tipos especiales de iconos

Hay dos tipos especiales de iconos no estándar para el navegador Safari: apple-touch-icon para dispositivos iOS y mask-icon para pestañas ancladas en macOS.

apple-touch-icon

para dispositivos iOS, se aplica solo cuando el usuario agrega un sitio a la pantalla de inicio.

<link rel="apple-touch-icon" sizes="180x180" href="images/myicon.png" />

mask-icon

para pestañas ancladas en macOS, solo se usará si el usuario ancla la pestaña en el escritorio de Safari: el ícono en sí debe ser un SVG monocromático y el atributo color  llena el ícono con el color necesario.

<link rel="mask-icon" href="images/myicon.svg" color="#226DAA" />

 

 

Diseñar un favicon

Podemos diseñar nuestro favicon con un software de retoque fotográfico como Gimp o de diseño vectorial como Inkscape.

Tambien hay algún recurso on-line como el de icon-icons, en el que podemos descargar iconos disponibles en formato svg, png, ico o icns. que pueden servir para favicon u otras cosas.

En cada juego de iconos o icono individual, viene claramente un apartado describiendo la Licencia de uso. En la mayoría de ellos, la licencia permite su uso para propósitos comerciales, compartirlo, editarlo y la atribución al autor no es obligatoria aunque se agradece.

 

 

 

 

 

 

 

 

 

 

 

 

 

13 comentarios sobre “Qué es el favicon y como ponerlo en HTML

    • raul Autor del artículoContestar

      Me alegro mucho, también puedes seguirme en twitter @raulperez0481
      Un saludo.

  1. Diego Contestar

    En mi caso, no tenía un atributo type y la dirección del archivo no funcionó poniendo la carpet donde está el png. Quité eso y ahí sí apareció la imagen (que está guardada en la misma carpeta del archivo html). Gracias!

    • raul Autor del artículoContestar

      Me alegro,

      recuerda que siempre hay que trabajar con la ruta relativa.
      Un saludo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *