New Logo Proposal

[Tobaloidee]

Hi @maximbaz Here's what I came up with! open for suggestions still.. 👍

[erayd]

@Tobaloidee I really like these - they look amazing. Thank you!

My favourites are variation #1, and the first logotype in the list. @maximbaz - perhaps we could use variation #1 normally, and switch to #3 if a problem is present (e.g. fill error, host app outdated etc.)?

[erayd]

@Tobaloidee One thought - is there any chance you'd be willing to do an alternate version with exaggerated teeth on the key? At very small sizes, it looks a bit like a question mark. At any size other than tiny, the current proposal is brilliant.

[Tobaloidee]

Thanks @erayd 😃 you are welcome. Yes..ill make one version for that 👍

[Tobaloidee]

I updated the previous presentation above.. 👍

[erayd]

@Tobaloidee That looks great - thanks :smile:.

I think I still like your original one for most sizes, and the updated one for small sizes. @maximbaz - your thoughts?

[Tobaloidee]

for me this first version with a little adjustment 👍

[maximbaz]

@Tobaloidee amazing work, thanks so much!

Circular icon is a good call, agree 👍

I must say I like the "filled" versions more than white circles with borders, looks more "modern" in my eyes 🙂

Adjusted version 1 makes the icon look less than a question mark, however it also loses the resemblance with the "P" letter:

We might want to exaggerate the features of the key a bit more, to make it recognizable when it's very small (example below):

---

In general I think the current shape will always resemble question mark more than letter P... I had some ideas how to approach this:

