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 favicon^[1] é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.css^[2] 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.

Leur nom technique, le fichier s'appelant par défaut favicon.ico ↩︎
A créer s'il n'existe pas déjà ↩︎

older article:
Amusons nous avec des boucles SPIP et les petits nouveaux #GET, #SET et #ARRAY
newer article:
Gastero Prod '08 : beaucoup plus de changements que les simples réalignements progressifs précédents

12 reactions

12 replies

Ju

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
- Invalid DateTime
https://julienfortin.fr

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 : 0px !important ;
width : 16px !important ;
height : 16px !important ;
display : inline !important ;
- Invalid DateTime
https://julienfortin.fr

petite erreur de post :
il faut insérer un

padding : 0px 2px 0px 0px ;
- Invalid DateTime
Nicolas Hoizey

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

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)
- Invalid DateTime
Nicolas Hoizey

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…
- Invalid DateTime
Anonymous

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 ?
- Invalid DateTime
Anonymous

ENORME !
Merci pour le tuyau, ça me désespérait cette barre personnelle toute grise !
- Invalid DateTime
Anonymous

+ 1 à ta solution merci beaucoup.
Elle fonctionne toujours avec Firefox 3.5
@++
- Invalid DateTime
Scandale

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.
- Invalid DateTime
Scandale

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.
- Invalid DateTime
Nicolas Hoizey

Effectivement, je viens d'ajouter le chemin, merci !
- Invalid DateTime

- Nicolas Hoizey
- 5 February 2023
- Container Queries, CSS, Firefox
- 145 reactions
- permalink
Firefox 110 will be released on February 14th, for all Container Queries lovers! 🥰

Can I Use css-container-queries?
- Nicolas Hoizey
- 2 September 2021
- Chrome, CSS, Firefox, Grid
- 2 reactions
- permalink
Anyone knows why in #Firefox sometimes the button in the bottom of https://nicolas-hoizey.com/archives/ is outside its container, while everything is fine in #Chrome? 🤔

Maybe a CSS Grid issue?

Rendering issue in Firefox

Everything is fine in Chrome
- Nicolas Hoizey
- 19 May 2021
- CSS, Firefox, SVG, WebPerf
- 2 reactions
- permalink
Worked on a site with an SVG sprite used as CSS background, and was painfully reminded of why I didn't do that in other projects yet.

A 7 years old bug in #Firefox … 😭

https://bugzilla.mozilla.org/show_bug.cgi?id=1027106

I know there are workarounds.

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

Related contents with similar topics