Set Site Icon background color to transparent

[w3bdsgn]

Hello,

In load-styles.php:
Set background to transparent, otherwise round icons have an unwanted background color. This is especially apparent when using a dark menu theme.

I suggest to change

#wpadminbar #wp-admin-bar-site-name>.ab-item .site-icon {
   background: #f0f0f1;
}    

to

#wpadminbar #wp-admin-bar-site-name>.ab-item .site-icon {
    background: transparent;
}

Best regards,
Alexander

[afercia]

Can be reproduced, for example, by using an image with a circulare shape and a transparent background.

[jorbin]

Milestoning for 7.1.1 as 7.1 added the site icon to the admin bar.

https://core.trac.wordpress.org/ticket/65924

Tested using a semi-transparent PNG set as the site icon.
Before:

After:

[r1k0]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/13229

Environment

• WordPress: 7.2-alpha-63166-src
• Subdirectory: No
• PHP: 8.3.33
• Server: nginx/1.31.4
• Database: mysqli (Server: 8.4.11 / Client: mysqlnd 8.3.33)
• Browser: Chrome 151.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.3.1

Steps taken

1. Add a site icon via Settings > General and save changes.
2. Observe the site icon in the admin bar before and after the patch.
3. ✅ Patch is solving the problem

Expected result

• Rounded and semi-transparent site icons shouldn't have a background to make sure they blend in with the rest of the admin background color.

Additional Notes

• None

Screenshots/Screencast with results

• Screenshot before:

• Screenshot after:

[r1k0]

Also, does the current wording in the site icon section sound like only square icons are acceptable?

[w3bdsgn]

What do you think of this change to the text:

The Site Icon appears in browser tabs, bookmark bars, and within the WordPress mobile apps. It must have a square aspect ratio (1:1) and be at least 512 × 512 pixels.

[wildworks]

I recall that this background color was intentional. If the site icon's background color became transparent, the black logo would blend in with the admin bar, making it difficult to see. In other words, fixing one thing would create another problem. Unfortunately, I don't think there's an ideal solution, as icons of all colors might be rendered there. Personally, I find the current background color an acceptable compromise for all scenarios.

cc @fushar @joen

[w3bdsgn]

A well-designed website icon or favicon should work on both light and dark backgrounds and provide sufficient contrast. It should be neither completely white nor completely black. Wikipedia, for example, uses a dark letter icon with a white, slightly rounded background. This way, the website icon works on all types of backgrounds. Therefore, I don’t believe it’s the CMS’s job to set a background color or try to fix contrast issues with specific website icons.

[sabernhardt]

General Settings: Site Icon with dark image, in Fresh admin scheme, with OS dark mode, in trunk

[sabernhardt]

General Settings: Site Icon with dark image, in Light admin scheme, with OS light mode, in trunk

[sabernhardt]

General Settings: Site Icon with light image, in Fresh admin scheme, with OS dark mode, in trunk

[sabernhardt]

General Settings: Site Icon with light image, in Light admin scheme, with OS light mode, in trunk

[sabernhardt]

older WordPress versions had used the Site Icon in the Post Editor against a dark background

[sabernhardt]

how WordPress 6.5 showed a dark icon image against both light and dark backgrounds (in General Settings)

[sabernhardt]

Some of the Site Title is visible on small screens in WordPress 7.1 (icon image has light gray background color)

[sabernhardt]

A well-designed website icon or favicon should work on both light and dark backgrounds and provide sufficient contrast.

Ultimately, yes, the image needs to have sufficient contrast against both light and dark backgrounds. However, even make.wordpress.org uses a transparent PNG with a dark logo and no background.

A lack of contrast, either dark against dark or light against light, would make the link quite unusable on smaller screens. A similar link in the post editor for older WordPress versions could have been invisible. [62625] allowed some of the Site Title to show next to the image, so the toolbar link should not be completely invisible right now, but it's still not easily recognizable. (#66064 should fix the text showing.)

