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

Question

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

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

文档非常偏斜，要找到一种特别推荐的显示favicons的方法并不容易。

这是我到目前为止所尝试的。

• 使用https://realfavicongenerator.net/，我上传了一个png图像 favicon并包含服务器根目录中的所有生成的再现，site.webmanifest和broswerconfig.xml。
• 在此之后，我在基本模板html中包含了我的标签中生成的块。

我可以使用这种方法还是有更好更紧凑的方法来确保favicon在所有移动和台式机浏览器上的所有屏幕分辨率上都能完美呈现？

Answer 1

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

AEM WCM Core components有一个使用多个favicons用于不同视口的工作示例。

请参阅repo中的以下文件。

页面组件下的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>

Page imp了.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最佳实践 -

• favicon best pracs
• jonathan neal