在 AEM 6.2 中使网站图标跨设备和屏幕分辨率可用的推荐方法是什么？

Question

我有一个用例，在 Chrome 最近查看的网站中，favicon 显示在桌面选项卡中，但不显示在移动设备上。

浏览 SO 和网络后，我发现了多种方法，例如使用 manifest.json、browserConfig.xml 或指定所有预期大小的多个标签。

文档非常偏斜，要找到一种特别推荐的显示网站图标的方式并不容易。

这些是我到目前为止尝试过的方法。

使用 https://realfavicongenerator.net/，我为
上传了一张 png 图片图标并包含所有生成的演绎版，site.webmanifest 和 broswerconfig.xml 在服务器根目录中。
在此之后，我将在我的标签中生成的块包含在基本模板中 html。

我可以使用这种方法，还是有更好、更紧凑的方法来确保网站图标在所有移动和桌面浏览器的所有屏幕分辨率下完美呈现？

Answer 1

适用于普通网站的相同最佳实践也适用于 AEM 应用程序。

AEM WCM Core components 有一个针对不同视口使用多个网站图标的工作示例。

请参阅存储库中的以下文件。

Head.html 下页面组件

<template data-sly-template.head="${ @ page }" data-sly-use.headlibRenderer="headlibs.html">
    ------------------
    <!--/* For IE 9 and below. ICO should be 32x32 pixels in size */-->
    <sly data-sly-test.faviconIco="${page.favicons['faviconIco']}">
        <!--[if IE]><link rel="shortcut icon" href="${faviconIco}"/><![endif]-->
    </sly>
    <!--/* Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. */-->
    <link data-sly-test.faviconPng="${page.favicons['faviconPng']}"
          rel="icon" type="image/png" href="${faviconPng}"/>

    <link data-sly-test="${!faviconPng && faviconIco}"
          rel="icon" href="${faviconIco}"/>

    <link data-sly-test.touchIcon60="${page.favicons['touchIcon60']}"
          rel="apple-touch-icon" sizes="60x60" href="${touchIcon60}"/>

    <link data-sly-test.touchIcon76="${page.favicons['touchIcon76']}"
          rel="apple-touch-icon" sizes="76x76" href="${touchIcon76}"/>

    <link data-sly-test.touchIcon120="${page.favicons['touchIcon120']}"
          rel="apple-touch-icon" sizes="120x120" href="${touchIcon120}"/>

    <link data-sly-test.touchIcon152="${page.favicons['touchIcon152']}"
          rel="apple-touch-icon" sizes="152x152" href="${touchIcon152}"/>

</template>

PageImpl.java

protected void loadFavicons(String designPath) {
    favicons.put(PN_FAVICON_ICO, getFaviconPath(designPath, FN_FAVICON_ICO));
    favicons.put(PN_FAVICON_PNG, getFaviconPath(designPath, FN_FAVICON_PNG));
    favicons.put(PN_TOUCH_ICON_120, getFaviconPath(designPath, FN_TOUCH_ICON_120));
    favicons.put(PN_TOUCH_ICON_152, getFaviconPath(designPath, FN_TOUCH_ICON_152));
    favicons.put(PN_TOUCH_ICON_60, getFaviconPath(designPath, FN_TOUCH_ICON_60));
    favicons.put(PN_TOUCH_ICON_76, getFaviconPath(designPath, FN_TOUCH_ICON_76));
}

为了更好地了解网站图标最佳实践 -

favicon best pracs
jonathan neal

在 AEM 6.2 中使网站图标跨设备和屏幕分辨率可用的推荐方法是什么？

What's the recommended way to make favicon available across devices and screen resolutions in AEM 6.2?

favicon

aem