Make WordPress Core

Opened 7 years ago

Last modified 4 years ago

#43469 new enhancement

Native Site Icon feature in Customizer is outdated

Reported by: guido07111975's profile Guido07111975 Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: has-screenshots needs-patch
Focuses: Cc:

Description (last modified by SergeyBiryukov)

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

Attachments (1)

site-icon-new.jpg (76.9 KB) - added by Guido07111975 7 years ago.
New site icon controls

Download all attachments as: .zip

Change History (13)

@Guido07111975
7 years ago

New site icon controls

#1 @Guido07111975
7 years ago

Regarding 3 and 4 check attachment.

Should be: Regarding 2 and 3 check attachment.

#2 @SergeyBiryukov
7 years ago

  • Description modified (diff)

#3 @melchoyce
7 years ago

  • Keywords ui-feedback ux-feedback has-screenshots added

#4 @celloexpressions
7 years ago

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/

#5 @Guido07111975
7 years ago

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

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


6 years ago

#7 @kjellr
6 years ago

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. 👍

#8 in reply to: ↑ description @dlh
5 years ago

  • Keywords needs-patch added; ui-feedback ux-feedback removed
  • Milestone changed from Awaiting Review to Future Release
  • Version changed from 4.9.4 to 4.3

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].

#9 @celloexpressions
4 years ago

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.

#10 @celloexpressions
4 years ago

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.

#11 @celloexpressions
4 years ago

#47417 was marked as a duplicate.

#12 @celloexpressions
4 years ago

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

Note: See TracTickets for help on using tickets.