Create an application icon for the privacy browser

The privacy browser will require its own application icon!

Mullvad has an existing desktop application for their VPN, which can be found here: https://mullvad.net/en/download/macos/. As such we should take care to ensure the application icon for the browser is visually differentiable from the VPN. It may be worthwhile working up two or three different concepts for the sponsor to review – unless we feel that any particular route is significantly stronger than the others.

Once we have agreed on the overall design of the icon, it'll need outputted in platform specific formats for Linux, MacOS, Windows. References for these platforms can be found here:

• Linux: Gnome guidelines | Template | Helpful Gnome blog post
• MacOS: Guidelines (HIG) | Templates
• Windows: Guidelines | Sizes

The application icon will also form the basis of the full logo lockup and wordmark, however we'll track that activity in a separate ticket.

changed due date to September 23, 2022

changed milestone to %Sponsor 131 - Phase 2 - Privacy Browser

added Brand Doing UX Team Sponsor 131 Q3 UX labels

assigned to @nicob

marked this issue as related to #41088 (moved)

mentioned in issue #41088 (moved)

Hi @nicob! Any progress on this, or do we need to shuffle some things around on your kanban to make space for it?

Next round of scamps here:

added Needs Review label and removed Doing label

changed the description

added Doing label and removed Needs Review label

removed Q3 label

added Q4 label

changed due date to October 14, 2022

mentioned in issue #41331 (moved)

marked this issue as related to #40417 (closed)

Next round of scamps here:

Further exploration here on the front-facing mole here without any background. Some small differences to note:

• mole-1 and mole-4 hard hat do not have gradients/depth
• mole-4 is the only iteration in which every element is skewed to the right to suggest a subtle off-center view
• the nose in mole-6.1 and mole-7has a background shadow applied for higher contrast against the mole's body color
• the hard hat in mole-6.1 and mole-7has a "back" to the hat while the others do not

mole-6 and mole-6.1 feel like the most natural interpretation of the Mullvad mole from a forward-facing direction. I do love the slightly isometric aspect of mole-4 too, and even if it maybe isn't right for Mullvad, I still think mole-1 looks cute <3

We continued to explore iterations of using a globe:

So long as the icon we end up choosing is a mole in front of a sphere of sorts, I think globe-8 needs to be the icon for Nightly.

The combination of darkness, the head torch, and a tunnel or globe MOON is just too perfect

If we could make the globe more moon-like that'd be great too.

Also not sure if this is the right spot to bring it up but w/e we come up with also needs to work well at small sizes (or have a recognizable small-alt) for fav-icon and identity-block for pages like about:config.

Yep, once we've picked a route we can test sizes at various px and tweak the overall approach as needed. On the other hand – I know that MacOS recommends progressively simplifying your application icons manually, but Windows and Linux may not allow that (I'll need to check).

Windows .ico files support different icons for different sizes (they don' just auto-scale), not sure about Linux

(they don' just auto-scale)

Actually they now do, but only to a certain extent: https://learn.microsoft.com/en-us/windows/win32/uxguide/vis-icons

That page has also all the needed sizes

Continued explorations of the mole-5-globe mole-6-globe mole-7-globe direction with both front-facing and side profile moles. Note that the globes in globe-9 globe-9.1 globe-9-mole-6 globe-9.1-globe-6 are currently using an abstract/fictional application of continents.

I'm super interested to hear what the sponsor things about the 5.1 and 5.2 directions. It's still globular, and the rings/layers are a clever callback to its Tor Browser heritage. 5.2 is probably more subtle in that regard, which I'd say is a good thing.

The rings/layers could also be interpreted as radar or a protective shield too. Unfortunately the direction of the head torch makes 5.2 look a little like Apple's Find My app though :P

added Needs Review label and removed Doing label

added Roadmap::Future label

removed Roadmap::Future label

added Doing label

removed Doing label

added Next label

@duncan I'd like to share all 3 directions internally, in order to get discussions kickstarted. When do you think you'll be done with the third direction?

I'll catch up with @nicob today and find out :)

hi @ruihildt :) Here's a summary of this last round of icons we've been exploring, including a more conservative set. Before getting to these iterations, we explored how front-facing moles could look in these applications, and an earlier exploration of globes.

Globe Route

• Variations of "globes" with both original profile and a front-facing mole as examples
• Note that globe-9.1 and globe-9.1-mole-6include more accurate continents than globe-9 and globe-9-mole-6 which are using an abstracted application to more subtly suggest a globe

Safe Route

• These all use the current Mullvad VPN logo as a base, placed on a tile as an example of how it might look as a MacOS application icon.
• Mullvad's existing blue was used as a starting point to get to the current higher contrast hue in the hat, the red and green from the Stockholm campaign, and a new purple introduced as a nod to its Tor roots

And regardless of which direction is chosen for stable, @duncan and I still really think that globe-8-nightly could be a strong candidate for Nightly releases with the silhouette and suggestion of the mole coming out of a lit tunnel/ or in front of a moon :)

Thanks, great work!

Somehow, I feel the safe direction is the most edgy. :D I'll get back to you as planned towards the end of next week.

Nightly icon looks great. :)

removed Next label

removed Needs Review label

added Doing label

changed due date to October 26, 2022

marked this issue as related to #41331 (moved)

removed Doing label

added Needs Review label

added Roadmap::Future label

/cc @isabela

changed the description

removed Roadmap::Future label

added Needs Information label

removed Needs Review label

Quick update: the sponsor are exploring an alternative route for the icon. I've communicated the requirements to them via email, and in the meantime I'm going to unassign @nicob and bump this ticket into Needs Information, pending the final assets.

unassigned @nicob

removed due date

assets from mullvad: https://people.torproject.org/~richard/.mullvad/

@nicob Could you export the standard icon from the AI file above, and use it to create the "primary" icon for each platform please? I.e. import it into the appropriate templates, and make any necessary design changes to ensure it follows the guidelines for each. The border in particular might need reworked until it fits the templates, and I don't think it would hurt to explore an option without the border either.

We'll need to get sign off on the primary icons for each before we start simplifying the design and outputting the various sizes required by each platform, so don't worry about exporting PNGs quite yet.

Also, I've asked the sponsor for clarification about the Alpha and Nightly versions.

removed Needs Information label

added Next label

changed due date to December 02, 2022

mentioned in issue #41332 (closed)

mentioned in issue #41278 (closed)