Sunfox


Journal

Archives de juin 2013

Favicon dynamique

16 juin 2013 1 commentaire

Capture d'écran de favicônes toutes identiques
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é.

Capture d'écran montrant la modification en temps réel de la favicon
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+.

👨🏻‍🦰 Sunny Ripert

est un développeur web vivant à ParisContactArchives

Textes et contenus sous licence Creative Commons.