TryGhost/Ghost

Bookmark cards prioritize apple-touch-icon over regular favicons

Chiusa

#28.761 aperta il 20 giu 2026

 (1 commento) (0 reazioni) (0 assegnatari)JavaScript (11.865 fork)batch import
bugcommunitygood first issue

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

  1. 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">
  1. Ensure the favicon and Apple Touch Icon are visually different (for example, a transparent favicon and a solid-background Apple Touch Icon).
  2. Insert the website URL into a Ghost article as a bookmark card.
  3. 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

Guida contributor