Favicon

What is Favicon?

Favicon is the icon placed on the web browser tab on the left side of the tab title (the blue Oryon icon for this page). This documentation is important so we can know how the icon changes with and without notifications and to make it easier to change the icon correctly if needed.

This occurs in two different places and two stages, but first, we need to be aware of how the default icon is used.

caution

Icon Name and Path

If the name or file structure of any of the icons used for this, change, it will be necessary to update the <App.razor> (Constellation and Backoffice), the <Oryon.SPA.Layout.Interop.js> and the component <OryonHeadContent.razor>.

Backoffice

The Icon names need to be exactly the same in the Constellation and in the BackOffice, because the component inserts always the same href for the icon, so the name must be the same.

Default Icon

The default icon is set on the App.razor file, both on Constellation and BackOffice.

The three lines where the icons are defined inside the index.html

   <link rel="icon" type="image/svg+xml" href="img/oryon/favicon/favicon.svg" />
   <link rel="icon" type="image/png" sizes="180x180" href="img/oryon/favicon/favicon-180x180.png">
   <link rel="icon" sizes="32x32" href="img/oryon/favicon/favicon.ico" />

The three lines above define the icon, in that file there are a few more icons defined but those are for the Apple Ecosystem and for mobile.

How receiving Notifications changes the Favicon

The icon is located to the left of the browser tab title. We control both the icon and the title in the same file, OryonHeadContent. Whenever we receive a new notification or need to change the tab title, we call the corresponding method. If the icon needs to be updated, that method will invoke a JavaScript function.

OnNotificationReceivedAsync(object sender, NotificationReceivedArgs e)

private async void OnNotificationReceivedAsync(object sender, NotificationReceivedArgs e)
   {
       if (UnseenNotifications != e.UnseenNotifications)
       {
           UnseenNotifications = e.UnseenNotifications;
           await ReplaceIconAsync();
       }
       await InvokeAsync(StateHasChanged);
   }

ReplaceIcon()

public void ReplaceIcon()
   {
       if (UnseenNotifications > 0)
       {
           JS.InvokeVoidAsync("OryonFavicons.Remove");
       }
       else
       {
           JS.InvokeVoidAsync("OryonFavicons.Add");
       }
       StateHasChanged();
   }

Which runs a function of JavaScript, to Remove/Add the default Icon depending on the need.

Adding and Removing Default Icon

Now on the JavaScript side, on the <Oryon.SPA.Layout.Interop.js> file, inside the window.OryonFavicons we have the following functions:

Function inside the window.OryonFavicons to Remove the Default Icon

Remove: function () {
       //removes <link>'s using the "href"
       const hrefsToRemove = [
           "img/oryon/favicon/favicon-32x32.png",
           "img/oryon/favicon/favicon-16x16.png",
           "img/oryon/favicon/favicon.ico",
       ];
       hrefsToRemove.forEach(href => {
           const links = document.querySelectorAll(`link[href="${href}"]`);
           links.forEach(link => {
               link.parentNode.removeChild(link);
           });
       });
   },

Function inside the window.OryonFavicons to Add the Default Icon

Add: function () {
      //adds the default <link>'s to the <header>
      const favicon32x32 = document.createElement("link");
      favicon32x32.rel = "icon";
      favicon32x32.type = "image/png";
      favicon32x32.sizes = "32x32";
      favicon32x32.href = "img/oryon/favicon/favicon-32x32.png";
      document.head.appendChild(favicon32x32);

      const favicon16x16 = document.createElement("link");
      favicon16x16.rel = "icon";
      favicon16x16.type = "image/png";
      favicon16x16.sizes = "16x16";
      favicon16x16.href = "img/oryon/favicon/favicon-16x16.png";
      document.head.appendChild(favicon16x16);

      const favicon = document.createElement("link");
      favicon.rel = "shortcut icon";
      favicon.href = "img/oryon/favicon/favicon.ico";
      document.head.appendChild(favicon);
  }

caution

If the name of any icon, property value or the file structure of any of the icons used for this, change, it will be necessary to update it in here.

These functions when called, Remove/Add to the page the three necessary icons that will be replaced by the Notification Icon on the <OryonHeadContent.razor>.

Adding and Removing Notification Icon

For this we return to the component <OryonHeadContent.razor>. Where we can find the following code:

Adding/Removing the NotificationIcon

<HeadContent>
   @if (UnseenNotifications > 0)
   {
       <link rel="icon" type="image/png" sizes="32x32" href="img/oryon/favicon/notification-icon-32x32.png">
       <link rel="icon" type="image/png" sizes="16x16" href="img/oryon/favicon/notification-icon-16x16.png">
       <link rel="shortcut icon" href="img/oryon/favicon/notification-icon.ico">
   }
</HeadContent>

This code is inside the <HeadContent> which is a class made my Microsoft, that enable us to edit the <head> content of the page.

Adding the <link>'s here is like adding them on the <head> inside the index.html. So basically we are adding the new icons at the same time we are removing the default ones and the same for the other way around.

info

To learn more about the <HeadContent> try to read this pages, HeadContent Class and Control <head> content in ASP.NET Core Blazor apps.

How to Replace the Icon / Rebranding

To replace the application icon (for example, during a rebranding), the easiest approach is to replace all of the old icons with the new ones while keeping the same file names.

Take the new icon provided by the designer (or whoever supplies it) and use this tool. The tool will generate all the required icon formats for the application. Once that is done, double-check that all the necessary formats were generated, verify that the file names match the old ones, and then replace them.