Progressive Web App Logo Update and Community Vote

Back in November, we released a public project for a progressive web app logo. We made the project open source, using a Creative Commons license. We never really got around to extending the depth of our logo project. We finally decided it was time to do so.

Progressive Web App Logo

Today we updated the Progressive Web app logo project with some new image sizes and examples. These images represent the size images most progressive web apps use in their manifest file, and include both standard square images used by Chrome. We also added some live tile sizes we expect Microsoft Edge to support later this year.

Various aspects of the logo represent different parts or features about progressive web apps with hidden meanings. Each of the three colors in the logo semi-circle represents a unique quality of PWAs. Yellow represents fast. Progressive web apps should be fast, load quickly and respond instantly to user input.

Orange represents reliable. Progressive web apps should be reliable, meaning they work off-line and the customer trusts will just work.

Green means engaging. Progressive web apps should be engaging, encouraging the customer to add your web site to their home screen. There are many ways a PWA can be engaging. I like think of push notifications as a technical feature to engage customers.

Another piece in the logo puzzle is the web aspect. HTML is represented by the enclosing angle brackets. Angle brackets are synonymous with the web because the web is based on HTML angle brackets.

The centerpiece of the logo is a little running person. The running person represents progressive web application’s nature – mobile, cross-platform and general activity. The five key ingredients of this logo apply hidden meanings, representing different aspects required to be a progressive web app.

White Background PWA Logo

Today, we not only added new images to the repository; we also created both black and white backgrounds. Black and white backgrounds provide contrast to the existing colors in the logo, and provides examples of how the logo might look on these contrasting backgrounds.

Right now, a community vote is comparing different proposals for progressive web app logos. Voting is open until this Friday, July 7. We hope you will vote for the Love2Dev logo and make it the community standard for progressive web apps.

Vote for the Love2Dev PWA Logo

One of the recommendations in the contest is to show the logo in use in different scenarios. We created a variety of scenarios with our Love2Dev progressive web app logo. For example, you’ll notice a Slack application icon and our logo next to other well-known community logos for JavaScript and TypeScript.

PWA Logo With JavaScript & TypeScript Logos

The JavaScript and TypeScript logos came from a simple logo proposal including only PWA in the logo. We decided to show our PWA logo next to these logos to give you a semblance of those logos next to our logo. However, we believe progressive web apps are much more than a single language and represent a broader web platform with more depth which won’t be confined to specific languages.

As we shared back in November, our progressive web app logo repository is open source and under a Creative Commons license. You are welcome to clone, fork and make pull requests.

We welcome pull requests. However, I am not the best at managing an open source project, so don’t freak out if your pull requests are not processed immediately. We do promise to handle those pull request as we have time.

PWA Logo Example

Please feel free to use the logo as you see fit. Please add additional usage examples and file types. For example, the primary files are in paint.net format. We would love to have a Photoshop format available in the repository.

We encourage you to like and vote for a logo in the community logo contest. You can do that by visiting this GitHub link and giving us the big thumbs up.

We want you to share information about the community vote as it will give more exposure to progressive web apps in the broader community. One of the most important aspects of this community project is to raise awareness about progressive web apps and make them a more mainstream way to build websites today.

Share This Article With Your Friends!