Favicon doesn't show up on IOS devices

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

Hi All,

Currently I am facing issue with Favicon where it doesn’t get rendered on iPhone/iPad device (IOS version 12.4).

Background – Favicon was implemented in Angular 1 version which works fine. In a general scenario, we just have to include a link href pointing to favicon.ico file in index.html; however it was not displayed on iPhone or iPad. After some research, I found few people faced this issue. To make that working on IOS devices, we have to convert .ICO to .PNG format. This fix worked on desktop, android, iPhone and iPad devices with Angular 1 version.

Issue with (Angular cli - 7.3.8) – With Angular 7 code base, same code with PNG link href in index.html, I am facing issue to render Favicon on iPhone and iPad (desktop/android works fine). I tried multiple solutions from google research and only Base64 image conversion works on iPhone but not iPad.

Appreciate if someone can share their experience to fix this issue so that the fix should work on iPhone/iPad both devices as well as Desktop and Samsung.

Thanks
Disha