DEV Community: Matthias Lamm

Favicon/App-Icon and Manifest for your PWA

Matthias Lamm — Fri, 28 Feb 2020 14:16:54 +0000

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 😊

How to use Bootstrap with SASS variables in your PWA or Website

Matthias Lamm — Sat, 08 Feb 2020 15:06:48 +0000

Why you could/should use a frontend library

You are going to build a Website or Progressive Web App. You are not that keen about how it looks like but it should meet current state-of-the-art criteria like different states for buttons, good-looking forms, tooltips, popovers, modals etc. and of course a mobile responsive grid system. But you don't have the time or the pretension to set those all up by yourself.

The good thing is somebody already made a great bundle of all these design elements and you can use it right away.

Besides others the most popular frontend-component library is maybe Bootstrap (https://getbootstrap.com/). Originally Bootstrap was developed at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.

Embedding Bootstrap in your project

If you are creating a basic HTML project you can just use a CDN to use a precompiled version of bootstrap styles and JavaScript. You will also need to add jquery and popper so everything works properly:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

But normally you would today use a package manager like npm and just add it to your project folder with

npm install bootstrap

and then require the parts you really need in your code. The real magic here is that you can make use of SASS variables to customize your whole look and feel. But we will come to this point later.

If you are using a JavaScript library like Angular or React, there are even more possibilities like for example the https://ng-bootstrap.github.io Project for Angular or https://reactstrap.github.io/ for React which we regularly use.

By installing those with for example npm, you will also add the regular bootstrap package to your dependencies.

In the following we will focus on the customization of Bootstrap in a React project created with https://create-react-app.dev/

Customizing Bootstrap with SASS Variables

Prerequisites

node & npm
create-react-app

npx create-react-app my-app
cd my-app
npm start

npm install --save reactstrap react react-dom

What Reactstrap is instructing you is to Import Bootstrap CSS in the src/index.js file:

import 'bootstrap/dist/css/bootstrap.css';

but this won't let you use the full power of SASS. What we are proposing is this:

Your src/index.js will import an ./index.sass file.

in this index sass file we will import the scss version of bootstrap:

@import "../node_modules/bootstrap/scss/bootstrap"

then we will copy the variables file from node_modules/bootstrap/scss/_variables.scss to our src/styles/ folder, name it bootstrapvariables.sass and remove all the !default via find and replace. In this file we can later change all the variables to get our own custom version of bootstrap.

To do so we need to import this file above the bootstrap import. Since the variables file uses some functions, we also need to import those functions even before our custom bootstrapvariables.sass. The index sass file will now look like this:

// theme
@import "../node_modules/bootstrap/scss/functions"
@import "styles/bootstrapvariables"
// vendor modules
@import "../node_modules/bootstrap/scss/bootstrap"

// your other custom styles for components etc
// ....

The cool thing is:

"Every Sass variable in Bootstrap 4 includes the !default flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap." (https://getbootstrap.com/docs/4.3/getting-started/theming/)

And now you can start theming your PWA in your bootstrapvariables.sass file with your Corporate Design. Start by setting up your color pallet and the default colors for bootstrap elements (primary, secondary, success, info, warning, danger, light, dark). You can change the grid-breakpoints, container-widths, font-sizes, default font and many other things.

Wrap-up / tldr;

You don't have to reinvent the wheel to have a good-looking website or PWA. By using a frontend library like Bootstrap you get a modern looking website in no time. Extending the styling with sass variables even provides you a custom look that can be refined also later in the process.

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 😊 https://leanbakery.com/