Sunfox

Le journal de Sunny Ripert


Favicon dynamique

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

Articles probablement reliés

1 Commentaire

  1. 1 laura martinez :

    merci beacoup pour tres bonne idee. ce maniere de favicon est tres outil pour mon website.

Commenter


Vous pouvez avoir une jolie icône vous aussi en créant un gravatar.

Vous pouvez y saupoudrer de l'HTML5 avec les balises et suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>.


:D Sunny Ripert

est un développeur web vivant à Paris.

CV, me contacter


Textes et contenus sous licence Creative Commons.
Site crée par mes soins et propulsé par WordPress.