Shields: Add Travis CI logo to build badge

[tooomm]

Basically same as https://github.com/badges/shields/issues/507 (AppVeyor logo)

It would be very handy to have a logo on the badge for travis too.
With the upcoming ?logo= (#1092) addition we are fully customizable then. 👍

Logo could be the travis T or the helmet for example. The complete travis face might have too much details for a little logo.

[paulmelnikow]

In #1092 @tylerl0706 asked:

If I want to contribute an svg, are there any requirements? (single color, etc)

Good question. Definitely compressed using SVGo. Single color is a good idea, too. Level of detail should be reduced enough that it looks decent on a badge without being unnecessarily large.

[techtonik]

If helmet could be reduced to just basic recognizable silhouette - that would be cool.

[RedSparr0w]

Full logo does look a bit too large for the badge, although still recognizable.


The hat also looks quite small

unless you use &logoWidth=18

or &logoWidth=20

And finally just the T (IMO looks a bit odd)

[paulmelnikow]

Here's a link to a reduced(?) favicon. Is it any better?

https://cdn.travis-ci.org/images/favicon-c566132d45ab1a9bcae64d8d90e4378a.svg

[RedSparr0w]

Think the lines might be a little too thin on that one

[RedSparr0w]

or maybe style=logo?

with label=%20

with a single color logo

_looks better with a black background when the logo is white_

But this does go against the spec:

The left-hand side of a badge should not advertize. It should be a noun describing succinctly the meaning of the right-hand-side data.

When the logo is that large it's kind of advertising.

[paulmelnikow]

What about just using the mustache?

[tooomm]

What about just using the mustache?

Or the travis T with the mustache on top. The mustache overlay would need to cut in the T to make it more distinct and visible maybe. Maybe it looks really bad, just throwing one idea more.
Recognizable options are limited it looks like...

[RedSparr0w]

Good ideas will have to give them a try when I get near a computer!
Although not sure how travis-ci would feel about us rebranding their logo for badges 😆

[techtonik]

Black on white logo is recognizable. Colored as well. Inversed not so. Maybe leave it on white background somehow?

[RedSparr0w]

Don't think just the mustache works too well:

logoWidth=26:

I would say if anything it would have to be one of the following:

[TylerLeonhardt]

What about just an outlined version of the T sorry I can't contribute a visual right now

[techtonik]

but if colored is preferred, then

[tooomm]

https://github.com/badges/shields/issues/1107#issuecomment-343005239

Mustache only doesn't work, yes... :)

It looks like the black version on light background is easiest to recognize! But the badge left part is darkish...
I mean, the original Appveyor logo is white (https://ci.appveyor.com), but we use a greyish version:
A lesser vivid white version of travis might do the trick here too!

[phonicmouse]

I want this !!!!!
I think the one with the whole face instead of only moustaches is better 🥇

[techtonik]

A lesser vivid white version of travis might do the trick here too!

+1

[RedSparr0w]

Color | Example | Preffered
:-- | :--: | :--:
#ccc | | 🎉
#ddd | | 👍
#fff | | 😄

Color | Example @2x | Preffered
:-- | :--: | :--:
#ccc | | 🎉
#ddd | | 👍
#fff | | 😄

Add a reaction for your preferred logo style(s) and i will try get a PR started in the next few days.

[paulmelnikow]

@RedSparr0w Do you have svg links for those? Would be curious to see what they look like @ 2x.

[tooomm]

Here is a side-to-side comparison, most people might end up putting them next to each other:

• 

• 

• 

I tend to like the white one more here, a bit easier to recognize then the appveyor-grey (ddd). But did you play around with a not as bright white? Like 80-90% white?
Is colored a real consideration? Regarding the other logos only twitter is colored.
Maybe we want some design decision there too... for consistancy and a clean look. Only whitish/greyish logos for example. Or black.
Most of them are white; appveyor is grey; twitter colored; github, gitter and telegram are black... (no idea about the open logo-adding pr's)

[phonicmouse]

The coloured one is just really bad I think...i prefer the 100% white one, I think it suits better near the build label which is white.

[RedSparr0w]

A quick mockup svg with the travis logo here:
http://shields.redsparr0w.com/static/badge.svg?logo=travis&color=white
change color to whatever you like rgb(255,255,255) black ccc ffffff etc. _(exclude the #)_



@1.5x
@2x

[paulmelnikow]

Thanks, those are super helpful. Could you drop them into your post above?

[RedSparr0w]

Updated post above,
Looks like #fff is the favorite currently, will most likely create the PR on Monday.
I may start working on a PR to allow logo color selection sometime soon too.

[ppalaga]

I cannot see travis.svg in https://github.com/badges/shields/tree/gh-pages/logo . Maybe somebody should just publish the master to gh-pages?

[paulmelnikow]

The copy of travis.svg needs to be on the server, so the server needs to be deployed.

[techtonik]

I thought shield.io is continuous deployment, but well.. Is there a doc about deployment process?

[paulmelnikow]

Deploys usually happen every 1–3 weeks. Thaddée, who has limited time on this project, is the only sysadmin. He's working on giving me access to deploy and logs, but doing so is complicated because the hosting account is shared with other services he runs.

[techtonik]

Hosting is Cloudflare. Is that some special offer?

[RedSparr0w]

I may be wrong, but i don't think Cloudflare offers hosting?
They are just the name server from what i can see.

[techtonik]

https://check-host.net/ip-info?host=shields.io shows that shields.io IP belongs to Cloudflare.

[Thedude7054]

I'm a little confused. Has this been implemented? And if so, how does an end user access and use the travis logo?

[calebcartwright]

@Thedude7054 - yes logos are available

https://github.com/badges/shields/blob/master/doc/logos.md

For example
https://img.shields.io/travis/rust-lang/rust?logo=travis