Replacing icon on about:home tab - SOLVED

oomingmak

I'm trying to replace the tab icon on the Firefox about:home page (i.e. Start Page).

I have tried using the following:

tab.tabbrowser-tab[label="Mozilla Firefox Start Page"] .tab-icon-image {
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg") !important;
}

But it doesn't work. If I switch from the URL to display:none, it does hide the tab icon, so I know I've got the ID and class correct.

I also tried using background-image: instead of list-style-image: and it did make a change, but both old and new icons were visible at the same time, with the old icon on top, so you can barely see the new replacement icon.

What css should I use so that the icon is fully replaced?

calico

Try this:

tab.tabbrowser-tab[label="Mozilla Firefox Start Page"] .tab-icon-image {
width:0 !important;
padding-right:16px !important;
background-image: url("chrome://mozapps/skin/places/defaultFavicon.svg") !important; 
}

oomingmak

Hi calico. This is great! It works perfectly.

I take it that the second line should have said width:0px rather than width:o but it still worked. In fact it works even with the width command omitted entirely.

I do have one final question regarding changing the title text on that same tab (which I shall ask in a separate post) but as far as changing this icon goes, your css solution has solved the problem.

Thank you so much.