Update wordmarks and logos #15975

maureenlholland · 2025-02-04T21:07:53Z

If this changeset needs to go into the FXC codebase, please add the WMO and FXC label.

One-line summary

Brings in new refresh mozilla symbol where possible

NOTES:

https://www.mozilla.org/en-US/foundation/trademarks/list/ has the previous and current logos, will keep both
we'll need new assets where the logos are embedded in other images
- https://www.mozilla.org/en-US/careers/ (Life@Mozilla card image & Find your next role split image)
- https://www.mozilla.org/en-US/newsletter/updated/ (Meet our parent brand card image)
- https://www.mozilla.org/en-US/products/vpn/ (From a brand you can trust split image)
some logos/wordmarks are not shown now that refresh switch is active (base-error, navigation), this logic and these images have been removed
code searches: mozm.png, mozilla/logo, mozilla-256.jpg
~~BIMI requires SVG version of favicon:~~ Setup Brand Indicators for Message Indentification (BIMI) for Mozilla Emails #10490
- skipping for now: Update wordmarks and logos #15975 (review)
Book of Mozilla: it's a symlink here that points to /media/img/ https://github.com/mozilla/bedrock/tree/main/root_files

Significant changes

Replaces root favicons with m24 favicons (names do not change, not sure if this is an issue). Also there are no m24 replacements for the 16x16 & 32x32 sizes (yet, we could add if needed)

Issue / Bugzilla link

#15682

Testing

http://localhost:8000/en-US/privacy/ (sidebar header)
http://localhost:8000/en-US/contribute/ ("Our Mission" section)
http://localhost:8000/en-US/newsletter/updated/ (3rd card image updated)
http://localhost:8000/en-US/products/vpn/ (from a brand you can trust, removed old m)
http://localhost:8000/en-US/careers/locations/ (gathering spaces images updated, feel good about your work image updated)

maureenlholland · 2025-02-05T16:44:45Z

bedrock/privacy/templates/privacy/index.html

@@ -12,7 +12,7 @@
 {% block body_class %}mzp-t-mozilla format-none{% endblock%}
 {% block body_id %}privacy-landing{% endblock %}

-{% block article_header_logo %}{{ static('img/trademarks/logo-mozm.png') }}{% endblock %}
+{% block article_header_logo %}{{ static('img/trademarks/symbol.svg') }}{% endblock %}


It was suggested to use the green flag with black background here, but I've gone with the asset that exists in the trademarks folder for simplicity (https://www.mozilla.org/en-US/foundation/trademarks/list/). Should I copy the png favicon for more general use?

I'm not sure who the authority is on this - but I like what you've done.

janbrasna

"BIMI requires SVG version of favicon"

I think BIMI doesn't work at all currently, or the set up was never really finished given the absence from DNS. (Or the verification at the TLS cert provider side was the issue? Maybe someone with access to https://bugzil.la/1738806 can check its fate.)

https://bimigroup.org/bimi-generator/ validator shows no records for:
email.mozilla.org
em.mozilla.org
e.mozilla.org
mozilla.org

TL;DR no need to put any extra effort into BIMI assets unless requested again I guess. As the SVG needs to use TinyPS profile therefore some manual checks/tweaks etc. it's an extra effort:(

janbrasna · 2025-02-06T10:16:55Z

bedrock/base/templates/base-protocol.html

-    <link rel="shortcut icon" href="{% block page_favicon %}{% if switch('m24-website-refresh') %}{{ static('img/favicons/mozilla/m24/favicon.ico') }}{% else %}{{ static('img/favicons/mozilla/favicon.ico') }}{% endif %}{% endblock %}">
+    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{% block page_ios_icon %}{{ static('img/favicons/mozilla/apple-touch-icon.png') }}{% endblock %}">
+    <link rel="icon" type="image/png" sizes="196x196" href="{% block page_favicon_large %}{{ static('img/favicons/mozilla/favicon-196x196.png') }}{% endblock %}">
+    <link rel="shortcut icon" href="{% block page_favicon %}{{ static('img/favicons/mozilla/favicon.ico') }}{% endblock %}">


"Also there are no m24 replacements for the 16x16 & 32x32 sizes (yet, we could add if needed)"

They were only added in #7889/files wholesale in a batch, for consistency/availability — but never consumed since (or used before), as in #7916/files — so it's safe to omit them.

@maureenlholland So the TinyPS is pretty feasible for the flag shape — I've made a -bimi variant if you wanna update that one as well to… well… not keep an old asset around;)

logo-bimi.svg

logo-bimi.svg.zip

thanks for the SVG, gonna link this in a separate BIMI-specific issue

