Liferay DXP Configure Favicon Displayed to the End Users
A favicon (pronounced “fave-icon”) is a small, iconic image that represents your website. Favicons are often found in the address bar of your web browser, but they can also be used in lists of bookmarks in web browsers and feed aggregators.
This post is intended to illustrate one of the easier solutions that we have developed to display the desired site favicon to end users when navigating the Liferay control panel. This solution also applies to users viewing Documents and Media files that are shared across multiple sites from the Global site; the default behavior in Liferay in this scenario is to display a generic Liferay favicon, while this solution allows you to display a custom favicon based on the site hostname. This solution is useful in the following scenario:
- You have multiple websites hosted in Liferay without a common favicon that applies for all the sites.
- You want to override the default favicon displayed by Liferay while navigating the control panel.
- You want to override the default favicon displayed by Liferay for documents and media files stored in the Global site that are shared across multiple sites in your Liferay instance.
Liferay DXP provides a very easy way to override the default favicon at the site level. This is usually achieved by overriding the favicon in the theme that is applied to a site; however, this solution doesn’t work when you have shared documents and media files across multiple sites. Also, the override doesn’t work when navigating the control panel. To fix this issue, you could override the default Liferay favicon by using a hook. However, the development path might not be ideal if overriding the favicon was not considered while budgeting for the project.
Configuration example
Here’s an example snippet that would be a part of the <VirtualHost> configuration for the sites followed by the explanation. Please note that for this solution to work in all scenarios, you would also need to copy the favicon file to the document root of the VirtualHost for which you want to override the Liferay default favicon for.
ProxyPass /favicon.ico !
RewriteEngine On
RewriteRule "^/o/classic-theme/images/favicon.icoquot; “o/custom-theme/images/color_schemes/siteA/favicon.ico” [R,L]
RewriteRule “^/o/admin-theme/images/favicon.ico
quot; “/o/custom-theme/images/color_schemes/siteA/favicon.ico” [R,L]
RewriteRule “^/favicon.ico
quot; "/o/custom-theme/images/color_schemes/siteA/favicon.ico" [R,L]
Please note that the paths listed are examples only and you would need to override these with the path to the location of your favicon file.
For the configuration listed above, the following section explains the configuration in detail:
ProxyPass /favicon.ico ! – This line tells Apache HTTPD to not forward the request to the backend Liferay instance.
RewriteEngine On – This line turns the mechanic for ReWrite rules in Apache HTTPD. Usually requires mod_rewrite to be enabled.
RewriteRule "^/o/classic-theme/images/favicon.ico$" "o/custom-theme/images/color_schemes/siteA/favicon.ico" [R,L] – This line overrides the favicon path for the classic-theme in Liferay while navigating the pages this theme has been applied to.
RewriteRule "^/o/admin-theme/images/favicon.ico$" "/o/custom-theme/images/color_schemes/siteA/favicon.ico" [R,L] – This line overrides the favicon path for the control panel in Liferay.
RewriteRule "^/favicon.ico$" "/o/custom-theme/images/color_schemes/siteA/favicon.ico" [R,L] – This line overrides the favicon path for any pages that are using the default favicon path.
If none of these above-listed rules apply to the page being viewed by the end users, the default favicon will be loaded from the document root of the virtual host in Apache HTTPD.
Summary
End-user experience can make or break the usage of a website. While favicon might not be a huge deal to end-users, it is always a good idea to maintain consistency across the site. Favicon is one of the usually overlooked items and can be configured with ease without dedicating resources to development cycles.
If you have questions on how you can best leverage our experience, would like further examples and/or need help with your Liferay DXP implementation, please engage with us via comments on this blog post, or reach out to us.
Additional Resources
You can also continue to explore Liferay DXP by checking out the following posts.
Serverless and PaaS, FaaS, SaaS: Same, Similar or Not Even Close?
Creating JAX-RS REST Services in Liferay DXP (development perspective)
Top 5 DevOps Features in Liferay DXP (DevOps perspective)