Blogs

Isn't this Favicon Thing a Simple Problem to Solve?

Not anymore. That's especially true, if you are picky.

Do you really want a generic letter as your users' bookmarked icon on their mobile devices? Are your logs filling up with WARN messages that various devices can't find the optimal icon they are seeking? Well, each one may represent a lost opportunity to expand your brand impact and user confidence in your site...:

14:18:19,487 WARN [http-bio-8443-exec-379][code_jsp:130]{code="404", msg="/apple-touch-icon-152x152.png", uri=/apple-touch-icon-152x152.png} 14:18:19,597 WARN [http-bio-8443-exec-374][code_jsp:130]{code="404", msg="/apple-touch-icon.png", uri=/apple-touch-icon.png}
05:37:07,635 WARN [http-bio-8443-exec-341][code_jsp:130]{code="404", msg="/apple-touch-icon-76x76-precomposed.png", uri=/apple-touch-icon-76x76-precomposed.png} 

These are the signs that tipped us off we weren't comprehensively solving this issue as well as we could.

The good news is this is easy to expand, control, or enhance from the out-of-the-box setup of most Liferay themes as of this writing.

So, now we are tasked with improving the mobile and web site branding element historically known as "favicon.ico" and on some mobile devices as "touch" icons and others as "tiles." With all the craziness of expanding OS / browser / version combinations, it's becoming hard to decide where to draw the line on how much effort to put into refining this presentation on various target user platforms.

Here are a couple great resources we utilized in our efforts and is suggested background preparation before moving on in the article:

• Mathias—Pedia—Bynens excellent resource relaying "... everything you always wanted to know about touch icons"
• RealFavIconGenerator.net - check and review an extremely comprehensive tool for creating needed icons and code to cover most devices and browsers available.

What is the Default Liferay Setup?

Each theme in Liferay has a favicon.ico available in the /images folder. You may recognize it:

So - to take immediate control of that branding icon as-is, you can copy this file to your /diffs/images/ folder and overwrite it with your own favicon.ico file. Now, you may have something custom like this showing up in (some of) your browser tabs:

However, doing only this, you will still not be meeting the needs of a lot of devices with regard to bookmarking and adding the icon to screens, especially iOS and other mobile device platforms. You will end up with generic bookmark icons being generated when users bookmark your site or even add a favorite page of it to their home screen of their mobile, tablet devices:

or or

These generic icons are being generated because you aren't yet providing the additional images the browsers are looking for to display an intentional icon on their respective devices. The devices will search by default in the site's root folder for the images, which don't exist.

Take Full Control

This was our method / solution, which we may tweak or change significantly in the future, and it's not for everyone, but hopefully gives you ideas to what degree you may choose to adopt it. This solution would meet the needs of common tiled bookmark platforms, all iOS platforms, all common Android Chrome platforms, and all common larger desktop / laptop platform combos. It is also future-proofed for iOS7+. This was based on extrapolations from the article from Mathias Bynens: "Everything you always wanted to know about touch icons" and the great work being done at: RealFavIconGenerator.net.

Instance-wide solution:

1. Using the RealFavIconGenerator submit a nice graphic of your desired icon at the recommended  resolution (260 x 260). After it is processed, paste the provided code into a text editor and download and expand the .ZIP package of icons / objects you can deploy to your site.

2. We next embed the additional link codes to the HEAD of each page across Liferay instance. Create a simple JSP hook to override /html/common/themes/top_head.jsp. We chose to replace:

   <link href="<%= themeDisplay.getPathThemeImages() %>/<%= PropsValues.THEME_SHORTCUT_ICON %>" rel="Shortcut Icon" />

   with something like this:

   <link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194">
   <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
   <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
   <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
   <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
   <link rel="manifest" href="/manifest.json">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1c667b">

3. Create a simple JSP hook to utilize /html/common/themes/top_meta-ext.jsp. Note - you could easily combine both .jsp files in one hook project. We added something like this:

   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="msapplication-TileImage" content="/mstile-144x144.png">
   <meta name="msapplication-config" content="/browserconfig.xml">
   <meta name="theme-color" content="#ffffff">

