Favicon/App-Icon and Manifest for your PWA

Why your Favicon/App-Icon is important

So your designers or you created a CD (Corporate Design) with your used color-schemes, typefaces/fonts, image-language and in the best case already a logo. You want to create a recognition value so potential customers/users recognize your brand whenever they get in contact with it.

A good logo is the easiest way to get memorized by your customers and users. It helps you to stand out from your competition and can deliver your message.

Typically, logos today have two variants:

• A full logo with landscape orientation consisting for example of a word mark and your logo symbol
• A pictural mark or logo symbol with square dimensions like the iconic Apple logo, the Twitter bird or the Facebook “f”

The later one you typically will use as the favicon of your website or the app icon if users can install your app.

Doing so your users can link your brand to your icon and will find your app faster on their home screens or in their stack of open tabs 😃.

Generate Variants of your Icon

If you are developing a Progressive Web App (PWA) you don’t really know what devices, browsers or bandwidth your users have. Your goal should be that your users get to see the best quality their setup can handle.

An awesome tool to generate all the variants of the icon you need for a webapp is the Real Favicon Generator. All you need is a “good” variant of your icon. If using an PNG or JPEG your icon must have 70 by 70 pixels at least — for good results you better use 260 by 260 pixels. In the best case and for perfect results you should use a vector file like SVG instead.

As an example, we created this “awesome-logo” which we are going to upload.

Then this tool will come to shine by letting you customize your icon for the various use cases:

iOS — Icon

For iOS, where users can “webclip” any website, you can select to fill the transparent regions of the logo with black or you can select a color as a background and even set a margin.

Android Chrome

Now you can also make settings how the icon should look like on Android devices.

But in the next section there is even more magic hidden:

In the main settings you can set the app name that will be displayed on the home screen below the icon. Furthermore, you can set a theme-color which will be seen in the app switcher and the notification-bar. Also, this will generate a splash screen for your PWA out of the box.

In the options tab you can set if your app should use browser-mode and just behave like a bookmark for your browser or if it should use standalone mode which we would normally use for a PWA. This will provide a little more “native” style to the opened page in Android Chrome. In particular, it lets you enforce the start URL and screen orientation. It also removes the navigation bar and gives your website its own tab in the task switcher.

Other System Settings

Next you can also give some settings for your icons look in Windows Metro Tiles and macOS Safari Touchbar if you want.

For all platforms you also have the possibility to upload another dedicated picture.

Favicon Generator Options

You now need to set the path where you are going to place the favicon files. Due to old browser support it is recommended to place them in the root of your website. But you can also place them in a subfolder.

Depending on your logo, you can define what quality and compression should be used to reduce the file size of the icons in the tab compression. To speed up loading time for your users you want to use the highest compression rate without artefacts.

Next you can define if the app name should be set by the page title in the html or if you want to use a specific app name and override it.

If you are all set you can go hit the Generate—button.

Adding the icons to your PWA

After your package is generated, you can download your favicon package. Besides the side.webmanifest and browserconfig.xml files you get a set of the variations of your logo for different use cases:

All you now need to do is putting the files in the right place in your public folder and add the above shown code to the head of your pages (in case you are creating a single page application this would be in the index.html or you use a document head manager like react-helmet where you need to set this up).

And…

Now you have a perfect solution for your PWA App-Icon and without any further efforts already the manifest for your PWA.

Your users can now easily “install” your website on their devices. On desktop since Chrome Version 75 this is even easier: the installation prompt for PWAs is now shown directly in the URL/omnibar while on mobile devices the Install — prompt is shown at the bottom of the screen. When “installed” the users will now have your app icon on their home screen, their app-bar, or start menu which leads them directly to your new PWA.

The next step for your PWA would be setting up a serviceworker to manage your apps offline and loading behaviour or to set up notifications.

At LEAN BAKERY we are building digital products for major brands, corporates, NGOs and startups. We dedicate ourselves to your idea and love to fully understand the problem you want to solve. We’ve spent more than 300 days developing our technology and methodology bakerplate which can also help you to turn your ideas into a scalable product within weeks. Talk to us, we love new challenges 😊