1. Try to enforce the letter "P", maybe by introducing more asymmetry (example below, it's just an idea)

2. Keep the icon as it is, but enforce the resemblance in the logotype (example below, again it's just an idea):

Maybe we could even use both of these ideas, introduce just a liiiitle bit of asymmetry and use the letter "P" in the logotype in the word "BrowserPass" that is similar to the "P" in the logomark...

---

One final minor annoyance is that Firefox places counter on top, which basically covers parts of the "P", but I don't think we can do anything about it 🙂

---

What do you think? I'm not a designer after all, so not sure that my proposed solutions are good @Tobaloidee, but at least I tried to highlight the areas for improvement 🙂

cc @532910, you wanted a ping when the new logo proposal is available.

[532910]

It's really hard to see letter P in the

looks significant better

I'm for removing the left part totally, something like this:

[erayd]

@532910 I see where you're coming from, but I think we do need to keep at least some of the left part. That top portion is critical to keeping its 'key-ness' at smaller sizes.

[Tobaloidee]

I will try some adjustments to it @maximbaz 👍

[532910]

Really the icon I like more, than this proposal

But it should be cleaned, something like this:

[Tobaloidee]

I did a new concept a while ago..just finished now @maximbaz

• also the key resembles big P edit- I make the head of the key bigger

[532910]

looks better, but the tiny icons is unreadable could you show 32px icon that is used on the browser's panel

[Tobaloidee]

[532910]

vertical line and key bit are bad visible on 32 icons, could you emphasize them?

[maximbaz]

Wooooow @Tobaloidee, this is very, very interesting concept! But I agree, it suffers from the same problem as our previous logo: the large icon looks cool, but the small variant loses details. I found that the best approach would actually be to have two different logos, a large one (keep the current one) and a small one with exaggerated features (for example more visible key teeth).

To illustrate the concept, right now this is the large icon:

And this is a small icon:

Would you be able to do something about the small icon?

[Tobaloidee]

still working on that 32x32 visibility :)

[Tobaloidee]

Here..

[maximbaz]

I think it looks juuuust awesome, love it ❤️

I think we should keep the original (with 3 small teeth) for a big icon, and this one (with 2 large teeth) for a small icon.

---

Let's try to address @532910's comment in another thread about the choice of color. We can't possibly support all browser color schemes, so let's focus on making the icon to look good in the following selected list of environments:

1. White background (usual Chrome theme):

2. White background, popup active:

3. Dark background in Chrome:

4. Dark background, popup active:

5. Dark background in Firefox:

6. Dark background in Firefox, popup active:

In my mind, all look good except the last example. @Tobaloidee can you think of some colors that in your opinion will look even better on all these 6 examples?

If you can attach a few examples with different colors, please attach them in the format like you did in this message, with small icons in different files, this way it's very easy for me to quickly load them in the browser for testing

[Tobaloidee]

Ill give you some color variations..👍

[Tobaloidee]

@maximbaz Personally I am biased to orange coz its my favorite color ryt now..hehe..still depends on you Sir..

[maximbaz]

Thank you! It was a very difficult decision, as all colors are very beautiful 🙂

I'll go with dark green color, it is quite unique (in my experience red and blue are very common colors), it doesn't scream for attention and it yet it is distinctly visible everywhere:

---

---

---

---

---

---

---

@Tobaloidee could you please prepare a PR with the icons? 🙂

I need to investigate a bit more the exact sizes that browser extension needs (since we are doing icons, let's make it properly). But until then, to make it simpler for you... could you open the PR in browserpass-extension repo, and put the icons in src/icons/ folder in the following formats:

src/
  icons/
    logo-large.svg // below icons based on this
    logo128.png
    logo64.png
    logo48.png

    logo-small.svg // below icons based on this
    logo32.png
    logo16.png
images/
  logotype.svg
  logotype.png // to use in README.md

(by the way, are you OK with providing .svg? I was only thinking this would be useful in case we ever want to change colors later on. But if not, keep only .png)

Once you create a PR, I'll push to your branch to include correct icons in correct locations in the code 😉

And once again, enormous thank you!! 🎉

By the way, if you want to be mentioned as the author of the icons, feel free to put this in README.md as well!

[532910]

New icon looks very nice and dark green looks good on all specified backgrounds!

[Tobaloidee]

Hi @maximbaz i've created a PR on BrowserPass-Extension just now with the logos & readme update

[Tobaloidee]

I have finalized all the logo files and different variations and formats of it..You can download it all from this LINK to my drive.. Thanks a lot for accepting my design! Best regards to the project and see you around.. :)

• Tobaloidee

[maximbaz]

Beautiful work @Tobaloidee, thank you so much!

[erayd]

Yes, thanks @Tobaloidee - it looks amazing!

[maximbaz]

Hey @Tobaloidee, could you please put the logo with 3 key teeth in your folder on Google Drive as well (the one below, but in dark-green color)? I could find it in "Logotype VERSION 2 Option" folder, but has "BrowserPass" text there, and I want to have it separately as well.

Ideally in both SVG and PNG formats in all sizes, just like you have in "ICON SIZE VARIATIONS" folder, but a single SVG in 500x500px would be enough as well, I can save the other sizes and convert to PNG myself!

I would simply like to use both logos, on small sizes I will use the logo with 2 key teeth, but on large sizes I will use the logo with 3 teeth 😉

Just put it them in your Google Drive, I'll take care of moving them to the repo 👍

[532910]

I'm sorry, but small 16px icon looks ugly. You can't just get svg and render it into 16px image. All small icons must be manually pixel-drown. Compare: old icon:

some my pixel correction (i'm not a designer)

current icon:

Even on the old icon i can see key bit.

[532910]

same, 4x scaled:

[maximbaz]

That's a bit disappointing, on my screen a 32px icon gets picked up and it looks quite good. As much as I would like to keep using vector SVG in Firefox, if someone could draw a 16x16.png that is significantly better, I'll take it in instead of the SVG 👍

[532910]

32px looks good, 16px are not.

[Tobaloidee]

I edited the 16x16px version. I made the key bigger. I uploaded the svg and png of it. :)

[maximbaz]

You are awesome! 👍

[maximbaz]

@532910 before I make a release, could you give it a quick try in any browser and tell me if you like this new icon more and we should go with it?

browserpass-chromium-HEAD.zip browserpass-firefox-HEAD.zip

[maximbaz]

I have heard a feedback that this is too big/bold icon and they would actually prefer the current one, which is blurry, but in style with the rest of the other browser extensions they have, that's why I wanted your opinion as well.

[maximbaz]

I feel bad asking Tobaloidee to change 16px logo again, we are probably the pickiest crowd they have ever seen on the internet 😂

[532910]

sorry, new one looks worse than before

[maximbaz]

is your reasoning the same as I heard from someone else, about the key being too bold / big? Just want to understand if there is something to improve or you don't like the logo in general 😉

[532910]

keys become too narrow, whole icon become oval the icon blurry, it doesn't look like a pixel drown

[erayd]

For what it's worth, I actually quite like the existing small logo, and I don't think it needs changing. The key is clearly and obviously a key, albeit mainly identifiable by the head rather than the teeth. However, it's worth noting that I'm looking at it on a high-dpi screen (retina macbook); I don't know whether I would feel the same on something with a lower pixel density.

[maximbaz]

I tend to feel the same, even though it is a bit blurry on low DPI screens, it is unique and recognizable, and you will know the meaning of the icon anyway because you'll see it elsewhere in a larger size, on Github or Web store.

Not to offend anyone, but in hopefully near future there will be very few low DPI screens left anyway 😄

[532910]

I believe that you see 32px (or bigger) instead of 16px icon on hiDPI. Could you make a screenshot? Yes, I hope loDPI will die. Really it has already died on mobiles screens and partially on laptops. But loDPI will not die soon on desktop. Not in the next 5 years.

Yes, the icon is unique but it's not recognizable. I see it in the large size extremely rare, almost never. But 16px I see every moment that I see the browser window, almost permanent.

[maximbaz]

by recognizable I meant distinguishable from other icons :) how many of other extensions you have provide pixel drawn icon?

regardless, to be honest I'm inclined to say "it's good enough" and keep the current icon, in the end we are not specializing in drawing icons here, we do password management, so it doesn't have to be perfect :)

[erayd]

I believe that you see 32px (or bigger) instead of 16px icon on hiDPI. Could you make a screenshot?

No problem - here are two, one focusing on the area in question, and a larger one showing it in the context of the rest of the browser. Note that I don't run my UI in a typical high-dpi configuration; my UI elements are all set extremely small. The entire green section of the browserpass icon in my screenshots is only 2.5mm across.

[532910]

Hmm, our icons look different: yours:

mine:

[532910]

how many of other extensions you have provide pixel drawn icon?

I'm sure all excellent small icons are pixel drawn.

[532910]

BTW, 32px browserpass icon on 45" TV panel looks fine.

[Tobaloidee]

Hi Guys, I pixel drawn the 16x16 icon..I uploaded it in my shared drive for download. @maximbaz

[maximbaz]

Thanks! @532910 are you satisfied with this icon? 🙂

browserpass-firefox-HEAD.zip