4. SFTP the files from step 1 that you included in steps 2-3 to the /ROOT folder of your web server (/webapps/ROOT/ for tomcat servers...).
   Here is our list of files to SFTP:
   

   -favicon.ico
   -apple-touch-icon-precomposed.png
   -apple-touch-icon.png
   -favicon-194x194.png
   -android-chrome-192x192.png
   -apple-touch-icon-152x152.png
   -apple-touch-icon-120x120.png
   -apple-touch-icon-76x76.png
   -apple-touch-icon-57x57.png
   -manifest.json
   -safari-pinned-tab.svg
   -mstile-144x144.png
   -browserconfig.xml

Per-Theme Solution (allow each theme to define its own bookmark icons):

1. Using the RealFavIconGenerator submit a nice graphic of your desired icon at the recommended  resolution (260 x 260). After it is processed, paste the provided code into a text editor and download and expand the .ZIP package of icons / objects you can deploy to your site.

2. We next embed the additional link codes to the HEAD of each page across Liferay instance. Create a simple JSP hook to override /html/common/themes/top_head.jsp. We chose to replace:

   <link href="<%= themeDisplay.getPathThemeImages() %>/<%= PropsValues.THEME_SHORTCUT_ICON %>" rel="Shortcut Icon" /> 

   with something like this:

   
   <link rel="shortcut icon" href="<%= themeDisplay.getPathThemeImages() %>/icons/favicon.ico">
   <link rel="icon" type="image/png" href="<%= themeDisplay.getPathThemeImages() %>/icons/favicon-194x194.png" sizes="194x194">
   <link rel="icon" type="image/png" href="<%= themeDisplay.getPathThemeImages() %>/icons/android-chrome-192x192.png" sizes="192x192">
   <link rel="apple-touch-icon" sizes="180x180" href="<%= themeDisplay.getPathThemeImages() %>/icons/apple-touch-icon-180x180.png">
   <link rel="apple-touch-icon" sizes="152x152" href="<%= themeDisplay.getPathThemeImages() %>/icons/apple-touch-icon-152x152.png">
   <link rel="apple-touch-icon" sizes="120x120" href="<%= themeDisplay.getPathThemeImages() %>/icons/apple-touch-icon-120x120.png">
   <link rel="apple-touch-icon" sizes="76x76" href="<%= themeDisplay.getPathThemeImages() %>/icons/apple-touch-icon-76x76.png">
   <link rel="apple-touch-icon" sizes="57x57" href="<%= themeDisplay.getPathThemeImages() %>/icons/apple-touch-icon-57x57.png">
   <link rel="manifest" href="<%= themeDisplay.getPathThemeImages() %>/icons/manifest.json">
   <link rel="mask-icon" href="<%= themeDisplay.getPathThemeImages() %>/icons/safari-pinned-tab.svg" color="#1c667b">

3. Create a simple JSP hook to utilize /html/common/themes/top_meta-ext.jsp. We added something like this:

   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="msapplication-TileImage" content="<%= themeDisplay.getPathThemeImages() %>/icons/mstile-144x144.png">
   <meta name="msapplication-config" content="<%= themeDisplay.getPathThemeImages() %>/icons/browserconfig.xml">
   <meta name="theme-color" content="#ffffff">

4. Create a folder in all your theme /_diffs folder: /_diffs/images/icons
5. SFTP the files from step 1 that you included in steps 2-3 to the folder created in step 4.
6. Replace any default favicon.ico file Liferay may have included with your desired favicon.ico file - e.g in /webapps/ROOT/ you may still want to include an overall

There are Easier Ways

Use rewrite rules... fewer images... for example, see David Hund's "One Icon to Rule Them All" approach / reaction to this same issue:

RewriteRule ^apple-touch-icon(.*).png$ apple-touch-icon.png [L]

Also, see AudreyR's Favicon cheat sheet for another take on obsessive versus compulsive.