Wrong favicon in production mode

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?

Thanks very much.

Same problem here. After 4 months is there no solution?

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?

I’m facing the same bug.
What I’ve done:

  • Used the bakery demo.
  • 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

Thanks in advance Michael

Related issue: https://github.com/vaadin/flow/issues/6842

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.

Hi all,

I found solution how to add favicon icon.

Vaddin have solution to modify bootstrap page with PageConfigurator class.
Follow the link with tutorial - https://vaadin.com/docs/v14/flow/advanced/tutorial-bootstrap.html.

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");
    }
}

I am increasingly skeptical about this framework. I honestly can’t wait to finish this project to permanently abandon this technology

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.

18068480.jpg

Hi,

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.

cheers,
matti

In combination with https://github.com/vaadin/flow/issues/7137 and https://github.com/vaadin/flow/issues/6842 I have never had dev mode nor correct favicon after many hours of attempts.

Try to add these icons in folder resources/META-INF/resources/icons/, press Ctrl+F5 if not works after being deployed.

  • —resources
  • ------META-INF.resources.icons
  • ---------icon.png
  • ---------icon-16x16.png
  • ---------icon-32x32.png
  • ---------icon-96x96.png
  • ---------icon-180x180.png
  • ---------icon-640x1136.png
  • ---------icon-1125x2346.png
  • ---------icon-1242x2208.png

@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 :slight_smile:

If you are using the @PWA annotation you have to define the iconPath there (https://vaadin.com/docs/v14/flow/pwa/tutorial-pwa-icons.html).

Davide Vanoni:
I am increasingly skeptical about this framework. I honestly can’t wait to finish this project to permanently abandon this technology

I agree. The forum is a piece of JUNK and questions go answered for YEARS!

I am thinking of ejecting fairly soon as well.

Dmitriy Sandul solution works fine, but you shall add both the link and the favicon, otherwise you still you will still get the wrong icon:

public class HomeView extends AppLayout implements AppShellConfigurator {

  ...

 @Override
  public void configurePage(AppShellSettings settings) {
    settings.addLink("shortcut icon", "icons/favicon.ico");
    settings.addFavIcon("icon", "icons/favicon.ico", "48x48");
  }

I’m using Vaadin 19 and consequently AppShellConfigurator instead of PageConfigurator but the result would probably be the same.