Customizing : Site Icon CSS Change

[ravipatel]

When image not exits on provided path display css issue.
Please review bellow screenshots.

Issue :

Solution :

[ravipatel]

css changes for a site icon

[dlh]

Hi @ravipatel,

I'm having difficulty understanding the issue from the screenshots. Could you provide steps to replicate the issue?

[ravipatel]

1) Add favicon icon - I am using png image

2) Remove from upload directory or rename image name temp for show wrong path

3) After image path not found you can see this ui issue.

​https://prnt.sc/uzb75e

[sabernhardt]

"Remove from upload directory or rename image" is the key step to reproduce the missing image error. When the site icon image is deleted in the media library, the site icon setting is removed and the Customizer no longer tries to show a preview.

To adjust the alt text styles, setting display: inline-block and changing the color works here. Including the padding is not a good option, though, because it would change the app icon preview when the image exists at the expected URL.

[sabernhardt]

alternative text showing for the app icon and browser icon, in light and dark previews

[sabernhardt]

I tried this again, and the styles have changed.

• The App icon preview is inside grid display, with dark text against a light background, so the image does not need display: inline-block or a text color anymore for its alternative text.
• The Browser icon preview does not make the alt text very readable in either light or dark mode. The image theoretically could have a text color like var(--site-icon-address-bar-text), but that still would be difficult to read when "Browser" overlaps the Site Title.

I think being able to read the text in the App icon image effectively indicates that you need to 'Remove' or 'Change image' when the image does not exist at the same URL.

[sabernhardt]

site icon in General Settings, with light mode

[sabernhardt]

site icon in General Settings, with dark mode

[sabernhardt]

The General Settings page has similar results when showing alt text in the site icon previews.