Expand my Community achievements bar.

Adobe Summit 2025: AEM Session Recordings Are Live! Missed a session or want to revisit your favorites? Watch the latest recordings now.

Mark Solution

This conversation has been locked due to inactivity. Please create a new post.

SOLVED

How to add custom Favicon to my site?

Avatar

Level 4

Hi!

I'm beginner and I want add custom favicons, like below (WKND), to my site such that it appears on each page. Tried looking for this, but couldn't find solution. Thus can someone please help me to achieve this. I'm using AEMaaCs.

Thanks!

If posted this in wrong section, please direct me to correct one.

 

sesmic_0-1659865081702.png

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@sesmic head.html under page component - Add this HTML snippet between the <head> ... </head> tags of the page. 


Santosh Sai

AEM BlogsLinkedIn


View solution in original post

8 Replies

Avatar

Community Advisor

Hi @sesmic ,

Please use the below path and it will load the favicon.

<link rel="icon" href="/etc.clientlibs/mysite/clientlibs/clientlib-site/resources/favicon.ico"/>

/apps will be used as proxy with /etc.clientlibs and rest of path remains same.

Similar thread: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/after-sp7-favicon-not-show...

Regards,

Santosh


Santosh Sai

AEM BlogsLinkedIn


Avatar

Level 4

Thanks for the reply!

I've seen that post but couldn't get it. I want browser's tab to show custom favicon for my site & its child pages.
Regarding this, I read somewhere that we need to add " <link rel="shortcut icon" href="resource path" />" in site's head.html. But don't know where this is. 

Avatar

Community Advisor

@sesmic Updated my comment above, 

Please use the below path and it will load the favicon.

<link rel="icon" href="/etc.clientlibs/mysite/clientlibs/clientlib-site/resources/favicon.ico"/>

Santosh Sai

AEM BlogsLinkedIn


Avatar

Level 4

Thanks! But where should I use this path? like in header.html, clientlibs, components htmls etc.
Sorry, I'm newbie don't know much.

Avatar

Correct answer by
Community Advisor

@sesmic head.html under page component - Add this HTML snippet between the <head> ... </head> tags of the page. 


Santosh Sai

AEM BlogsLinkedIn


Avatar

Level 4

@SantoshSai 

Thanks it worked!
There wasn't head.html under page component then I added it. But after adding head.html my page wasn't loading. So, I removed head.html & added the snippet with <head>...<head/> in customheaderlibs.html, which worked. Is this correct, please tell?

Avatar

Community Advisor

That should be OK, but recommendation is to segregate such html's and include in main/page html. 


Santosh Sai

AEM BlogsLinkedIn


Avatar

Level 4

Sorry for replying with another question. but you mean I should use data-sly-include="head.html" in main/page.html?