I have created a project from the Vaadin Spring-boot starter and set my own icon (which happens to be the eye icon.png which I made 512x512 (using Inkscape)). I have put it in src/main/resources/META-INF/resources/icons/icon.png (because that’s where the default was). In development mode it displays fine. However, in production mode the favicon is a blue square with the white circle in it. Firefox says it is at /icons/icon-16x16.png (there are other sized versions as well). IE11 and Chromium all do the same thing.
Why doesn’t my icon appear as the favicon in production mode as it does in dev mode, and how can I fix it?
What browser are you testing with? Have you tried clearing all browser caches (including Service Workers), so that you are not seeing a previously generated and cached icon?
Changed the standard icon in the directory “src\main\resources\META-INF\resources\icons\icon.png” to a custom one.
Started the application in development mode. → Icon has changed and is displayed correctly.
Started the application in production mode. → Icon is the blue square with white circle in it.
After some research the “wrong” icon is also loaded from href="icons/icon[...] ". But within this directory on my explorer layer only my custom icon is stored and I can’t find any “wrong” icon there. So my guess is, that the build process has to create and inject these wrong icons.
Also tried clearing cache, restarting the server and restarting browser.
Using Chrome: 78.0.3904.97
Using Safari: Unable to find the Safari version (Non Apple user) → IOS Version 12.4
Windows: 1809 17763.737
Vaadin version: 14.0.12
I’ve exactly the same problem of Michael.
Chrome version: 78
Vaadin version: 14
I also tried to clear everything (cookie, cache, service workers, Site data, …) related to the address but the problem is always there
Situation:
Dev mode → mvn spring-boot: run → My icon is loaded correctly
Prod mode → java -Dvaadin.productionMode=true -jar app.jar → Default blue icon is loaded
There is a problem during the production generation process
I’ve exactly the same problem.
I use WildFly container and Java EE 8 and i tried Vaadin 14.0.10 til 15 version.
I tried to use different approaches.
Such as: PageConfigurator, PWA, default package.
Please see the issue in github. As a workaround, when to pack as Spring Boot WAR with production mode, put the frontend files into the webapp folder until the issue is fixed.
You just need @Route annotation and implement PageConfigurator.
See example from tutorial -
Here is the code for the PageConfigurator implementation on the top RouterLayout which modifies the header of the page:
@Route(value = "", layout = MainLayout.class)
public class Root extends Div {
}
public class MainLayout extends Div
implements RouterLayout, PageConfigurator {
@Override
public void configurePage(InitialPageSettings settings) {
settings.addInlineFromFile(InitialPageSettings.Position.PREPEND,
"inline.js", InitialPageSettings.WrapMode.JAVASCRIPT);
settings.addMetaTag("og:title", "The Rock");
settings.addMetaTag("og:type", "video.movie");
settings.addMetaTag("og:url",
"http://www.imdb.com/title/tt0117500/");
settings.addMetaTag("og:image",
"http://ia.media-imdb.com/images/rock.jpg");
settings.addLink("shortcut icon", "icons/favicon.ico");
settings.addFavIcon("icon", "icons/icon-192.png", "192x192");
}
}
Same issue, no matter where I put icon.png or what I add in the configurePage, the icon stays the blue square… hours and hours spent now, on the basics… feeling pretty deflated for thinking Vaadin might lead to rapid development.
I’m sorry for the bad experience you get with this detail. Did you check the issue posted by Jouni earlier in the thread? There are some hints to get make it work. https://github.com/vaadin/flow/issues/6842
Apparently some documentation or example is suggesting to use wrong location for icons. Currently the team responsible for this is super busy with other issues that we consider more critical. Thumbing up the issue or reporting your findings there is a good way to get more attention for this. Or if you have our support subscription, you can of course prioritise the linked bug report.
@Ryan - thanks for that. For information, I have now got it to work, though perhaps not the best way. I created a favicon.ico file using 6 PNGs (16x16 … 512x512), added them all as layers via Gimp and exported as an .ico. However, I also had to change my pom (I’m using Spring boot and Maven) because otherwise the filtering needed for application.properties and other text setting files mangled favicon.ico (the size in the jar file has changed). I added this to my pom:
<build>
<resources>
<resource>
<directory>src/main/resources</directory>
<!-- This entry without filtering to get the favicon.ico copied in without it being filtered - i.e. treated like a text file and mangled. -->
</resource>
<resource>
<directory>src/main/resources</directory>
<filtering>true</filtering>
<excludes>
<exclude>META-INF/resources/**</exclude>
<!-- Leave the favicon.ico out here as we did it above and don't want it mangled. -->
</excludes>
</resource>
</resources>
A bit annoying issue indeed. But I manage to solve it: I have a JAR-packaged Spring Boot application deployed to AWS. I used the tool at https://github.com/ezzabuzaid/pwa-icon-generator and placed the generated icons inside src/main/resources/META-INF/resources/icons. And btw, I don’t have a src/main/webapp directory. Hope that helps! So basically what Ryan Pang said