Adding favicon to site using sightly | Community
Skip to main content
akhilraj
akhilraj
Level 5
Mar 14, 2023 11:32 AM UTC
Solved

Adding favicon to site using sightly

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
arunpatidar
arunpatidarAccepted solution
New Participant
Mar 14, 2023 3:37 PM UTC

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 "/>

Arun Patidar
View reply

6 replies

HeenaMadan
HeenaMadan
New Participant
Mar 14, 2023 1:27 PM UTC

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}"/>

Translate
Jagadeesh_Prakash
Jagadeesh_Prakash
New Participant
Mar 14, 2023 12:14 PM UTC

@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'}"/>

 

 

Translate
    arunpatidar
    arunpatidar
    New Participant
    Mar 14, 2023 11:54 AM UTC

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

     

     

    Translate
    Arun Patidar
    akhilraj
    akhilrajAuthor
    Level 5
    Mar 14, 2023 3:11 PM UTC

    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 ?

    Translate
    arunpatidar
    arunpatidarAccepted solution
    New Participant
    Mar 14, 2023 3:37 PM UTC

    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 "/>

    Translate
    Arun Patidar
      Terms & ConditionsAccessibility statement

      Loading footer...