I made this T178116#3713983 a while ago. But it needs a professional makeover.

https://commons.wikimedia.org/wiki/File:General_Motors_logo.svg

@MusikAnimal did you find a logo? I see a vertical dumbbell in Safari as an icon but it doesn't show up on Chrome.

Vertical dumbbell? Ha? Maybe your browser cache has it confused with https://tools.wmflabs.org/interaction-timeline ? (Since both are at tools.wmflabs.org)

I'm willing to try creating an SVG, but this will be the first such attempt so I do not have much faith in myself =P

Let's poke @kaldari once more. Maybe he can do another weekend project. ;)

One more sprint before I dust off my MS paint skills...

We seem to be using the words logo and icon interchangeably. I made icons for things like favicon and such. A logo that would be in the app header should be different in content and size. If that's needed, I can work on that too.

Here are a few options of simple text icons. If we want something more artistic, it'll take me a little (a lot) longer :)

These are low-quality PNGs but I can make higher quality ones. I have SVG versions available also.

Another thought about the favicon is that if we go with simple black and white, it might work better in reverse with white text on a black square.

Here's the favicon size of the simplest icon above.

And the SVGs of both icons.

Looks a little close to:

In T187854#4456401, @aezell wrote:

Here's the favicon size of the simplest icon above.

favicon.ico1 KBDownload

And the SVGs of both icons.

Grant Metrics Icon.svg660 BDownload

Grant Metrics Icon Alternate.svg1007 BDownload

Thanks Alex! @MusikAnimal Let's use it for Translatewiki.

Here's a PNG based on Niharika's old design. Still need to make an SVG out of it.

@aezell - Sorry, didn't mean to lick your cookie! I started on this a long time ago, but never finished it due to other priorities :P I wonder if we could just convert the PNG above to an SVG using one of those online image conversion tools.

In T187854#4456779, @kaldari wrote:

Here's a PNG based on Niharika's old design. Still need to make an SVG out of it.
F24218737

That works for me, but maybe we could come up with some more vibrant colours? I've always been a fan of those pretty ones you created for Pageviews Analysis. How about we use the first three in that palette -- #abd4eb, #b2df8a and #fb9a99 ?

I had previously said I was against having a chart-like figure in the logo, since we don't actually show any charts, but it's better than plain text. I think we might add charts eventually, anyway.

Still, thank you to @aezell for coming up with something! Better than what I could do, that's for sure :) Frankly anything will work at this point, we just need to finally get Grant Metrics on translatewiki.

Here's an SVG of @kaldari's PNG from above. It's currently sized at the original 1500x1500 but you can edit the SVG to whatever dimensions are required.

@kaldari No worries. We were just laughing about in the Sprint kickoff and I figured I'd force the subject a bit. :)

@MusikAnimal: Like this?

@aezell - Nice work! Can you do the same for the newly colored version?

@kaldari That looks friendlier to me.

Whenever we decide on it, I can make the SVG (as may be obvious now).

Much better! Thoughts @Niharika ?

I like it! Thanks @kaldari and @aezell!

PS: Now we know the trick for getting @kaldari to make logos for us...

Here's the SVG for the pastel version. For the record, I used the Mac app Sketch to open the PNG and then exported SVG with their export tool. I then opened the SVG in a text editor to fix the title and description and clean up anything else that wasn't necessary.

Again, this is in the original 1500x1500 but should be editable in any text editor to adjust those dimensions.

It looks like that SVG just puts in a data:image/png blob in an <image> tag, as opposed to using actual vector paths and such. That would explain why it's 608KB in size. In this case I think a smaller PNG would be better. We don't have to have to use SVG, after all, it's just good practice for things like logos. I wish I knew the first thing about creating them!

@MusikAnimal You're totally right. When I imported @kaldari's PNG, it just made it a flat layer.

Let me see if I can mess around that. It may be that the conversion won't work the way I thought it would.

I used an online converter to make this one. It's incomprehensible to me but is much smaller and looks decent to me.

Sweet, thanks! I've used https://jakearchibald.github.io/svgomg/ to optimize it to be even smaller:

Is everyone happy? If so I'll get started on T187379 :)

In T187854#4457414, @MusikAnimal wrote:

I've used https://jakearchibald.github.io/svgomg/ to optimize it to be even smaller:

That tool is really nice.

I started on a pull request to add the favicon and logo to Grant Metrics, and while the favicon looks good, the logo itself is a little off:

Full-size it looks great, but once it gets to around 100px or less the edges look pixelated. Here in the nav bar we have it at 35px in size.

Anyone want to take a stab at fixing this, or are we okay with the way it looks?

@MusikAnimal If you use the unoptimized one, do you get similar results at the smaller size? I'm wondering if the optimizations are lossy and causing this.

