Skip to content

Toolbar: optimization: add 64px crop size for the site icon#12607

Open
fushar wants to merge 1 commit into
WordPress:trunkfrom
fushar:retina-site-icon
Open

Toolbar: optimization: add 64px crop size for the site icon#12607
fushar wants to merge 1 commit into
WordPress:trunkfrom
fushar:retina-site-icon

Conversation

@fushar

@fushar fushar commented Jul 20, 2026

Copy link
Copy Markdown

Trac ticket: https://core.trac.wordpress.org/ticket/65668

What

A follow-up to #11781 (site icon in the admin bar). The toolbar builds a 2x srcset for retina displays:

$site_icon_url = get_site_icon_url( 32 );
$site_icon_url_2x = get_site_icon_url( 64 );
$srcset = ( $site_icon_url_2x && $site_icon_url !== $site_icon_url_2x ) ? sprintf( ' srcset="%s 2x"', esc_url( $site_icon_url_2x ) ) : '';
$site_icon = sprintf(
'<img class="site-icon" src="%s"%s alt="" width="20" height="20" />',
esc_url( $site_icon_url ),
$srcset
);

But WP_Site_Icon only generates crops at 270, 192, 180, 32. There is no 64px crop:

270,
/*
* App icon for Android/Chrome.
*
* @link https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
* @link https://developer.chrome.com/multidevice/android/installtohomescreen
*/
192,
/*
* App icons up to iPhone 6 Plus.
*
* See https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
*/
180,
// Our regular Favicon.
32,

So the get_site_icon_url( 64 ) call finds no exact match and falls back to get the first larger size than 64, which is the default thumbnail size (150 x 150). This is too large to serve a 20x20 (or 28x28 in mobile) site icon in the admin bar.

This PR simply adds a new 64 entry to it. With this, browsers can download much smaller image file in retina displays.

Note

This only affects NEW site icon uploads. Existing icons unfortunately won't get the new crop size until it's reuploaded.

This will also benefit the post embeds as it also calls get_site_icon_url( 64 ):

$site_icon_url_2x = get_site_icon_url( 64, $fallback_icon_url );

Testing

  1. Go to Settings -> General.
  2. Upload a site icon.
  3. Save.
  4. Go to wp-admin / frontend.
  5. Inspect the site icon element.
  6. Verify you get the 64x64 crop. Before this, you get 150x150

See the difference in the image file sizes:

Before After
image image

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Opus 4.8
Used for: brainstorming and code generation; reviewed by me.


This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

@github-actions

Copy link
Copy Markdown

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
    it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

@fushar fushar changed the title Toolbar: add 64px crop size for the site icon Toolbar: optimization: add 64px crop size for the site icon Jul 20, 2026
@fushar
fushar marked this pull request as ready for review July 20, 2026 10:59
@github-actions

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props fushar.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@fushar
fushar force-pushed the retina-site-icon branch 2 times, most recently from 0d4c7c7 to d87ce0c Compare July 20, 2026 11:06
@fushar
fushar force-pushed the retina-site-icon branch from d87ce0c to 93eae70 Compare July 20, 2026 11:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant