Sunfox

Favicon dynamique

16 juin 2013 1 commentaire

Sites sans favicon : Boo!

Le favicon est un endroit assez délaissé dans une page Web alors que c’est parfois la seule indication visuelle permettant aux utilisateurs de de se retrouver dans ses onglets.

Edith

Sur Edith j’ai choisi de représenter la page en cours directement dans le favicon, en le mettant à jour à chaque caractère tapé.

favicon qui change à la volée sur Edith

JavaScript

Trop facile.

1. Créer un canvas de 16×16 et colorier ses pixels via JavaScript
2. Appeler sa méthode toDataURL() pour transformer le canvas en data:image/png;base64,iVBORw0…
3. Placer dans le DOM dans le <link rel="icon" href="…" /> de la page en cours.

Noter que pour qu’il soit mis à jour instantanément Firefox a besoin qu’on supprime et qu’on recréer la balise link.

Exemple dans le CoffeeScript utilisé sur Edith.

Can I Use?

Fonctionne là où canvas et les datauri fonctionnent, soit IE9+.