Favicon on Safari

[meganthecoder]

[This post is mostly informational, but please share your thoughts if you have other solutions.]

The Problem:

The favicon doesn't display on bacom on safari. It shows a generic letter instead.

Background:

In milo, we delay loading the favicon for performance reasons. This is done by adding an icon link with an empty data url

<link rel="icon" href="data:," size="any"/>

which prevents most browsers from automatically looking for the favicon at the root.

Then, we load the real favicon later in documentPostSectionLoading() by updating the link's href.

export default function loadFavicon(createTag, config, getMetadata) {
  const { codeRoot } = config;
  const name = getMetadata('favicon') || 'favicon';
  const favBase = `${codeRoot}/img/favicons/${name}`;

  const favicon = document.head.querySelector('link[rel="icon"]');
  const tags = `<link rel="apple-touch-icon" href="${favBase}-180.png">
                <link rel="manifest" href="${favBase}.webmanifest">`;
  favicon.insertAdjacentHTML('afterend', tags);
  favicon.href = `${favBase}.ico`;
}

This delays the network request for the favicon, allowing other more high priority items to go first, which helps performance.

However, this doesn't work on safari. Safari makes a request for the favicon at the root (e.g. business.adobe.com/favicon.ico), which 404s for bacom.

This problem doesn't show up on prod for CC, DC, homepage, etc. because safari requests www.adobe.com/favicon.ico, which is a valid URL coming from AEM dexter (content header is AEM-Offers).

Conclusion:

For now, we're going to add a favicon at the root for bacom (business.adobe.com/favicon.ico), so that the favicon shows up on safari.

Considering CRUX data isn't gathered on safari, it doesn't seem like a problem from a performance standpoint, and we'll still gain the performance benefit on other browsers. The downside is that we have to maintain the favicon in two places. I didn't find any solutions for delaying the favicon in safari with the limited research I did, but if anyone knows a cross-browser solution, please share!

For non-bacom consumers:

• This currently affects any milo consumer not on www.adobe.com, such as blog.adobe.com.
• This will become a problem for all consumers once www.adobe.com is fully migrated to milo and www.adobe.com/favicon.ico is no longer pointing to AEM dexter.

Ticket: https://jira.corp.adobe.com/browse/MWPW-162313

[chrischrischris]

I don't know if it would make a difference, but instead of a blank data attribute in the icon maybe using a single transparent pixel will work to get updated later like in other browsers:
<link rel="icon" href="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" type="image/gif">

[meganthecoder]

Thanks for the suggestion. I gave it a shot and unfortunately this doesn't work. Maybe safari doesn't allow data urls for their favicon

[overmyheadandbody]

Looping in @salonijain3, as we discussed this last week and it seemed that the issue was resolved. It doesn't seem so judging by this, maybe this deserves another look.

[meganthecoder]

Closing this discussion. We added the favicon at the root on bacom and this solved the issue on safari
https://business.adobe.com/favicon.ico