Article summary

Summary

Discusses how to add a Favicon to an AEM site.

A special thank you to Ratna Kumar Kotla, and Prince Shivhare, top AEM community members, for contributing towards this article to ensure it works.

Digital Marketing Solution(s) Adobe Experience Manager 6.3
Audience Author
Required Skills HTML, JavaScript
Version 6.3

Introduction

You can create a FavIcon for an Adobe Experience Manager site. A Favicon is typically an icon associated with a specific site and appears in the web browser tab. For more infomration about a Favicon, see Favicon.

If a site does not have a Favicon, the tab in the browser does not display an image, as shown in this illustration. 

blank
A tab for a web site with no image

In contrast, when a site has a Favicon, it appears in the browser tab, as shown here.

aduck
A Favicon in an AEM site

To add a Favicon to an Experience Manager site, there are several steps that you must perform. This article covers these steps. 

Install the ToyStore Site package

Install the ToyStore package by using Package Maanger. A Favicon is added to this site.

Download

Note:

For information about creating this site, see Creating your First Adobe Experience Manager 6.3 website

Add a Design Page for the ToyStore Site

Add a Design page to the ToyStore site. Once completed, you can add an .ICO file under the location in the AEM JCR. 

aico
An Favicon located under /etc/desgin/toystore

To add a Design page, perform thesee tasks:

1. Go to the following URL: http://localhost:4502/miscadmin#/etc/designs. 

2. Click on the Designs Folder. 

3. Click File, New Page

4. Name the page toystore.

Using a tool like WebDev, upload your favicon.ico to the Toystore location. For information, see WebdAV ACCESS

Note:

Make sure that your favicon is located under /etc/designs/toystore. Also make sure that the Favicon is of standard size - something like 16 x 16 pixels. 

Add a cq:designPath property to the ToyStore site

The final task is to simply add a cq:designPath property to the following path: 

/content/summit-toys/jcr:content

Assign the value of the design page path to this property. For example, /etc/designs/toystore.

Now when you look at the ToyStore site, you will notice that the Favicon shows up in the browser tab. 

http://localhost:4502/editor.html/content/summit-toys/en.html

See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy