Adding favicon to site using sightly

[akhilraj]

Hi Team,

Currently our favicon is loading from doc root of dispatcher.

But going forward we have to load it from AEM.

How we can add favicon icon from AEM? What is the recommended path to keep favicon icon in AEM?

[arunpatidar]

Hi @akhilraj 
You can check core component example, where fevicon loaded from cientlibs but you can also do it from DAM.

[akhilraj]

Thanks @HeenaMadan , @Jagadeesh_Prakash , @arunpatidar .

I tried to add like below for testing purpose:

<link rel="icon" type="image/png" href="/content/dam/project/image/world.png"/>

Activated the head.html/headlibs.html, but not able to see the changes.

Is this the same way we are doing ?

[arunpatidar · Accepted solution]

Can you try with?
<link rel="icon" type="image/png" sizes="48x48" href="/content/dam/project/image/world.png/_jcr_content/renditions/cq5dam.thumbnail.48.48.png "/>

[akhilraj]

This is working fine, and I can see favicon is updated. Thank you so much @arunpatidar 

[Jagadeesh_Prakash]

@akhilraj in head.html of page template. you can use below script to load the icon

<link rel="icon" type="image/png" href="${inheritedPageProperties.favIcon ? inheritedPageProperties.favIcon : '/content/dam/xyz/favicon.png'}"/>

[HeenaMadan]

You can include favicon at your custom app clientlibs. Follow below steps:

Step 1:

You need to add favicon at your custom app clientlibs and this clientlib should be reffered from template policy resources folder

Step 2 :

If you are using WCM Core Page component then it will work as shown in

https://github.com/adobe/aem-core-wcm-components/blob/e49999b3733ceb487fd40774ac4a15f921713336/conte...

<sly data-sly-test.appResourcesPath=${page.appResourcesPath} data-sly-call="${headResources.favicons @ path = appResourcesPath}"></sly>

OR you can also add favicon in DAM and make it authorable at sling site config and use same sightly in head.html

<link rel="icon" href="${pagemodel.faviconSource}"/>