Create a favicon!

[kayzhu]

Welcome Ideas for favicon!

[kayzhu]

Here is one generated by simply downscaling the logo:

The words are definitely not distinguishable, and I am not sure if I like how it looks -- but it is still better than no favicon!

[wolever]

Maybe black circle, red border, white maple leaf? Could we bug Jess to whip that up for us?

[kayzhu]

Following this post: http://daringfireball.net/2013/01/retina_favicons I created a .ico file containing both the 32x32 and 16x16 favicon, and it looks reasonably better!

32x32:

16x16:

Still, it'd be great if Jess can design a proper favicon instead of the downscaling one -- it'd take me way too long to design something like this :D

[wolever]

Mmm… Better, but still not great, IMO. The antialiasing is pretty terrible :\ I'd rather have just a black square with red border — that would look pretty cool, and be easy to draw.

[kayzhu]

Hmm, this is what it looks like without the words (but still has the maple leaf):

32x32

16x16

[wolever]

Mmm ya — the maple leaf would need to be made bigger in the 32x32, and either bigger or removed in the 16x16… Or maybe put in the centre? And the red border would need to be made bigger in both…

[kayzhu]

Let me try that :) For 32x32, do you mean putting the maple leaf in the centre or the same location but bigger?

[kayzhu]

Hmm, here is what I come up with:

• Without maple leaf:

  32x32:

  16x16

• With (distorted) maple leaf:

  32x32:

  16x16:

[kayzhu]

Here is the refined version with maple leaf in the middle:

32x32:

16x16

The maple leaf in 32x32 looks decent, but the 16x16 isn't so. So I'd agree that using the one with maple leaf for 32x32, and the one with just a black circle for 16x16 is a good solution in this case.

[eloraburns]

I like even the small one with maple leaf. Maybe making the leaf stem thicker in that one, so it's visible?

Funny, this design is close to what I was thinking when I first saw this ticket. :)

[kayzhu]

Pixel fitted favicons:

32x32:

16x16:

and

After manually pixel fit these icons for a while, I am starting to get convinced that representing the maple leaf with a 8x9 grid is not really an easy task. Aside from fixing the circle, whatever choices I made, the look of the maple leaf just didn't look right.

I am also convinced that pixel-fitting, while useful for "straight" graphs, has greatly diminished benefits for circles and geometries with lots of sharp angles such as the maple leaf.

On the plus side of things, it seems all mobile devices, and most modern browsers will use the 32x32 version instead of the 16x16 one :)

[kayzhu]

Here is a pretty nice 16x16 maple leaf for comparison:

(in our version, the maple leaf occupies ~25% pixels in a 8x8 grid and hence a lot harder to not lose information on the edges.)

[kayzhu]

Finally, I found http://pixenapp.com/ -- a pixel art editor, pretty good at doing pixel-fitting :)

[kayzhu]

Somewhat better by decreasing the circle width then pixel-fitted:

16x16:

32x32:

[MichaelDiBernardo]

I love Pixen!!

[wolever]

Hey! Those are looking good! Awesome!

[eloraburns]

:+1: ship it :)

[kayzhu]

Finally figured out what's wrong -- and now I take back my recommendation for Pixen..

It turned out that when I do "save as.." in Pixen, the alpha channel of the original image will not be saved as it is! It took me so much staring/md5/Kaleidoscope to figure out why the icons are looking weirder and weirder as I work on them..

I will update a bit later with a better pixel-fitted favicon.

[kayzhu]

Final favicons: