Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

Since the release of Firefox "5", I've come to really love the new "App Tabs" feature. However, I've now realized that several internal websites at work do not have favicons. So, when I make an App Tab out of these sites, there's only a "blank page" icon in the tab.

Perhaps I wouldn't mind so much if there was only one, but there's at least two or three of these. So, it's just a bit annoying to have to mouse-over the App Tabs to figure out which is what.

I've tried using Favicon Picker 2 to change the bookmark icons, but it only does exactly that - changes the icon in the bookmarks folder. It doesn't change the favicon that's displayed next to the URL in the Address Bar, or the one next to the page title in tabs - the latter being that which is used for the App Tab icon.

So, is there a plugin or other client-side (and preferably "Joe User" friendly) method to assign an icon to a web page or domain, that will be used in the tab bar?

share|improve this question

2 Answers 2

up vote 8 down vote accepted

It's pretty simple to customize your app tab favicons.
Because the app tab favicon is generated by the bookmark just...
(1) install this -- https://addons.mozilla.org/en-US/firefox/addon/bookmark-favicon-changer/
(2) view your bookmarks, right click and select the custom image you want
(3) restart browser (for new image to "take")
Done.

enter image description here enter image description here enter image description here enter image description here enter image description here

share|improve this answer
    
@admintech - As mentioned, I've already tried using a bookmark icon changer. How is this plugin different from the one I've used? –  Iszi Jun 23 '11 at 15:28
1  
You have to open the bookmark after changing the favicon then re-add as an app tab –  admintech Jun 23 '11 at 15:37
    
@admintech - I don't know about your suggested plugin, but mine doesn't change the tab icon even in a normal tab, even after browser re-load. Does it matter that the sites I'm trying to do this on are SSL sites? –  Iszi Jun 23 '11 at 15:41
1  
Nevermind. Just tested the Bookmark Favicon Changer to be sure. I'm not sure what it does that Favicon Picker doesn't, but it seems to apply the favicon to tabs also. Thanks! Now, if I could only get it to apply to the whole sub-domain or something, so that navigating the "app" doesn't clear the favicon... –  Iszi Jun 23 '11 at 15:44
2  
Excellent solution to a nagging problem. Sadly, the author of the plug states that as of Firefox 22, the API breaks the plugin in an unfixable way. –  gbarry Apr 26 '13 at 17:25

I've changed the icons of my tab (Firefox 26) using the following stylesheet:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

tab[pinned="true"][label*="w3.org"] .tab-icon-image {
    list-style-image: url(https://www.w3.org/favicon.ico);
}
tab[pinned="true"][label^="TU"] .tab-icon-image {
    list-style-image: url(https://www.tue.nl/favicon.ico);
}

To use this stylesheet, either put it in [path to your profile]/chrome/userChrome.css, or install a user style manager such as Stylish.

This works as follows: The tabs in Firefox are part of a document tree (see browser.xul):

<tabs id="tabbrowser-tabs" ...>
    <tab class="tabbrowser-tab" ... pinned="true" ... label="some text" ...>
    ...

The label of a tab matches the tab's title. In my example, I wanted to add a favicon to the the mailing list tab of W3. Unfortunately, it does not have a single title, so I had to look for something relatively unique that matches the tab. It turns out that the relevant pages had "w3.org" in their title, which resulted in the creation of [label*="w3.org"].
Similarly, the site of my university has no favicon. All titles start with "TU", so I used [label^="TU"].

More common selectors: [label$="last words"], [label="Exact match"].
Negation: [label*="w3.org"]:not([label$="- Gmail"]) (= select tabs whose title contains "w3.org", unless it ends with "- Gmail").

If your pinned tabs never change position, then you can also try something like this to change the icon of the first tab:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

tab[pinned="true"]:nth-child(1) .tab-icon-image {
    list-style-image: url(https://www.mozilla.org/favicon.ico);
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.