How do I choose an icon for a pinned tab?
I have created a pinned two tabs. One has a very generic icon and the other has no icon. How do I choose an icon for the pinned tabs? Can it be done? Using a hack is fine too.
Ọ̀nà àbáyọ tí a yàn
You can probably do this with code in the userChrome.css file.
Here is an example that works for Gmail.
Add code to the userChrome.css file below the default @namespace line.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ #tabbrowser-tabs .tabbrowser-tab[pinned][label^="Gmail"] .tab-icon-image { list-style-image: url("https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico") !important; }
The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.
Ka ìdáhùn ni ìṣètò kíkà 👍 0All Replies (2)
Hi Peakwolf, I understand that you would like to choose an icon for a pinned tab. In the past there was an add on called ico picker, however I cannot recommend it because it only works with earlier versions of Firefox, not the release version. I do not have an answer for you at this time. There might be another way to customize tabs with an addon.
Ọ̀nà àbáyọ Tí a Yàn
You can probably do this with code in the userChrome.css file.
Here is an example that works for Gmail.
Add code to the userChrome.css file below the default @namespace line.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ #tabbrowser-tabs .tabbrowser-tab[pinned][label^="Gmail"] .tab-icon-image { list-style-image: url("https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico") !important; }
The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.