outils

Des bulles d’information dans les favicons avec Tinycon

Posté le par dans la catégorie Outils.

Tinycon est une librairie javascript qui permet de modifier dynamiquement le favicon d’une page en y ajoutant une bulle d’alerte comme on peut le voir sur l’image suivante.

Compatibilité

La librairie est compatible sur les navigateurs suivants :

  • Chrome 15+
  • Firefox 9+
  • Opera 11+

Il existe cependant une version dégradée qui modifie le titre de la page au lieu du favicon pour les navigateurs suivants :

  • Internet Explorer 9
  • Safari 5

Utilisation

L’utilisation la plus basique de la librairie :

Tinycon.setBubble(6);

Mais une utilisation paramétrée est possible :

Tinycon.setOptions({
    width: 7,
    height: 9,
    font: '10px arial',
    colour: '#ffffff',
    background: '#549A2F',
    fallback: true
});

L’attribut fallback permet d’autoriser la version dégradée sur les navigateurs non compatibles.

Démonstration ou Téléchargement sur github