PWA logo guide and sources

[diekus-zz]

"Community-Approved" PWA logo

PWA letters with an emphasis on the "W" with different colors, textures or graphics. The cuts between the letters remind of the // in the URL. It can be used in dark or light fonts, and can easily be adapted into icons, stickers, or other use cases.

Logo is based in a dark or light font, in order for it to adapt to many use scenarios. It can be used in any color. It is suggested that the W stands out in order to highlight the "Web" part of PWA. Nonetheless all three letters in one looks also great! It is your logo, feel free to adapt it. Base colors are:

Vector source:

The easiest way to start using the logo is getting a vector file. You can create and download your own SVG file with color combination at https://diek.us/logo-pwinter/ (also a PWA!)

Demo example usage:

It can be used with other logos (examples here show different browsers that support PWAs, a React version, or a WebVR like app that itself is a PWA. You can play around and put your company logo as well.) Looks great for stickers!

Rasterized Use-Ready sources (quick way to just pop them in presentations, docs, etc)

High Res PNG: (2048px width)

High Res JPG: (2048px width)

High Res GIF: (2048px width)

SVG Source File Download

http://diekus.net/images/PWA_LOGO_SOURCE.svg

Tip

Get creative. This logo will look great in any environment you put it on. That's what it was made for. :) Enjoy!

Feel free to post and share remixed uses and creations in the comments. Would love to see how the logo, as the PWA themselves, adapt to different scenarios like slides, posts, and swag. :)

License

The licence is https://creativecommons.org/share-your-work/public-domain/cc0/ , i.e. dedicated to the public domain.

[Raincal]

[DavidFrahm]

(Not sure if this belongs here or separate issue.)

I would like to suggest we have a standard app badge also. This logo is great for all kinds of things, and if it could be worked into something users would recognize as an app store badge that would help for marketing pages and content.

So something utilizing this logo, but as similar as possible to these badges from Apple and Google:

For illustration purposes only, here's a rough concept:

[diekus-zz]

@DavidFrahm

Hi, That's a good idea. Slightly trickier cause there are several versions around of those type of badges. Nonetheless, I did manage to find the official Google Play and App Store badges here (https://play.google.com/intl/en_us/badges/ & https://developer.apple.com/app-store/marketing/guidelines/#downloadOnAppstore) making it easier to do one that fits similar specs.

I am uploading a basic one with the "W" in a slight grey, then again, if it is needed to change the color of the W to make it match a custom design or site, you can edit the SVG file attached.

TEST:

HI RES READY TO USE PNGS
PURPLE:

GREY:

SVG file:

Would this work? Any suggestions or comments?

[DavidFrahm]

Wow, this is cool. The only thing I see is that because its all text, people might try to read it as: "Progressive PWA Web App".

What if you made the lefthand PWA logo seem more like the Apple/Google badges where its more icon/logo-ish? You could also add some contrast to the words by inverting it to be like a white shape with light and dark gray "PWA"?

[DavidFrahm]

Do you think the right side wording needs to be "Progressive"?

Just noticing how Apple/Google's is something actionable with "Get it on" and "Download on the".

So something like "Launch now on/in/as"? Highlight the immediate discovery and availability of a PWA?

Sorry - I might be having too much fun with this ;)

[diekus-zz]

Good points. I think just by putting the logo in a color this is fixed. Or putting it on an icon shaped outline. About the wording, that's an interesting point. Main problem is that "Google Play" and "App Store" are quite shorter than "Progressive Web Apps" so that might be a mouthful to put in the second line and get a consistent look in font size.

Something like this?

app like icon is a nice wink at home screen capabilities?

[diekus-zz]

@DavidFrahm https://twitter.com/diekus/status/893468287652286468

[gabfiocchi]

Hello everyone! We have read the comments that have been made previously and we want to contribute with our proposal!

We also think that the text can be slightly shortened to highlight further action:

[webmaxru]

Moved to README.md

[Franklinz98]

[Quethzel]

@diekus the svg links are down

[diekus-zz]

@Quethzel thanks for the heads up. I've created a repo to keep them accessible throughout all my many website redesigns XD.

you can find them here https://github.com/diekus/logos-repo/tree/master/PWA

[andylib93]

@gabfiocchi do you have the svg version of your 'launch as web app' banners? I'm not a great fan of .png

[gabfiocchi]

yes, let me find it, I will update early

[vitorblsantoss]

White Version

[gabfiocchi]

Hello everyone, I have uploaded the assets so that everyone can download them

https://github.com/gabfiocchi/progressive-web-apps-logo/tree/master/assets