WordPress.org

Make WordPress Core

Opened 20 months ago

Last modified 8 months ago

#43469 new enhancement

Native Site Icon feature in Customizer is outdated

Reported by: Guido07111975 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9.4
Component: Customize Keywords: ui-feedback ux-feedback has-screenshots
Focuses: Cc:
PR Number:

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 20 months ago.
New site icon controls

Download all attachments as: .zip

Change History (8)

@Guido07111975
20 months ago

New site icon controls

#1 @Guido07111975
20 months ago

Regarding 3 and 4 check attachment.

Should be: Regarding 2 and 3 check attachment.

#2 @SergeyBiryukov
20 months ago

  • Description modified (diff)

#3 @melchoyce
19 months ago

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

#4 @celloexpressions
19 months 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
19 months 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.


8 months ago

#7 @kjellr
8 months 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. 👍

Note: See TracTickets for help on using tickets.