[afercia]

A note on the text: it is used also in wp-includes/class-wp-customize-manager.php.

[darshitrajyaguru97]

Test Report

Patch tested: ​PR #13229

Environment

• WordPress: 7.2-alpha-63166-src
• PHP: 8.3.33
• Server: nginx
• Database: MySQL
• Browser: Chrome
• OS: Windows 11
• Theme: Twenty Twenty-Five
• MU Plugins: None activated
• Plugins: Test Reports 1.3.1

Steps to Test

• Go to Settings > General.
• Add a site icon and save the changes.
• Check the site icon displayed in the admin bar.
• Compare the appearance before and after applying the patch.

Test Result

Patch is solving the issue.

Expected Result

Rounded and semi-transparent site icons should not have an additional background, allowing them to blend naturally with the admin bar background.

Can we also update the site icon preview in Settings -> General? See this PR, which I worked on independently before seeing this PR 😄

​https://github.com/WordPress/wordpress-develop/pull/13289

[wildworks]

#65974 was marked as a duplicate.

[fushar]

Sorry @wildworks I somehow didn't get email notifications for your mention, and seems like @joen also missed it. I ended up filing a duplicate ticket because I was bothered with it: https://core.trac.wordpress.org/ticket/65974

I agree completely that we should remove the additional white background. In many cases, it breaks the brand identity which has specific site icon shape.

If we're moving forward with this, @audrasjb can we also incorporate my PR changes ​https://github.com/WordPress/wordpress-develop/pull/13229 which also removes the site icon background on Settings -> General?

Tested against local Studio (WP trunk/SQLite)

Verified the fix works as intended.

Setup: Applied the patch to both admin-bar.css and the minified admin-bar.min.css (the admin bar loads the concatenated/minified bundle via load-styles.php). Set a semi-transparent PNG as the site icon and measured the icon's computed background-color:

