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
Tabla de contenidos
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
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.
me sirvió muy bien, gracias
Me alegro mucho, también puedes seguirme en twitter @raulperez0481
Un saludo.
Muy útil, me sirvió. ¡Muchas gracias!
Muchas gracias me sirvió mucho
funcionó perfectamente. Gracias.
hola buenos dias, tengo un problema y es q no me funciono
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!
Me alegro,
recuerda que siempre hay que trabajar con la ruta relativa.
Un saludo.
Funciona, gracias.
Una pasada. Muy completo. Muchas gracias por el aporte
muy jevy
Gracias Steven
Me gusta mucho la forma como lo explica, me sirvió mucho, gracias.
Gracias Olga