Firefox uses apple-touch-icon in Urlbar history #4912

Closed
opened 2025-11-02 06:06:59 -06:00 by GiteaMirror · 2 comments
Owner

Originally created by @silverwind on GitHub (Feb 21, 2020).

Urlbar history entries in Firefox on macOS have apple-touch-icon as their icon and the browser seems to actively pull the icon during page load. We should seek to prevent this and it should just use the shortcut icon as the apple icon looks ugly with the opaque white background on a dark browser theme:

image
<link rel="shortcut icon" href="/img/favicon.png">
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
Originally created by @silverwind on GitHub (Feb 21, 2020). Urlbar history entries in Firefox on macOS have `apple-touch-icon` as their icon and the browser seems to actively pull the icon during page load. We should seek to prevent this and it should just use the `shortcut icon` as the apple icon looks ugly with the opaque white background on a dark browser theme: <img width="188" alt="image" src="https://user-images.githubusercontent.com/115237/75044704-69954400-54c2-11ea-8231-5ce2b62025e3.png"> ```html <link rel="shortcut icon" href="/img/favicon.png"> <link rel="apple-touch-icon" href="/img/apple-touch-icon.png"> ```
GiteaMirror added the topic/ui label 2025-11-02 06:06:59 -06:00
Author
Owner

@silverwind commented on GitHub (Feb 21, 2020):

Related discussion: https://old.reddit.com/r/firefox/comments/71rjkt/why_is_top_sites_using_appletouchicon_meta/

I think it's time to remove the opacity on the apple-touch-icon again to fix this:

@silverwind commented on GitHub (Feb 21, 2020): Related discussion: https://old.reddit.com/r/firefox/comments/71rjkt/why_is_top_sites_using_appletouchicon_meta/ I think it's time to remove the opacity on the `apple-touch-icon` again to fix this:
Author
Owner

@silverwind commented on GitHub (Feb 21, 2020):

More info: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/UI_considerations#Rich_icons

Checked GitHub, they do not define apple-touch-icon at all, just this which seems to serve the same purpose of a "rich icon":

<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">

apple-touch-icon does not need to be specified in HTML as supporting Apple devices will retrieve it from static URL /apple-touch-icon.png (In contrast with Firefox which will not do that). I will attempt this later.

@silverwind commented on GitHub (Feb 21, 2020): More info: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/UI_considerations#Rich_icons Checked GitHub, they do not define `apple-touch-icon` at all, just this which seems to serve the same purpose of a "rich icon": ``` <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub"> ``` `apple-touch-icon` does not need to be specified in HTML as supporting Apple devices will retrieve it from static URL `/apple-touch-icon.png` (In contrast with Firefox which will not do that). I will attempt this later.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/gitea#4912