Add new Chromium and Chrome logos

[alrra]

From https://twitter.com/elvin_not_11/status/1489647023410212869:

---

Logos to update:

• Chrome
• Chrome Beta
• Chrome Dev
• Chrome DevTools
• Chrome Canary
• Chromium

[alrra]

[mathiasbynens]

@alrra, one thing to keep in mind is that in the new logos, the white void gets proportionally thinner at size 128 and above — so it’s not simply a matter of scaling a single logo. I suspect this can still be represented in SVG, perhaps with media queries. Hopefully the official logo assets include an SVG version that captures this accurately.

@elvin-hu, are the new logo assets publicly available (yet)?

[miquelfire]

It looks like they released in Canary, but haven't finalized the logo yet according to his Feb 6 tweet. Doesn't help that each OS is getting it's own set of logos.

[alrra]

one thing to keep in mind is that in the new logos, the white void gets proportionally thinner at size 128 and above — so it’s not simply a matter of scaling a single logo.

@mathiasbynens Thank you for that information!

@mathiasbynens It seems the logos will be changed starting with version 100? (or at least that was the case for Canary)

Doesn't help that each OS is getting it's own set of logos.

@miquelfire Yes, I am not planning to include OS specific ones. So, this project will just include the general ones.

[Alex313031]

@miquelfire @alrra It would be nice to have OS specific ones for chrome and chromium. I make a chromium browser called Thorium that uses a modified form of the chromium logo, and I build for linux, macos, windows, and chromiumos, so I made logos for all of them by using the svg. If only the general logo is uploaded after M101, then I cant provide a matching differentiation like the upstream chromium project once the logo is completely migrated over for all platforms.

Also, @alrra in response to my previous issue which you closed (very helpful), where did you get the chromium .svg? You provided some nice links for other browsers, but I would specifically like the source for the .svg for chromium. You can find 16px-512px of it in the chromium source, but the .svg is much more useful as it can be upscaled and downscaled, and then converted to a .png for better quality. I couldn't find anywhere else on the net where there is such a high quality .svg of chromium, so I would like to see where you actually got this.

[alrra]

It would be nice to have OS specific ones for chrome and chromium.

@Alex313031 As previously stated, I am not planning to include OS specific logos.

Note: OS specific logos have been used for some time.

Here is the current Chrome logo on macOS:

vs. the general one:

---

in response to my previous issue

@Alex313031 Let's keep this issue on topic.

I've responded to your question in the original issue.

[argyleink]

i just spent time making these and realized they were fetched from this repo. maybe my work can help this go easy?

note:

• i used src 72x72 files
• ran these through squoosh
• and overlayed the previous versions on top of these to match the previous placement and size these 64x64 previously used

[alrra]

maybe my work can help this go easy?

