Our favicon is ugly and asymmetric. Let's fix it! [duplicate]

Question

The favicon for this site has ugly and asymmetric corners:

Compared to the corresponding icons for other beta SE sites, which only have one pixel cut off from each corner, I find the upper corners of our icon especially ugly, since the top edge of the icon shows a visible step.

I first thought it was just a glitch caused by cramming our three-letter abbreviation into an icon template that's too small for it, but on a closer look. it actually seems like there's been at least an attempt to make it fit. Still, I think we could do better.

Jin's been known to tweak site favicons based on community feedback before, so I figured I'd try the same here.

I've posted two suggestions for tweaked icons below; feel free to vote on them to show your preference, or post a third option if you have one.

Ps. Note that even beta site favicons apparently don't have to be pure text; see e.g. the favicons for anime.SE , chess.SE and poker.SE . Dunno what icon would symbolize our site well, though...

^{(OK, so technically those icons are all text, or at least valid Unicode characters. Anyway, you know what I mean...)}

Answer 1

For a third option, it turns out there is a Unicode character for Flag In Hole (U+26F3). Here's my attempt to render it in pixel art on the standard beta SE favicon template:

 

 

And a variant with a ball next to the green:

 

 

I think this actually turned out pretty nice. I'm slightly worried about is the potential for future confusion if there's ever an SE site for real golf, but that seems to be covered by sports.SE already, so we should be (fairly) safe.

Edit: Since this icon turned out so popular, I tried to make some larger versions of it for use in places like the SE site list that need them. I've posted two somewhat different large versions below (#1, #2); please let me know what you think of them.

Answer 2

Since the flag in hole icon has turned out to be so popular, I thought I should try to draw a larger version of it to replace the larger site icon used in various places like the SE site list. I ended up with two versions, so I figured I'd post both here and let you folks vote on them, just like with the smaller favicons.

Here's the first one, loosely based on the reference glyph of the Unicode Flag In Hole character which the pixel art version (shown on the right for reference) was also based on:

 

This one doesn't have a ball next to the green, but it wouldn't be hard to add one, if people like it. I also have an SVG vector version of this image, but I need to clean it up before posting it here, since I did it in Inkscape rather than by hand-coding.

Answer 3

I golfed it down to 2 letters.

Answer 4

How about a design based on the Hacker emblem? It seems to me that of all the SE sites, this one is most closely related to the hacker subculture.

Favicon:

Logo:

Answer 5

Since the flag in hole icon has turned out to be so popular, I thought I should try to draw a larger version of it to replace the larger site icon used in various places like the SE site list. I ended up with two versions, so I figured I'd post both here and let you folks vote on them, just like with the smaller favicons.

Here's the second one, directly based on the pixel art version (shown on the right for comparison):

 

This one does have a ball next to the green, but removing it would be trivial. I like the rendering at full size, but I'm not perfectly happy with the way it scaled down to 48 × 48 px (middle image); some hand-tweaking might improve the results. Still, I feel the combination of pixel art and the flag symbol does work pretty well to symbolize "code golf".

Also, for completeness, here's the original SVG code from which these were rendered. Alas, it's a bit verbose, since SVG doesn't really do loops::

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="144"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
  <!-- meta.SE speech bubble -->
  <g fill="#62b0df" stroke="none">
    <path d="m 80,110 0,25 25,-25 z" />
    <rect width="92" height="90" rx="12" ry="15" x="26" y="25" />
  </g>
  <!-- pixel art logo -->
  <defs>
    <rect id="pixel" width="6" height="6" rx="1" ry="1" x="68" y="42"
          fill="#ffffff" stroke="none" />
  </defs>
  <use xlink:href="#pixel" x="0" y="0" />
  <use xlink:href="#pixel" x="0" y="+7" />
  <use xlink:href="#pixel" x="+7" y="+7" />
  <use xlink:href="#pixel" x="+14" y="+7" />
  <use xlink:href="#pixel" x="0" y="+14" />
  <use xlink:href="#pixel" x="0" y="+21" />
  <use xlink:href="#pixel" x="0" y="+28" />
  <use xlink:href="#pixel" x="-14" y="+35" />
  <use xlink:href="#pixel" x="0" y="+35" />
  <use xlink:href="#pixel" x="+14" y="+35" />
  <use xlink:href="#pixel" x="-21" y="+42" />
  <use xlink:href="#pixel" x="-14" y="+42" />
  <use xlink:href="#pixel" x="+14" y="+42" />
  <use xlink:href="#pixel" x="+21" y="+42" />
  <use xlink:href="#pixel" x="-14" y="+49" />
  <use xlink:href="#pixel" x="-7" y="+49" />
  <use xlink:href="#pixel" x="0" y="+49" />
  <use xlink:href="#pixel" x="+7" y="+49" />
  <use xlink:href="#pixel" x="+14" y="+49" />
  <use xlink:href="#pixel" x="+35" y="+49" />
</svg>

(Yes, I could've golfed it down quite a bit, but I didn't want to do that at the expense of readability.)

Answer 6

Here's my first suggestion for a new favicon:

 

 

It looks the same as the other SE beta favicons, except for being two pixels wider. This is the version I personally prefer.

Answer 7

I don't know, I like this one.

Answer 8

Here's an alternative suggestion, based on the current favicon, but with the top corners changed to match the bottom ones:

 

 

Answer 9

On the recommendation in a comment I tried out Piet. Here is my first go at it. It definitely needs some refining (eg use math to calculate the first number and see if we can get the program to feed into the bottom of the flag), but I wondered if this kind of thing would work. It outputs Golf

Answer 10

My tries:

• – original “P”, cleaner “C”, Joe Z.'s “G”
• – there is enough space for the complete abbreviation: “PPCG”
• – or just use larger characters
• – maybe with shadow, black as the new top bar

Answer 11

I like the golf flag idea very much. With a few more pixels tweaked, it would be possible to also suggest puzzle pieces, two Ps, one reflected, (programming puzzles), to accompany the golf flag.

Answer 12

Since this site is about challenges, code, obfuscation, and of course golfing, how about this?

and larger

It is a whitespace program where the three characters have been converted to red, green, and blue. I'll leave it to you figure out what it's output is.

Answer 13

I personally think the font could use some tweaking, like this:

or this:

Mostly I feel like the top-right corner of the G looks like it's jutting out top-heavily in the current logo.

Answer 14

How about an icon that looks like a golf ball heading toward a hole, but the golf ball is a 0 and the flag is a 1? Or would this be too subtle/too difficult to work out?