Bookmark cards prioritize apple-touch-icon over regular favicons
#28.761 aperta il 20 giu 2026
Metriche repository
- Star
- (54.676 stelle)
- Metriche merge PR
- (Merge medio 19g 11h) (658 PR mergiate in 30 g)
Descrizione
Issue Summary
When generating bookmark card metadata, Ghost explicitly prioritizes apple-touch-icon entries over regular favicons.
The relevant code is located in: ghost/core/core/server/services/oembed/oembed-service.js
const pickFn = (sizes, pickDefault) => {
// Prioritize apple touch icon with sizes > 180
const appleTouchIcon = sizes.find(item => item.rel?.includes('apple') && item.sizes && item.size.width >= 180);
const svgIcon = sizes.find(item => item.href?.endsWith('svg'));
return appleTouchIcon || svgIcon || pickDefault(sizes);
};
Because of this logic, any apple-touch-icon with a width of at least 180px is selected before the site's regular favicon.
Why this may be problematic
apple-touch-icon and favicons often serve different purposes.
Apple Touch Icons are intended for iOS home screen shortcuts and often follow different design guidelines than favicons. For example, site owners may intentionally use a solid-background Apple Touch Icon while using a transparent favicon elsewhere on the web.
As a result, the icon selected for bookmark cards may not actually be the icon that the site owner intends to represent the website.
Suggested improvement
It may be preferable to:
- Prioritize SVG favicons first.
- Then use the default favicon selection logic (pickDefault).
- Only fall back to apple-touch-icon when no standard favicon is available.
This would better reflect the purpose of Apple Touch Icons while preserving the site's intended favicon for bookmark card previews.
Steps to Reproduce
- Create a website that defines both a regular favicon and an Apple Touch Icon.
<link rel="icon" href="/favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
- Ensure the favicon and Apple Touch Icon are visually different (for example, a transparent favicon and a solid-background Apple Touch Icon).
- Insert the website URL into a Ghost article as a bookmark card.
- Observe that the bookmark card uses the Apple Touch Icon instead of the regular favicon.
Ghost Version
v6.46.0
Node.js Version
v22.23.0
How did you install Ghost?
Local install using Ghost-CLI
Database type
MySQL 5.7
Browser & OS version
Version 149.0.7827.115 (Build officiel) (arm64) on macOS
Relevant log / error output
Code of Conduct
- I agree to be friendly and polite to people in this repository