How do I set the favicon for my Vaadin 24 - Spring Boot project?

Flow
1

I have a Vaadin 24.1 project using Spring Boot and I would like to know how to change the default icon for the browser tab. Also I would like to know what extension and size the image should be and where in my project should I put it.

2

It can be done with the addFavIcon method in https://vaadin.com/docs/latest/advanced/modifying-the-bootstrap-page#application-shell-configurator

3

Thank you that’s exactly what I needed!

4

Hi, is there anything similar for Vaadin 14?
Thank you

5

@jumpy-zonkey take a look here Modifying the bootstrap page | Advanced Topics | Flow | Vaadin 14 Docs

6

Thanks, i tried it, but it seems that PWA override it, can be true ?

7

I think you are right. Did you try setting the iconPath attribute for @PWA annotation?

8

Yes, thanks, using iconPath solved.

9

Hi, sadly it didnt work for me =´(. Is there anything wrong with my code? I dont really know what im doing. (Vaadin 23)

public class Application implements AppShellConfigurator {
public static void main(String args) {
SpringApplication.run(Application.class, args);
}

@Override
public void configurePage(AppShellSettings settings){
	settings.addFavIcon("icon", images/logo.png", "203x176");
}

}

10

This worked for me:

public void configurePage(AppShellSettings settings) {
  settings.addFavIcon("icon", "icons/icon.png", "512x512");
}

with icon.png located in src/main/resources/META-INF/resources/icons.

Ensure logo.png is in the right directory. Run the app, inspect the page, do you see <link href="images/logo.png" rel="icon" sizes="203x176"> anywhere?

11

Thanks, it was in the wrong folder.