Qué es el favicon y como ponerlo en HTML

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.

favicones

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. 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.

 

 

 

 

 

 

 

 

 

 

 

 

 

9 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 *