[general] Customize favicon's color

[ashish-rs]

When we open multiple tabs, both Salesforce and Inspector, then the inspector tabs are not easily identifiable (screenshots below).
For fewer tabs it's fine, but it becomes slightly difficult when we've many tabs open in a single browser window.

Would it be possible to change the color of the icon please or give users an option to do so?
Thanks.

It was easy in the original inspector:

[tprouvot]

That's a good idea which has been requested by other members of the community 👍

[tprouvot]

Will be released in 1.23 🚀 and in the beta version sooner

[RebbePod]

Anyway to not have to set it for each org manually?

Perhpas it can match the color of this extension somehow
https://chromewebstore.google.com/detail/salesforce-colored-favico/peohlnebahcddpmfaplmilpkgbkkcdho?hl=en

[tprouvot]

Hi @RebbePod,
I prefer to keep the default favicon as it is for the users who don't want custom favicons.

I don't know how are you dev skills but I think you/we can code something in order to add a favicon for all the orgs you've visited.
Let me know if you're interested in this solution

[RebbePod]

@tprouvot Theres two parts to this, one the way I see it, have an option to auto set each org a different color. So every org visited is unique. Second part is copying the functionality of that other extension, giving an option for the favicon to be colored for the org pages not just inspector.
If we get part two complete the colors should match to part 1.

My skills are limited, but I can definitely try to take a look if you give me some direction

[tprouvot]

Part 2 is already developed and available in the beta version.
How many orgs are you working on ? Because to me it would be much more faster to configure each color on the org when needed

[RebbePod]

Over 30 😀

[RebbePod]

it's also about ease of use. A setting to change the color makes sense, but why shouldn't auto assign one to start off?

[tprouvot]

@RebbePod

1. Open data export page
2. Right click on the page and select inspect
3. Paste following code in chrome dev console

let colors = ['green', 'orange', 'pink', 'purple', 'red', 'yellow'];

let orgs = Object.keys(localStorage).filter((localKey) =>
    localKey.endsWith("_isSandbox")
);
orgs.forEach((org) => {
    let sfHost = org.substring(0, org.indexOf(("_isSandbox")));
    let randomFavicon = colors[(Math.floor(Math.random() * colors.length))]
    console.info(sfHost + "_customFavicon", randomFavicon);
    localStorage.setItem(sfHost + "_customFavicon", randomFavicon);
});

[RebbePod]

Will this keep the color of each one, so it's the same color everytime I reopen it?

[tprouvot]

@RebbePod yes

[RebbePod]

@tprouvot it's working great so far, not sure if you'd like to incorporate it in somehow

[tprouvot]

@RebbePod actually I documented the code in the how-to section and enhanced the feature by increasing the available colors with HTML codes