TryGhost/Ghost

Bookmark cards prioritize apple-touch-icon over regular favicons

已关闭

#28,761 创建于 2026年6月20日

 (1 条评论) (0 个反应) (0 位负责人)JavaScript (11,888 个派生)batch import
bugcommunitygood first issue

仓库指标

星标
 (54,780 个星标)
PR 合并指标
 (平均合并 19天 11小时) (30 天内合并 658 个 PR)

描述

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

贡献者指南