Create a more attractive favicon.ico

[garyburd]

Create a site icon that's more attractive than the one that I generated using an online favicon generator. Add apple-touch-icon-precomposed.png and apple-touch-icon.png variants of the icon.

[mholt]

I've been wanting to see this as well. Here are some mockups I threw together today. They're high-DPI-friendly and I'm just approximating the size for now:

My personal preference is 1.

I also wanted to improve the godoc badge. (Is that OK?) The current one is too small and fuzzy, making it hard to read. Here's a slightly larger, high-DPI version:

But I don't see how black and green fits the GoDoc color scheme. I like this blue one better, and my preferred size is the middle one:

What do you think about any of these?

[unknwon]

No.1 +1

[nathany]

@mholt Thanks for taking this on.

• I'm curious how the "Go DOC" logo would look with the left/right edges of Go aligned to the edges of DOC. It also looks like there is more padding at the top than the bottom, might look better in the center.
• For the larger touch icons, iOS actually cuts the icon out with a curve and that curve changed between iOS 6 and 7. It would be worth trying to add the icon to your home screen to test how it looks. Maybe a less defined curve or square icon would be better, just let iOS do its curving thing. I'm not sure what happens on Android.
• For the badge, http://shields.io/ has been moving towards SVG to handle Retina displays. Travis CI and some others have adopted it. In order to have a consistent look between several badges on a README, we should stick with their style. Though I do like the blue, so grey on the left, blue on the right?
• The Shields spec recommends making badges "non-promotional". So "doc" instead of "godoc".

[nf]

@mholt I like 1, but could we try "GO DOC" or "Go Doc" instead of "Go DOC"? I also quite like 5, and would be happy to go with that.

[mholt]

@nf Using "Go Doc" instead of "Go DOC", and aligned slightly better inside the container:

I initially made "DOC" capitalized for readability at a small size. I prefer "Go Doc" over "GO DOC", though, because the name of the language is usually seen cased as "Go".

I'd also be okay with style 5.

@nathany Good point about the iOS icons; I'm showing the rounded corners here because I think the favicon would look better rounded than square. (But that's just my opinion.) The final renderings for apple-touch-icons would be square so iOS can decide how to round them out.

About the badge... I had no idea that shields.io was a thing. I have a few questions.

1. How does SVG render on GitHub READMEs? I just tried and GitHub stripped it out. What does work for retina images is, instead of using markdown to render the image, using an <img> tag with a specified height or width attribute.

2. I understand not advertising, but "godoc" is such a universally recognized term in our world. It's the name of a convention more than a website ("GoDoc"), right? I've included both renderings here, with the colors swapped, but I still like the "godoc" one better.

[nf]

@mholt I think you've nailed it with your revised version of 1.

I also think "godoc" is a term of art in the Go world, and so it should probably be used on the badge.

[mholt]

Here's what the new one looks like on my retina display, compared with the current one:

Here's the retina-ready badge along with the code in this post that displays it:

<img width="120" alt="godoc" src="https://cloud.githubusercontent.com/assets/1128849/3086388/c474ec06-e531-11e3-9d8b-5cf09180d28a.png">

(Of course, we'd relocate the image and give it a permanent home.)

We'd probably want to replace the current badge too? Here's one of the same approximate size as what we have now:

![godoc](https://cloud.githubusercontent.com/assets/1128849/3086417/1c607754-e533-11e3-9c28-0fa94514ad29.png)

[nathany]

@mholt Nice work on the new favicon. Much improved.

Do you have a non-Retina display to check it on or a url for others to see it in context?

I did help get the Sheilds.io project organized a few months ago, but I haven't been involved recently.

• Personally, I think "godoc" (lowercase) is fine (it's not my rule)
• The design they follow has that on the left in gray. The "dynamic" part is on the right, and the more important piece of data (so it stands out more), but we currently don't have a measure of documentation quality or what-have-you GoDoc badge #107.
• We (Shields) evaluated PNGs with double heights and various ways of doing fonts in SVGs and ultimately decided on SVGs with a common font.
• Here's an example README: https://github.com/gophertown/looper#status
  • GoCover is SVG (note, I've reported the branding concern https://github.com/vieux/gocover.io/issues/3#issuecomment-44073943)
  • Travis CI is using SVG now (not shown)
  • Waffle.io is also using an SVG
  • Drone.io is not yet using the SVG, so it looks a bit different
• I would suggest adding an SVG generated by Shields.io. It's just an img tag that uses an .svg file instead of .png.
• Let's keep the non-Retina PNG as is for existing users (we can switch it to blue, but let's not require users to add a height to their existing READMEs).
• We'll update the tools page to only supply the SVG.

[nathany]

@mholt I can take on the SVG badge if you prefer.

godoc|reference

[mholt]

@nathany I have a non-retina display at work, here's a screenshot:

As for the badge, and the left/right sides, I see that it's a key/value thing. Looking at godoc|reference from a key/value perspective, I see reference as the key, and godoc as the value, which is why I swapped it to be reference|godoc -- as in, the reference is at GoDoc.

Here's an SVG version (hosted from my windowsill temporarily because I can't find an SVG image host), but it renders quite poorly on GitHub as you can see (it's a little big, but this is just a sample):

I'm sure there's a better way to display it? Either way, you're welcome to use Shields to generate an SVG. It'll look slightly different but might show up better. If not, I still personally lean toward using an img tag that we give people with a width specified to control the size. It looks sharp and is just as easy to copy+paste.

I'll trust your judgment, though. Thanks for helping this move along!

[nathany]

The non-retina version isn't too bad. Thanks for checking. Are you doing a PR just to update the favicon and touch icons?

@mholt Which color (RGB/hex) are you using for the blue?

[mholt]

Just picking a blue from the middle of the gradient: #5272B4

I'll submit a PR soon with the updated favicon and some square apple touch icons. iOS 7 and the latest versions of Safari don't add effects to the images so I won't be including the precomposed icons (unless you'd like them).

For the badge, anything else you'd like from me going forward, maybe a PR to replace the existing non-retina badge (status.png)?

[nathany]

I've been meaning to update the badge for a while... I'll take care of that one and then await your review. :-) Thanks.

Is the blue the same dark blue as the buttons on http://golang.org/ ? Seems appropriate.

The "reference" copy I'm not certain about.

[mholt]

@nathany It's slightly lighter than the dark blue buttons; I felt it contrasted the dark gray better, but it doesn't matter to me.

[nathany]

![GoDoc](http://img.shields.io/badge/godoc-reference-5272B4.svg)

This is what the Read the Docs project for Python has:

badges/shields#136

The goal with Shields is to have consistency across the badges that live in a README together. So I'd rather just use what they provide even if we could do something a little better by hand.

Also, we can generate a new PNG for legacy non-Retina use:

![GoDoc](http://img.shields.io/badge/godoc-reference-5272B4.png)

If we developed the scoring stuff (how is beyond me atm) it's just a matter of redirecting to a different badge.

 

[mholt]

Cool, the blue SVG badge at the top looks pretty good. Even the blue PNG badge at the bottom is a decent replacement for what we have now.

I'm still not sure how "godoc" is a key and "reference" is a value (what would the other values be?) - but it sure does read well as "godoc reference" -- so I'm good with it.

[nathany]

@mholt I know what you mean. Mind you "godoc" for a value is about as appropriate in my mind.

I'm sure we'll change it again at some point #171. There has also been talk of a flatter look in the future. travis-ci/travis-ci#630 (comment)

[nathany]

@mholt How is that new icon coming?

[nathany]

This is live now.