We followed "https://helpx.adobe.com/experience-manager/using/AEM63_favicon.html" to assign a favicon to each adaptive form.
1. The folder /etc/designs/ does not exists so we create this folder (sling:folder)
2. added a cq:page with our project name and added a favicon to this page as a child.
Updated our adaptive form:
3. /content/forms/af/<project name>/<adaptive form name>/jcr:content
4. added node "cq:designPath" of type String with value "/etc/designs/<project name>"
Yeah.. FavIcon is now available
Issue is that we get an additional CSS file in the html <head> that does not exists and the browser console report this error.
Refused to apply style from 'https://<server>:<port>/etc/designs/<project name>.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Actual the browser is trying to load the file, but the server respond with a 404 as the file does not exists. (log file entry in "request.log")
Solved! Go to Solution.
I found a new issue around this.
When we want to edit the page in the form editor the editor did not work.
In the server log file we find this error
12.05.2020 16:21:32.667 *ERROR* [xxx] GET /etc/designs/<project Name>.css HTTP/1.1] org.apache.jsp.libs.cq.Page.Page_css_jsp resource has no content. path=/etc/designs/<project Name>.css referrer=null
Removing the node "cq:designPath" is the only way to resolve this error so we can continue with our design.
We found a solution, but not sure if this is according to the preferred methods
We notice that the "head.html" in libs is importing a file "customheaderlibs.html" for us to add values to the head tag
1. We created a new hidden component "apps.<project name>.components.pagefavicon" with
2. In the component we added a file "pagefavicon.html" with 1 line of code:
Now we have created 1 level of indirection.
3. added a file "customheaderlibs.html" to the same component. In the file we added 2 lines of code:
<link rel="icon" type="image/vnd.microsoft.icon" href="/etc/designs/<project name>/favicon.ico">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/etc/designs/<project name>/favicon.ico">
4. Navigated to "/content/forms/af/<project name>/<adaptive form name>/jcr:content"
5. edited sling:resourceType with a new value "/apps/<project name>/components/pagefavicon"
6. Now the favicon is appearing.
One note for reference:
Using /etc/designs/<project name>/favicon.ico is 'old school'. We did update our code to '/etc.clientlibs/<projectname>/clientlibs/site/resources/favicon.ico' to be in line with the latest design recommendations
(ps. do not forget allowProxy = true)