Adding favicon to site using sightly | Community
Skip to main content
akhilraj
akhilraj
Level 5
March 14, 2023
Solved

Adding favicon to site using sightly

  • March 14, 2023
  • 3 replies
  • 1854 views

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.
Best answer by arunpatidar

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

3 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
March 14, 2023

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

 

 

Arun Patidar
akhilraj
akhilrajAuthor
Level 5
March 14, 2023

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
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
March 14, 2023

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
    Jagadeesh_Prakash
    Community Advisor
    Jagadeesh_PrakashCommunity Advisor
    Community Advisor
    March 14, 2023

    @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
      Community Advisor and Adobe Champion
      HeenaMadanCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      March 14, 2023

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

      Terms & ConditionsAccessibility statement

      Loading footer...