@argyleink Thank you, but at least a 512x512px PNG version would be needed to cover all the sizes that are provided by this project. :(

A better solution would be to have the SVG versions of the logos as everything else can be generated based on that.

I did find one for the Chrome logo that seems to be pretty close (but do see @mathiasbynens' comment).

---

@argyleink @mathiasbynens @elvin-hu @paulirish Any change Google or the Chrome team can help provide the SVG versions of the logos? Or at least 512x512px PNG versions of them?

[argyleink]

here's what i can snag 🙂

[alrra]

here's what i can snag 🙂

@argyleink Woohoo! Thank you! 🙇‍♂️ I will take care of things tonight and release new versions of the packages.

so it’s not simply a matter of scaling a single logo. I suspect this can still be represented in SVG, perhaps with media queries. Hopefully the official logo assets include an SVG version that captures this accurately.

Note: I'll use the logos provided by @argyleink for now. If better versions become available, let me know!

[alrra]

web-platform-tests/wpt.fyi#2744

@argyleink If you update the @browser-logos/chrome, @browser-logos/chrome-canary, and @browser-logos/chromium packages to v2.0.0, they should include the new logos. :)

[Alex313031]

@argyleink How did you get the new chromium.svg??? Also @alrra and @argyleink thanks for being so ridiculously quick about this, they literally just added the new chromium logos for linux today, completing the set for different platforms.

[argyleink]

@argyleink How did you get the new chromium.svg???

perks of working on the Chrome DevRel team 😄

[alrra]

@argyleink Do you think you will be able to help with the last 2, namely, Chrome Beta and Dev?

[argyleink]

@argyleink Do you think you will be able to help with the last 2, namely, Chrome Beta and Dev?

they didnt provide those where i found the assets, i rolled my own in XD

[Alex313031]

@argyleink So that svg is an official asset? If so why is it internal? It would make sense to have it in the chromium source, in the resources dir or the chrome/app/theme dir? Also, since you have access to these, is there any way you could get me svgs of the windows, mac, chromiumos, and linux versions (or whichever of those has one that differs from the one here) My browser I make called Thorium uses a modified chromium logo (you can see it right there in my profile pic). I make builds for all of these platforms, and I start with an svg rendered at ultra high resolution, then add the black ring, and then downscale and convert to png and rename for all the files in the chrome/app/theme dir for various platforms. Having an svg of not just the regular one here, but the ones used on these platforms would really help me in making my new iconset for my repo.
If you cant or dont want to, could you at least tell me which ones are different? It appears chromiumos and linux logos are the same as the regular one, but macos has some 3-D at the bottom and is of course in an "app square", and the windows one (supposedly from an article I read on the chrome logo at least) has a very slight gradient across the colours.

Any info/help related to all of this would be a big help, and I will be adding this repo to the attribution/credits section of my readme (which I should have done from the start when I first used this repo's images in Thorium)

[argyleink]

i dont have answers for the first couple questions. i'm not on the design team or on a project management release team, just a chrome team member who knows where the files are internally, aka i'm not following any external share locations.

here's windows, mac and linux chromium icons as high res as i have access to, sounds like thats enough to unblock you?

[Alex313031]

@argyleink Is the bottom one the windows one? It seems the top is the "normal" one which is the same for linux and chromiumos, whereas the mac obviously has the square around it and is more 3D. The windows one is supposed to have a subtle gradient, and it looks like the bottom one has that gradient vs the top one. Or are they actually in order from what you said i.e. win, then mac, then linux? BTW thanks so much, I didn't know what I was gonna do and thought I would just have to make all platforms use the same one which is undesirable.

[argyleink]

order goes:
linux
mac
windows

👍🏻

[Alex313031]

@argyleink Ahh ok that makes sense and is in line with my initial impression.

[mathiasbynens]

In line with the new Chrome logos, the Chrome DevTools logo has been updated. It can be found here: https://github.com/ChromeDevTools/devtools-logo/tree/HEAD/logos/svg (The PR was ChromeDevTools/devtools-logo#5.) Note that these SVGs are the canonical versions — they are responsive and change based on the size they’re displayed at. These two Chrome DevTools logos have the following breakpoints:

• Extra small (for display sizes from 1 to 23 pixels)
• Small (for display sizes from 24 to 63 pixels)
• Large (for display sizes from 64 to 127 pixels)
• Extra large (for display sizes ≥ 128 pixels)

I’m working to make the final official responsive SVG versions of the other Chrome logos available too.

[alrra]

the Chrome DevTools logo has been updated. It can be found here: https://github.com/ChromeDevTools/devtools-logo/tree/HEAD/logos/svg (The PR was ChromeDevTools/devtools-logo#5.)

@mathiasbynens Thank you, the Chrome DevTools logo has been updated! 🙇‍♂️

I’m working to make the final official responsive SVG versions of the other Chrome logos available too.

🎉

[alrra]

I’m working to make the final official responsive SVG versions of the other Chrome logos available too.

@mathiasbynens Do you think you will have time or want to work on it anymore? Thank you! 🙇‍♂️

[mathiasbynens]

I’m working to make the final official responsive SVG versions of the other Chrome logos available too.

@mathiasbynens Do you think you will have time or want to work on it anymore? Thank you! 🙇‍♂️

We finished creating the logos before I posted that message. We're just waiting for the marketing team to officially approve and publish them somewhere.

[alrra]

We finished creating the logos before I posted that message. We're just waiting for the marketing team to officially approve and publish them somewhere.

@mathiasbynens Ok, thank you for the update!

[alrra]

We finished creating the logos before I posted that message. We're just waiting for the marketing team to officially approve and publish them somewhere.

@mathiasbynens Any updates on this? Thank you!

[alrra]

We finished creating the logos before I posted that message. We're just waiting for the marketing team to officially approve and publish them somewhere.

@mathiasbynens Any updates on this? Thank you!

Chrome logo