[BUG] addFavicon() does not work as documented. Nor does the coded favicon work in the business app starter

[fschon]

Describe the bug In the business app starter, there is a favicon configured in the code. This favicon a) has an incorrect resource url and b) displays the default white circle/blue background favicon and not the F icon configured. Even when the url error is corrected the proper favicon does not show.

I have based my app on the exmaple business app and cannot get a favicon to display properly. I have fiddled with many different code variations without success - the PWA icon appears on first login, but when refreshing the browser reverts to default. So I went back to the original business app example code and found that this also does not work.

To Reproduce Steps to reproduce the behavior:

1. Go to the business app demo link at https://labs.vaadin.com/business/
2. Notice the browsers favicon is the browsers default.

Expected behavior MainLayout.java code: @Override public void configurePage(InitialPageSettings settings) { settings.addMetaTag("apple-mobile-web-app-capable", "yes"); settings.addMetaTag("apple-mobile-web-app-status-bar-style", "black");

    settings.addFavIcon("icon", "frontend/images/favicons/favicon.ico",
            "256x256");
}

Firstly the resource url "frontend/images/favicons/favicon.ico" does not exist! And when corrected to "images/favicons/favicon.ico" the favicon at https://labs.vaadin.com/business/images/favicons/favicon.ico does nort show.

My specific code: initialPageSettings.addFavIcon("icon", "icons/calogo192.png", "192x192"); initialPageSettings.addLink("shortcut icon", "icons/favicon.ico"); I am using JEE war build with the icon in META-INF/resources/icon/calogo192.png

Desktop (please complete the following information):

• OS:
• Browser: Chrome
• Version 91.0.4472.124
• Vaadin platform version: 14.6.5
• JEE CDI Wildfly 19.

Additional context I have tried the various solutions in the forums and none work. I also note that several others have been facing the same issue, also without resolution.

[vaadin-bot]

Thanks for using Vaadin Platform, we appreciate your help and are going to take care of this as soon as possible.

[manolo]

• First, you need to disable PWA annotation, otherwise favicon.ico is not requested, since the app uses the icons in the manifest
• Second, since favicon.ico is in the src/main/webapp folder, it's server directly by the servlet container, thus, you need to write the correct path for this purpose which in this case is. settings.addFavIcon("icon", "/images/favicons/favicon.ico", "256x256"); (app is wrong in this case)

I'll send a change so as the downloaded app is correctly configured

[manolo]

So we changed business-app so as it does not use favicons. We want to demonstrate a PWA app, hence the way to set icons must be with this mechanism.

[manolo]

As summary of the resolution of this issue:

• The correct path for an asset placed in the webapp/images/favicons should be requested as /images/favicons, nore that frontend/images/favicons does not work anymore.
• In an application having the @PWA annotation with the icons field, favicon is not requested since it is set in the manifest (it happens in chrome, ff, safari and edge).
• When the iconSet in the PWA annotation is an invalid resource, it automatically uses the white/blue circle instead of a not-found response (this is arguable but it's the way flow implements it)
• Business app has been modified so as the iconPath has been fixed and removed the favicon

Documentation about resources paths: https://vaadin.com/docs/latest/flow/advanced/loading-resources#static-resources Documentation about custom icons: https://vaadin.com/docs/latest/guide/configuration/pwa/#using-a-custom-icon

[fschon]

Hi Manolo,

Thanks for clarifying. So as I understand it the PWA notation and the addFavicon() are mutually exclusive and cannot be used at the same time?

I am using the PWA notation and my home page gets the proper favicon set so I assume that the PWA notation favicon is being used and not the addFavicon function call. However there is still a problem with this that I cannot test on the current online demo version of the business app because there the default white circle blue background icon is used. When I browse to a different route than the default route and refresh the browser the favicon is replaced by the browser default icon. This is also the case if I enter the application via a non-default route.

Thanks for checking.

[manolo]

Yes, PWA has preference over favicon. Use favicon if you don't want your app be a PWA. Online demo has not been yet deployed to the demo server, if you want to test with business app, download it from https://vaadin.com/start/v14/business-app unzip it and run mvn. The .zip file has already the fixes to the PWA annotation and removed favicon. Regarding routing, by using PWA, icons should be the same in all the vaadin app, not sure about favicon though