El favicon es un pequeño icono que identifica un sitio web cuando está abierto en una pestaña o cuando es guardado como favorito.
El tamaño estándar de este icono es de : 16px * 16px, o 32px *32px
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" href="imagenes/favicon.png" type="image/png" />
La etiqueta es <link/>, es una etiqueta vacía y tiene que ir en el <head> de nuestro documento HTML.
El atributo rel es siempre “icon”
El atributo type depende de la extensión de la imagen que queramos poner: png, gif, ico …
El atributo href es la ruta de donde se encuentra la imagen.
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.