maureenlholland · 2025-02-18T15:25:07Z

waiting for stakeholder feedback

janbrasna · 2025-02-18T16:20:21Z

media/img/careers/footer-remote-cropped.svg

I'm not 100% sure this will work, esp. for CSP reasons, with a raster image embedded as a datauri; and something running as "a script" that might get sandboxed.

(WebKit makes it look like there's something broken: …)

Should I look into it, to try to replace the inline PNG with some vector alternative?

(NB: the base64 datauri seems to be empty/invalid PNG anyways — was there something in the original asset perhaps? The original PNG had a Fx logo in white there on the mug…)

https://jaredwinick.github.io/base64-image-viewer/
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZ4AAAGeCAYAAACkfGcPAAAgAElEQVR4nO3db1bcRro/8FJJ

these might not be final images, so you can ignore for now, thanks for the info though! will keep an eye on it

cleaned up the svg, if embedded data-based images are important to studio team, I'll re-request and explain the issue, but I think these are interim images to better match the refresh branding until a more comprehensive update is ready, so not high priority

Images could be offices or coworking spaces

codecov · 2025-02-18T21:08:43Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.57%. Comparing base (eccbb39) to head (a7499f6).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #15975   +/-   ##
=======================================
  Coverage   79.57%   79.57%           
=======================================
  Files         160      160           
  Lines        8396     8396           
=======================================
  Hits         6681     6681           
  Misses       1715     1715

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

maureenlholland force-pushed the update-wordmarks-and-logos branch 5 times, most recently from ab502a1 to 6dc6046 Compare February 5, 2025 16:36

This comment was marked as resolved.

Sign in to view

maureenlholland commented Feb 5, 2025

View reviewed changes

janbrasna reviewed Feb 6, 2025

View reviewed changes

maureenlholland added 5 commits February 18, 2025 09:44

Replace Mozilla logo on contribute page

6680221

Replace mozm trademark with symbol trademark

a94787a

Replace mozilla 256 with m24 og

67230b3

Remove images now hidden by switch logic

6d4c801

Move m24 favicons to root of folder

70a8966

maureenlholland force-pushed the update-wordmarks-and-logos branch from 8c26cc3 to 1f0b5a0 Compare February 18, 2025 15:02

maureenlholland added the Do Not Merge ⚠️ label Feb 18, 2025

janbrasna reviewed Feb 18, 2025

View reviewed changes

maureenlholland force-pushed the update-wordmarks-and-logos branch from edb0012 to 06c4f63 Compare February 18, 2025 17:25

maureenlholland added 4 commits February 18, 2025 12:58

Update careers images

939ca0f

Remove old m styling in vpn heart image

44e2933

Replace updated newsletter card image

c10a8ca

Update location copy

cbc5fd7

Images could be offices or coworking spaces

maureenlholland force-pushed the update-wordmarks-and-logos branch from 06c4f63 to cbc5fd7 Compare February 18, 2025 20:54

Optimize careers footer image

a7499f6

maureenlholland added P3 Third level priority - Nice to have Needs Review Awaiting code review Review: XS Code review time: up to 30min Frontend HTML, CSS, JS... client side stuff and removed Do Not Merge ⚠️ labels Feb 18, 2025

maureenlholland marked this pull request as ready for review February 18, 2025 21:08

maureenlholland requested review from a team as code owners February 18, 2025 21:08

maureenlholland mentioned this pull request Feb 18, 2025

BIMI validation check #16008

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update wordmarks and logos #15975

Update wordmarks and logos #15975

maureenlholland commented Feb 4, 2025 •

edited

Loading

This comment was marked as resolved.

maureenlholland Feb 5, 2025 •

edited

Loading

stephaniehobson Feb 5, 2025

janbrasna left a comment

janbrasna Feb 6, 2025

janbrasna Feb 18, 2025

maureenlholland Feb 18, 2025

maureenlholland commented Feb 18, 2025

janbrasna Feb 18, 2025

janbrasna Feb 18, 2025

maureenlholland Feb 18, 2025

maureenlholland Feb 18, 2025

codecov bot commented Feb 18, 2025

Update wordmarks and logos #15975

Are you sure you want to change the base?

Update wordmarks and logos #15975

Conversation

maureenlholland commented Feb 4, 2025 • edited Loading

One-line summary

Significant changes

Issue / Bugzilla link

Testing

This comment was marked as resolved.

maureenlholland Feb 5, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

janbrasna left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maureenlholland commented Feb 18, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Feb 18, 2025

Codecov Report

maureenlholland commented Feb 4, 2025 •

edited

Loading

maureenlholland Feb 5, 2025 •

edited

Loading