CODEWITHSUNDEEP
vaadinprogressive-web-appsfavicon
MrRene
MrRene

Reputation: 194

Vaadin doesn't display correct favicon when packaging JAR/WAR

I've packaged my app on a jar for production but I noticed the favicon isn't displaying the one I put. It's displaying the default blue icon with a white circle.

I've added a custom manifest and when inspecting element it does display all the correct info, I also added a @PWA annotation on the main class with the same info just in case, I also copied my logo on src/main/webapp/icons as icon.png for vaadin to resize it, and it does resize it but on the tab bar it still shows the default icon.

This only happens when packaging the app on a jar, if I run it from the IDE or the folder with mvn spring-boot:run it shows the correct icon.

Edit:

I found out that vaadin wasn't resizing my icon to a 16x16 size, so I did it and place it on src/main/resources/META-INF/resources/icons/ now it does show my custom favicon... on firefox, it still showing the default icon on chrome and this isn't supposed to happen because when I manually go to the url /icons/icon-16x16.png it shows my custom icon

Edit 2:

If I comment the @PWA annotation and use this code for setting the favicon:

    @Override
public void configurePage(InitialPageSettings settings) {
    settings.addInlineWithContents(
            "<link rel=\"shortcut icon\" href=\"favicon.ico\" type=\"image/x-icon\">",
            InitialPageSettings.WrapMode.NONE);
}

Then it works like it's supposed to, but as soon as I activate the @PWA annotation doesn't matter if I set or don't set a custom icon, it will be revert to the default icon

Edit 3:

I downloaded the spring boot starter app on https://vaadin.com/start/v14 and just package the app to a jar and run it, and it won't it's icon but this default white circle icon, so I'm pretty sure it's not my project at the moment.

Upvotes: 1

Views: 677

Answers (1)

Alejandro Duarte
Alejandro Duarte

Reputation: 1479

When packaging as a JAR, you have to put the icon in src/main/resources/META-INF/resources/icons/. What I have done is also using a tool like https://github.com/onderceylan/pwa-asset-generator to create all the assets. You can also use the PageConfigurator interface to customize the name and location of the favicon

Upvotes: 1

Related Questions