Unique Badge Icons in Summary

Question

Badges look differently on each SE site, as per the unique themes of each site. However, when looking at the Summary of Accounts in a user's profile, the badges for all sites use the icon for the site that the viewer is viewing the page from at that time.

I think it would be an aesthetic improvement to keep the badge icons consistent with their site of origin, and not where they are being viewed from.

The effect of this change would be subtle, but I think it would help reinforce the appealing idea that the badges from the different sites are unique, different types of rewards, and make it more engaging to collect from all over SE as opposed to focusing on single sites.

Answer 1

I doubt this will happen, though not for the reasons mentioned.

From a design perspective, it's another variable to add into the profile page. The profile page already has a large number of variables within it based on a user's activity. This just increases the complexity. It's not an insurmountable challenge, but it does increase the complexity because every gold, silver, bronze color variation (they vary slightly between themes) works in every other theme. Are you looking to retain the shape more or the distinct colors too? That increases the challenge.

The way badge symbols are displayed would have to be revisited as well. Using a sprite sheet isn't a great solution currently and would only be compounded by this addition. Thankfully badge icons are pretty straightforward, so a easy solution to this is to recreate them with CSS instead of locking them within a sprite file. The benefits of this is it's one less HTTP request, symbols would be scalable and they would be retina/hd-ready as well. Some would prove trickier, but it could be done.

Neither hurdle is impossible. I just don't see it happening soon because work needed to properly deliver this without affecting performance and improving the design. Maybe in the future though. It's a good suggestion.

Answer 2

This will not happen. Displaying all the different icons will...

1. Make the list look just plain weird. The numbers and icons will become incredibly misaligned and not match the site's theme.

2. Cause a huge performance hit. In order to display any possible icons, you'd need a huge sprite sheet with every possible icon from every possible site that has a different theme, as well as extra CSS to properly size and position each icon next to the text. That's a lot of extra effort for a very small and unnecessary aesthetic change.

Answer 3

... when looking at the Summary of Accounts in a user's profile, the badges for all sites use the icon for the site that the viewer is viewing the page from at that time.

There aren't individual files for each site's favicon, they are all in one file. Some sites use one style of badge for all three and some have three different styles.

The favicon for each site is stored in one file called https://cdn.sstatic.net/img/favicons-sprite32.png?v=6703ade32c17 (that name may vary, with updates), a file that is 32 pixels wide and 13572 pixels long (13572/(32+(2*2))=377 icons, for main/meta and sites with no Meta - that's an approximation, I know there's ~175 sites sites, I'm not counting all those icons).

Here's a crop of the favicon file, turned sideways, to give you an idea of its contents; due to its enormous length it's difficult to view:

Notes on reimplementation: The badges on some sites look different based on whether they are bronze, silver or gold; so that increases the storage required by double; instead of a single style for all three.

Ultimately, with a 32*4 (128) bytes wide file, 13572 pixels long, all the favicons and badges could be available for all the sites. The favicons-sprite32.png file is 231kB, so 231*4=924kB bytes for everything.

That's what it would take to implement your suggestion, that and an update to the code to chop up the file.