Installing a favicon to the mobile application

Hi

I have a touchkit application where I need to create a shortcut icon for my application. I have the favicon.ico file. Could you please let me know how this could be done>

I added the favicon.ico under mythemese but when I restart tomcat I cannot see anything.

Any Idea how this could be done?

Adding the favicon to the theme folder should work. It’s probably just that your browser has cached the favicon before that (or nothing if there wasn’t one). Try deleting the cache and reloading the browser or try with another browser/device with which you didn’t go to the page before. The browser should recache the favicon periodically if not done manually.

I could see the icon on the tab in safari on th desktop picwhen I refreshed but when I try to create a short icon on the iPad it doesn’t show the icon on the iPad home screen instead I could see the webpage itself

You need to add a new meta tag to get a homescreen icon:
https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

But how can you add meta tags to a vaadin application?

Also I saw in that demo application they have said
Set an application icon, which is shown in the home screen

addApplicationIcon(VornitologistApplication.get().getURL() + “VAADIN/themes/vornitologist/icon.png”);

Is this what is said?

I want to add icon to the homescreen in IOS devices?

For example like:
https://vaadin.com/forum#!/thread/1676923

So again, in order to add the icon to the homepage is meta tag the prefered way?

Also I saw in that demo application they have said
Set an application icon, which is shown in the home screen

addApplicationIcon(VornitologistApplication.get().getURL() + “VAADIN/themes/vornitologist/icon.png”);

Is this what is said?

I want to add icon to the homescreen in IOS devices?

You can extend the default VaadinServlet and add anything you want to the HTML HEAD.
Here I added some mobile meta, favicon and mod viewport based on browser/client

public class BootstrapServlet extends VaadinServlet {

    @Override
    protected void servletInitialized() throws ServletException {
        super.servletInitialized();
        getService().addSessionInitListener(new SessionInitListener() {

            private static final long serialVersionUID = 1L;

            @Override
            public void sessionInit(SessionInitEvent event) {
                event.getSession()
                        .addBootstrapListener(new BootstrapListener() {

                            private static final long serialVersionUID = 1L;

                            @Override
                            public void modifyBootstrapFragment(BootstrapFragmentResponse response) {
                                // TODO Auto-generated method stub

                            }

                            @Override
                            public void modifyBootstrapPage(BootstrapPageResponse response) {

                                // Meta

                                response.getDocument()
                                        .head()
                                        .prependElement("meta")
                                        .attr("name", "viewport")
                                        .attr("content", "user-scalable=no, width=device-width, initial-scale=1.0");
                                response.getDocument()
                                        .head()
                                        .prependElement("meta")
                                        .attr("name", "apple-mobile-web-app-capable")
                                        .attr("content", "yes");
                                response.getDocument()
                                        .head()
                                        .prependElement("meta")
                                        .attr("name", "mobileoptimized")
                                        .attr("content", "0");
                                
                                response.getDocument()
                                    .head()
                                    .prependElement("link")
                                    .attr("rel", "apple-touch-icon")
                                    .attr("sizes", "57x57")
                                    .attr("href", "/resource/images/icons/favicon-57.png");
                                

                                if (response.getRequest()
                                            .getHeader("User-Agent")
                                            .contains("IEMobile/10.0")) {
                                    response.getDocument()
                                            .head()
                                            .prependElement("style")
                                            .attr("type", "text/css")
                                            .append("@-ms-viewport{width:auto!important}");
                                }

                            }
                        });
               
            }
        });
    }
}