Native Site Icon feature in Customizer is outdated

[Guido07111975]

Hi,

The native Site Icon feature in Customizer is outdated and should be updated.

Windows:
1) There's only 1 Windows Tile (270x270px). To cover newer devices there should be a delcaration for the small, medium, wide and large Tile.
Source ​here.
2) There should be a colorpicker for the Windows Tile.
3) Because the wide Windows Tile is rectangular (310x150px), there should be an additional file input for this Tile.
4) To overwrite the prefered XML browser configuration file, this should be added:
<meta name="msapplication-config" content="none" />

Regarding 2 and 3 check attachment.

iOS:
5) Instead of using rel="apple-touch-icon-precomposed" it's more common to use rel="apple-touch-icon" nowadays. Example:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Guido

[Guido07111975]

New site icon controls

[Guido07111975]

Regarding 3 and 4 check attachment.

Should be: Regarding 2 and 3 check attachment.

[celloexpressions]

The extent of Windows icons provided may drift too far into plugin territory. I have a plugin that addresses this, although it still needs to be updated for Windows 10 (currently still designed for Windows 8.1, and predates the core site icon feature). It does include a feature for Windows "live tiles", which only requires a single line of html on the frontend output. This feature should be considered for core inclusion - it pulls in the latest posts and their featured images and dynanically updates the tile on the start screen. The square tiles can all be provided, easily, by core - the rectangular tile crop should probably stay in plugin form (and needs to be added to this plugin).

​https://wordpress.org/plugins/custom-windows-pinned-tiles/

[Guido07111975]

Hi Nick,

True, this might drift too far into plugin territory.. but I suggest to update this core feature at least, so it covers most regular devices and OSs again.

Guido

[kjellr]

Hey there. @karmatosed, @joshuawold and I chatted about this in today's design triage, and the general consensus is below:

1) There's only 1 Windows Tile (270x270px). To cover newer devices there should be a delcaration for the small, medium, wide and large Tile.

It probably makes sense to declare the small, medium, and large tiles here, since they're all just alternate sizes of the square image we're already creating.

2) There should be a colorpicker for the Windows Tile.
3) Because the wide Windows Tile is rectangular (310x150px), there should be an additional file input for this Tile.

In general, these two feel like plugin territory. The square site icon is used universally, across all browsers, whereas this is targeting a specific system. It doesn't make sense for us to auto-crop the rectangular variant of this image, but it also may be confusing to suggest users create a whole custom crop for this one use case.

4) To overwrite the prefered XML browser configuration file, this should be added:
<meta name="msapplication-config" content="none" />
5) Instead of using rel="apple-touch-icon-precomposed" it's more common to use rel="apple-touch-icon" nowadays. Example:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

We'll hold off on weighing in here, since they're not necessarily UX/UI related. 👍

[dlh]

Seems like a patch is needed for (1), at least, and possibly (4). The switch to rel="apple-touch-icon" was made separately in [46698].

[celloexpressions]

If we add a color option, it could be applied for the windows tiles as noted above and also for browsers supporting:

<meta name="theme-color" content="#f7f7ec">

There is limited browser support for that currently, but it works for the chunk of people using Chrome on Andriod. See ​https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color.

The "live" part of the Window tiles would ideally use the RSS feeds built into WordPress instead of requiring something separate. Might be worth a suggestion for that coming from the WordPress team. And in general, it seems like WordPress as a project is in a position now (40%) to work with browsers and operating systems to standardize on unified image sizes and APIs across the web, rather than reacting to the periodic changes that they make.

[celloexpressions]

Also noting that any site identity color option could become a good way for themes and plugins to react to this site-wide setting rather than always integrating their own color/design options. Something to explore with the Gutenberg global styles project.

[celloexpressions]

#47417 was marked as a duplicate.

[celloexpressions]

See #47417 for previous discussion of 48px sizes (and multiples) for consideration alongside the sizes proposed above.