In T187854#4482770, @aezell wrote:

@MusikAnimal If you use the unoptimized one, do you get similar results at the smaller size? I'm wondering if the optimizations are lossy and causing this.

No difference, as far as I can tell :/

@MusikAnimal Hmm, maybe increase the icon size in the header a bit? 150px?

We only have ~40px worth of space. SVGs are supposed to scale nicely so not sure what's going on.

For comparison, XTools and Pageviews Analysis both have SVGs in the same place, with the same height, and they look smooth.

That doesn't look good. Maybe we should just put a PNG there instead.

We have a designer now. Perhaps consult him?

I think Joe is right. Maybe @Prtksxna can help us with this problem?

Yes I'm certain you can get it looking good with SVG. SVGs after all are supposed to scale, right? I thought that was the whole point. Both the Pageviews Analysis and XTools logos have more intricate designs, and they came out nice and sharp when placed in the nav at 40px height.

In T187854#4482707, @MusikAnimal wrote:

Full-size it looks great, but once it gets to around 100px or less the edges look pixelated. Here in the nav bar we have it at 35px in size.

This might be happening because the stroke width is too small for that size and the browser isn't doing sub-pixel rendering too well. Could you try once with the image's image-rendering set to crisp-edges - https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering.

Details are often manually removed from icons when downscaling them. If that doesn't work we might want to get rid of the border/stroke on smaller sizes:

I was also experimenting with some color and shape variations, will share some options after a bit more exploring:

Looks a lot like Google 🙃

This works beautifully!!!

I like the style guide colours too. All the shape variations look great to me except "One Copy 2". I'm not too fond of the extra spacing between the slices, but that's just me :)

Looks a lot like Google 🙃

It does! I don't mind it, but feel free to experiment with different fonts or what have you. I don't think we're married to the logo we have now (F24219463), it was just the first one we all agreed on.

Also, would mind giving us a favicon version of the new logo? I've been using a 48x48px .ico file which is just a PNG with a different file extension.

I like Prateek's last one the best! (A COPY 2)

In T187854#4490140, @kaldari wrote:

I like Prateek's last one the best! (A COPY 2)

I agree. The exploded pie chart is a little more dynamic than the tidier versions.

+1 for A COPY 2

Here is A Copy 2 in the original colors, and a few tweaks if you'd like to try it:

I love it! It renders beautifully:

Everyone okay with this?

Looks good to me!

👍

I like it. The colors could be more vibrant but this is good enough. :)

Pull request: https://github.com/wikimedia/grantmetrics/pull/92

This is live on https://tools.wmflabs.org/grantmetrics-test, but for some reason the image isn't showing. The path looks right, https://tools.wmflabs.org/grantmetrics-test/images/logo.svg and it's definitely there on the file system. XTools (another Symfony app) generates the asset URL in the same way, as with [[ https://github.com/wikimedia/grantmetrics/pull/92/files#diff-a2f33b79364623e3cb2737239c5eee62R54 | {{ asset('images/logo.svg') }} ]]. Not sure what's going on!

When I try to load https://tools.wmflabs.org/grantmetrics-test/images/logo.svg, it gives me a 404.

Maybe a permissions issue on the directory? The PR looks like everything should match. If you've checked that the file is on the filesystem, directory permissions is the next thing I'd look at.

-rw-r--r-- 1 tools.grantmetrics-test tools.grantmetrics-test 656 Aug 14 03:21 logo.svg and I tried -rwxrwxrwx too.

We are loading the i18n files in the same way, and those work fine, e.g. https://tools.wmflabs.org/grantmetrics/i18n/en.json. The file permissions are the same, too: -rw-r--r-- 1 tools.grantmetrics-test tools.grantmetrics-test 6258 Aug 10 18:56 en.json

I also tried moving the image to the root of the web/ directory. The favicon is located and it isn't showing up either.

I guess I'll ask for help on IRC, though I feel like it's something on our end and not Toolforge.

What's the web server we use there? Apache? nginx? Something else?

I'm wondering if there's some route config that's missing or incorrect.

That's it!! \o/ The web server is Lighttpd, and there is a .lighttpd.conf file that whitelists the routes. I had this:

url.rewrite-once = (
  ".*\.(json|js|css)" => "$0",
  "^/grantmetrics-test(/.*)" => "/grantmetrics-test/app.php$0"
)

so I just needed to add whitelist svg and ico files. Forgot all about that! I will have to document all of this on Wikitech (standard place is Tool:Name-of-tool, e.g. see Tool:XTools).

The favicon still isn't showing for me, but pretty sure that's a caching issue, and will either show up on it's own or after we bump the assets version.

That makes sense. Glad you found the issue!

6 months and 5 people, for 1 story point :)