Afficher les favicon dans la barre personnelle de Firefox sous Mac OS

Dans sa version Mac OS, Mozilla Firefox est configuré pour ne pas afficher l’icône personnalisée d’un site à côté d’un favori placé dans la barre personnelle.

Ce choix est incompréhensible, l’apport ergonomique de ces favicon1 étant considérable pour identifier visuellement rapidement un favori.

Des favicon dans la barre personnelle de Firefox, même sous Mac

Heureusement, une solution technique mais relativement simple existe. La technologie XUL employée par Mozilla fait qu’il suffit d’éditer une feuille de styles CSS personnalisée pour changer la présentation de l’interface. Car l’icône est en fait bien présente, elle est juste masquée.

Voici donc le bout de code à ajouter à votre feuille de style personnalisée userChrome.css2 qui se trouve dans ~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/chrome/ :

.bookmark-item > .toolbarbutton-icon {
  margin: 0px !important;
  padding : 0px 2px 0px 0px !important;
  width: 18px !important;
  height: 16px !important;
  display: inline !important;
}

.bookmark-item:hover > .toolbarbutton-icon {
  background: url("chrome://browser/skin/bookmark-hover-mid.png") repeat-x !important;
}

.bookmark-item:hover:active > .toolbarbutton-icon {
  background: url("chrome://browser/skin/bookmark-open-mid.png") repeat-x !important;
} 

J’ai testé avec succès cette technique tant sur Firefox 2 que sur la toute dernière Firefox 3 beta 2.

  1. Leur nom technique, le fichier s’appelant par défaut favicon.ico ⬆︎

  2. A créer s’il n’existe pas déjà ⬆︎

Si vous voulez signaler une erreur ou proposer une modification de ce texte, n'hésitez pas à l'éditer directement à la source sur Github.

12 commentaires

  • bonjour,
    Désolé, je suis tout nouveau sur mac et je ne trouve pas de dossier relatif à l'application firefox sur mon mac…
    En résumé, je crée le fichier userContent.css mais je ne sais pas où le placer…
    Merci de votre aide.
    Bien cordialement,
    julien

  • A chaque question sa réponse :
    Il faut aller dans

    user > bibliothèque >application support > firefox > profiles > xxx.default > chrome


    et j'ajoute juste une petite ligne au code pour décoller l'icône du texte

    .bookmark-item > .toolbarbutton-icon < br />
    margin : 0 px !important ;
    width : 16 px !important ;
    height : 16 px !important ;
    display : inline !important ;

  • Effectivement, sauf qu'il faut alors passer la largeur à 18 px pour garder les proportions… je corrige !

  • Bonjour.
    Ayant installé Firefox 3 pour Mac, j'avais perdu toutes mes favicons de la barre personnelle, ce qui est très pénible. En effet, une des fonctions très pratique de Firefox était justement de pouvoir n'afficher _que_ les favicons si on le souhaite dans cette barre personnelle. On fait cela très facilement en glissant le lien vers la barre personnelle, puis en faisant clic droit propriétés et en effaçant le nom. On peut en voir un exemple d'application ici :
    http://www.geckozone.org/forum/viewtopic.php?t=65834&sid=6e8eaca5c90206522e3f24f0b4bbf350

    Question : pourriez-vous nous remettre dans un nouveau message le contenu exact et complet du fichier userChrome.css tel qu'il faut l'insérer (en incluant les dernières modifications ? Merci par avance)

  • J'ai beaucoup de favoris avec uniquement la favicon, effectivement.

    Par contre, je ne comprends pas la question finale, le code présent dans cet article a déjà été corrigé selon les commentaires, il n'y a rien à ajouter.

    Mais vous pouvez avoir d'autres règles pour d'autres usages dans votre userChrome.css

  • super ! c'est juste ce que je cherchais depuis que j'utilise Firefox sur un Mac, merci pour le code.

    juste un petit défaut : ça prend plus de place que sur mon Firefox XP, ça déborde !
    y'aurait pas moyen de corriger ça, ou ça tient à cette version Mac ?

  • ENORME !

    Merci pour le tuyau, ça me désespérait cette barre personnelle toute grise !

  • merci pour le tuyau, ça marche. manque juste dans le tutoriel le chemin ou mettre le fichier, mais il est noté dans les commentaires. je pense que c'est comme ça car c'est une habitude d'épurer au maximum sur mac.

  • Pour ceux qui, comme moi, manquent de place dans leur barre personnelle, j'ai aussi ajouté le plugin MultirowBookmarksToolbar qui permet d'étendre la barre personnelle à plusieurs lignes.

Twitter 500px Flickr Facebook Instagram Github Feed