State	Computed background-color
Before patch	rgb(240, 240, 241) (#f0f0f1)
After patch	rgba(0, 0, 0, 0) (transparent)

Before/after:

Before	After
light-gray square visible behind icon	icon blends cleanly into the dark admin bar

Note for other testers: if you're testing on a site with the Gutenberg plugin active, its command-palette.php compat shim inlines its own stale duplicate of the admin-bar CSS (including the old #f0f0f1 rule) directly into a <style> tag in <head>. That masks this fix — the background will still appear even with the patch correctly applied to core. Deactivating Gutenberg confirmed the core fix is correct in isolation.

Also checked admin-bar-rtl.css, which still has the old rule — expected, since RTL files are build-generated (RTLCSS), not hand-edited per PR.

No regressions found in the surrounding admin-bar rules. 👍

[Joen]

Indeed I did not get a notification, however I did get one just now from you @fushar. And I would just agree with what's already on track in this discussion: let's remove the background.

[ugyensupport]

Admin Bar site icon before patch — semi-transparent icon shown with the #f0f0f1 background square (PR #13229 test)

[ugyensupport]

Admin Bar site icon after patch — background removed, icon blends into the dark admin bar (PR #13229 test)

[ugyensupport]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/13229

Environment

• WordPress: trunk (7.1-alpha, SQLite)
• Server: PHP 8.5.8 built-in dev server
• Browser: Chromium (Playwright)
• OS: macOS

Steps taken

• Set a semi-transparent PNG (512×512, ~50% alpha) as the Site Icon via Settings > General.
• Viewed the Admin Bar and measured the icon's computed background-color before and after applying the patch to admin-bar.css / admin-bar.min.css.

Test Result

Patch is solving the problem.

• Before: computed background-color = rgb(240, 240, 241) (#f0f0f1)
• After: computed background-color = rgba(0, 0, 0, 0) (transparent)

Expected result

Rounded and semi-transparent site icons shouldn't have a background, so they blend in with the rest of the admin bar background color.

Additional Notes

If testing on a site with the Gutenberg plugin active, note that its command-palette.php compat shim inlines its own stale duplicate of the admin-bar CSS (including the old #f0f0f1 rule) directly into a <style> tag in <head>, which can mask this fix in the browser even when the patch is correctly applied to core. Deactivating Gutenberg confirmed the core fix is correct in isolation.

Also checked admin-bar-rtl.css, which still has the old rule — expected, since RTL stylesheets are build-generated (RTLCSS) rather than hand-edited per PR.

Screenshots with results

Before:

After:

[nkpathan]

Patch Testing Report

Patch tested: PR ​https://github.com/WordPress/wordpress-develop/pull/13229

Environment

• WordPress: 7.1
• PHP: 8.3.33
• Server: nginx
• Database: MySQL
• Browser: Chrome
• OS: Windows 11
• Theme: Twenty Twenty-Five
• MU Plugins: None activated
• Plugins: None activated

Steps to Test

1. Go to Settings > General.
2. Add a site icon and save the changes.
3. Check the site icon displayed in the admin bar.
4. Compare the appearance before and after applying the patch.
5. ✅ Patch is solving the problem: The site icon no longer has an additional background, allowing rounded and semi-transparent icons to blend naturally with the admin bar background.

Expected Result

• Rounded and semi-transparent site icons should not have an additional background.
• The site icon should blend naturally with the admin bar background.

[adrianduffell]

This was discussed in today’s bug scrub for 7.1.1. It looks like next steps are to find an owner for the ticket and also reviews for the PR: ​https://github.com/WordPress/wordpress-develop/pull/13229

Can we also update the site icon preview in Settings -> General? See this PR, which I worked on independently before seeing this PR

@fushar What are the issues you see in Settings > General?

Please note the RC for 7.1.1 is September 10th if we want it included in that version. Otherwise it is fine to punt to 7.1.2.

@fushar What are the issues you see in Settings > General?

My PR also removes the background from the site icon preview, so that it matches the actual behavior. I'm copying the image from the PR here:

Please note the RC for 7.1.1 is September 10th if we want it included in that version.

I think this is good for 7.1.1. The fix is straightforward and contained. Let's do it :)

[tyxla]

Thanks for your work on this one, folks. I'm picking this one up to take it home.

[tyxla]

In 63552:

Toolbar: Remove the light background behind the Admin Bar site icon.

The site icon in the admin bar was given a #f0f0f1 background to match the
my-account (user avatar) node. Unlike avatars, which are always opaque, site
icons are frequently transparent PNGs with a non-square shape, and the light
square showed through them against the dark admin bar, breaking the icon's
intended silhouette.

Removing the background lets transparent icons blend into the toolbar. Opaque
icons are unaffected, and icons that lack contrast against the admin bar are
considered the site owner's responsibility, consistent with how a favicon must
already work against varying browser chrome.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/13229

Props w3bdsgn, afercia, jorbin, audrasjb, r1k0, wildworks, sabernhardt,
darshitrajyaguru97, fushar, ugyensupport, nkpathan, joen, adrianduffell,
adamsilverstein, tyxla.

Fixes #65924.

[tyxla]

Reopening to backport to the 7.1 branch

[tyxla]

In 63553:

Toolbar: Remove the light background behind the Admin Bar site icon.

Merges [63552] to the 7.1 branch.

See #65924.

[tyxla]

Committed to trunk in [63552].

Merged to the 7.1 release branch: [63553]

Closing as fixed.

[sabernhardt]

[63553] already committed the change to the 7.1 branch, but that should have had the ​double sign-off. If another committer agrees with the change, please approve it.

[joedolson]

Approving for backport to 7.1.

@tyxla Can you review the process for merging to branches? All merges to any branch requires double-committer sign off, and there's also a formal structure for the commit messages. See ​https://make.wordpress.org/core/handbook/best-practices/commit-messages/#reviewed-by-and-merges for details.

[tyxla]

Oops, sorry for missing it, but thanks for confirming! Will do.