I get that a site icon needs to be square, but I don’t know why it needs to be as large as 512×512 or larger.
Can anyone advise why is this, and/or where that image would be used at a resolution higher than that of a favicon (which I understand to be 48×48px or smaller) and what would be the consequences of using a lower resolution image there?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
The site icon in WordPress is worked as a favicon.
And the knowledge about the favicon is mostly limited to 16×16 or 64×64 pixels. But this StackOverflow thread shows there’s a necessity of a 114×114px favicon for Retina Opera, and a 200×200px favicon for Mobile Opera Speed Dial.
The necessity of such a larger icon is mostly to support retina displays, where it requires larger output, and smaller favicon can get pixelated. This article by Thomas Fuchs has a mention of 512×512px retina-ready favicon.
And I found this article with its comments stating that:
512×512px icon in the web manifest to support browser loading splash screens
Also found mention of other sizes like 192×192px, 228×228px etc.
So, with a maximum 512×512px Site icon, WordPress has all the ease to display it in different devices in different display ratios.
Finally this WordPress guide on using Site icon in WordPress could assist you.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0