Fable: Logo for Fable and Fable related projects

I completely agree that Fable needs a logo - I think we should get multiple suggestions, so that we have a wide range of ideas to choose from!

Here is one idea from me - this is a lot simpler, so it should work for icons and not just for the main page. It uses the HTML5 shield with current Fable.io colours. You can also combine it with other logos, though I think it needs a bit more work (the Elmish logo below is not super nice, but shows the idea).

To add some more options - I was thinking about something original that wouldn't be based on existing logos in the Javascript ecosystem. Instead I started with the name "Fable" which evokes all sorts of mythical creatures. So here's my rough initial sketch of a dragon as a logo. If you have any feedback, please let me know and I will re-draw it properly.

@evelinag I know it's a dragon, but all I see is this :)
Jk of course, I hope people like it. (perhaps if the dragon is a bit more straight to look like a "f" ?)

@ncave Haha, well, that was one of the most successful logo designs of the 20th century :)

I fixed the problem with dragon! +💯 for dragons!

@evelinag remembered me rather on Rx Logo first. But now can't unsee that from @ncave :))

@tpetricek It still doesn't bite its tail, but it's getting there.

+1 for a logo not related to Babel or HTML. If it's already being used for things like React Native and Node, it means that Fable has the potential to be bigger than that 😄

Is there some way to make the dragon in the shape of an F?

I like it!

What about making the "A" look more like a "#"?

Here you have a drawing as inspiration:

All of these are awesome ideas! Thanks a lot @sergey-tihon for submitting the original proposal. Actually, I like it very much and I think it's good Fable logo makes a homage to Babel the same way as the name does. (BTW, Babel is always used even when compiling for React Native or Node, as Fable itself doesn't output JS code directly.) But I'm also OK with the idea of the dragon if people like it more 🐲

Perhaps we could combine the proposition of @sergey-tihon with the dragon idea :)
Like replacing the symbol on the left with a dragon :) (like that everyone is happy)

The first thing I thought when looking at @sergey-tihon's logo was;

Woot! Fatal Fury!

So add dragons and Fable will sure beat'em all ;)

As a very personal side note I'm not fan of the colors though, I prefer when there is more saturation, when colors are warmer.

@sergey-tihon Fable text and colors + the dragons from @evelinag to the left!

With diamond

with f-dragon

I like the diamond one it is my favorite so far. Not a fan of using Babels' type style, as it is just an implementation detail. Although they look amazing, very nice work!

The hard part of the compiler is compiling the .fs -> .js AST. Tying it that hard to Babel makes it even harder to swap it out for something else in the future. I also like the dragon logos.

Also the first one from @tpetricek is awesome too and I think captures the essence of Fable.

Thought about something this morning from given contributions and comments. So here is the starting mockup:

And here is one result:

featuring:

• the beautiful dragon from @vilinski that symbolises Fable and emerges from Fsharp land to javascript realm (color transformations)
• tower of babel
• diamond at its core/center
• we can then add icons for fable related projectslike @sergey-tihon proposed on each roof

I did it fast, so I can refine the mockup as needed (and of course make better proportions).

[update:]

I have svg files for both the diamond and the dragon if you want to play with them! 😄

And now the bikeshedding tournament begins! :stuck_out_tongue:

@Pauan that's the limits of my english: what does it mean? 😄

@whitetigle Here is a definition for "bikeshedding", and here is another definition. And here is some of the history behind the term.

It basically means people spending a lot of time arguing over "what color should we paint the bike shed?", even though it's a minor unimportant detail.

In this case, it means "arguing over what logo Fable should have".

A tournament means that many people compete to decide who the strongest person is.There is only one winner.

So a bikeshedding tournament is a competition to decide the "best" color for the shed (or in this case, the "best" Fable logo).

Of course I have no problem with bikeshedding, my comment was just for the sake of humor.

@Pauan thanks for the explanation! I feel smarter now 😄

With the flourishing of ideas on this thread, allow me to share the only design advice that I know (because a colleague told this to me once a long time ago):

A good logo is one that you could recognise if someone draw it in a sand with a stick.

Of course, there are good counter examples to this, but I think it is something worth keeping in mind even in the modern digital age. It also means that the logo will work in black & white and you will be able to resize it to 16x16 pixels for favicon.

I think many ideas here have quite elaborate story behind them, which is certainly fun, but they would not be usable as logos in the above sense of a logo. There is nothing wrong with that - it could still be an illustration for the fable web page - but I think if we want a logo, it is worth striving for simplicity (also because simplicity means it can be done without very good artistic skills :-))

what about a ƒ shaped dragon, this has a nice dual meaning because the ƒ highlights the functional nature of fable.

Also I think referring design decisions as bikeshedding really undermines the importance of the decision. Bikeshedding is strictly relegated to decisions of low importance, whereas the logo is of critical importance. Also there is merely an illusion that it takes little skill to make a good logo, when actually it takes a good amount of effort to actually fashion a quality logo. It might even be valuable to pool together some money to pay someone to make a professional logo.

Small reminder - using F# Software Foundation logo in original colors in context "which could imply representation of the F# Software Foundation directly" is not legal.

That's FSSF contribution to our OSS ecosystem, we can't even use logo :)

Just adding some inspiration sources:

I like the idea of a dragon because of what "fable" means. When I think of a fable, I usually think of Aesop's fables ( https://en.wikipedia.org/wiki/Aesop%27s_Fables ), mainly the Tortoise and The Hare ( https://en.wikipedia.org/wiki/The_Tortoise_and_the_Hare ).

Also, + 1 for a logo that is recognizable even as a favicon :)

@sergey-tihon Can I use one of your logo's in an article of mine? :smile:

Spanish inspired "fa-bull" :

1. Plain
   

2.

1. 

2. Plain with framework name (framework font is Rajdhani)
   

3. With Spanish flag colours (created by accident!)
   

4. Spanish flag colours and framework name (in white)
   

5. Plain favicon
   

6. Spanish flag colours favicon
   

That's what I've mustered fumbling around with Inkscape. Nothing deep and meaningful; just a play on the word 'fable' and a nod to Spain.

@psb I like the colour scheme and the simple line/area cubistic style! Numbers 5 and 8 are my favourites. I wonder if just "F-bull" could be a good mix of 5 and 8? (in any case, this is really nice work!)

@psb I really like the combination of F and |>

Not liking the bull part as much, but it's a neat pun.

@Zaid-Ajaj yes, sure

The files are here. I could do some minor changes, but my Inkscape and artistic skills are probably maxing out for me to make improvements. The files are there for anybody to use, improve and professionalise, if they wish to do so.

Hi there, another idea that popped in my mind tonight. 😆

misc ideas: |>, JS yellow, fsharp blue (is there an official color?), tunnel / babel tower, fsharp is the core, of the JS structure aiming towards the infinite and beyond (tm)

Drawing feels so good for the mind after coding 🌈

@psb I really like the bull favicon: simple, warm, clear 👍

One more option from our side (with dragon)

I like the dragon, but I thought I'd throw a different idea out,
Japanese for fable is 寓話, here's something one could draw in the sand (I think it means "tale"):
Simple:

Spanish edition:

@sergey-tihon I really like this new design.
More simple, and we could add the library logo in the dragon body :)

@et1975 I love kanjis and I like your simple rounded design. This is what I love with korean / japanese characters. They catch the eye immediately and can be re-designed according to the needs.

@sergey-tihon I really like the 3rd design! (simpler, no outline)

I really like cubistic design proposed by @psb. Maybe variation of 5 with full FABLE instead of FA-bull_symbol ?

@sergey-tihon The blue ones are really nice, with or without outline, perhaps with an eye and a bit more natural body posture in the middle, something like that:

• Looking vaguely a bit to the left:
  
• Looking forward:
  

• If you think the eye will be too distracting, then just the more natural posture, without outline:
  

In my humble opinion here is the best logo for Fable created by @sergey-tihon:

Simple, flat and modern. It's great, I've fallen in love with it!

All are great ideas, thanks a lot everybody for your proposals! :clap: :clap:

But I've also fallen in love with the dragon, awesome work @sergey-tihon! 🔥 🐉 🔥 Maybe the dragon can replace the F in Fable?

@alfonsogarciacaro :+1: :shipit: :clap: :dancer: :shipit:

Personally, I think the dragon is a bit too tall, if it was shrunk down to 50-75% of its current size it'd be perfect.

Well, for completeness I did some all text logos:

A: small 'e'

B: big 'e'

C: medium 'e'

Favicon:

And, using my best marketing spiel, they can be customised to meet all your logo needs:

@psb I liked the coloured versions! Looks like a Picasso-Miró fusion ;)

How can we even decide here, they are all beautiful and awesome :heart: :clap: :clap: :clap:

I have a hard time reading the logos from @psb
Not saying they are bad but I need to concentrate at first to read the Fable word.

Other than that the colored version are really cool

@Zaid-Ajaj As I said: bikeshedding tournament. :stuck_out_tongue:

Probably the final option from our side...

Smaller dragon that replace F in Fable word

and here is how logo can be branded

You got my vote @sergey-tihon
I really like the logo. It's clean and the colors are really cool

I also vote for the final logo of @sergey-tihon. We'll need a favicon size logo as well, I think.

Perhaps the fav icon can be the "dragon" ?

Yes, that's what I was thinking, just resized into a small square/circle.

A dragon on transparent layout would be the best option for a small logo for github/fav, I think. Great work, @sergey-tihon!

Favicon for site:
favicon_01_Tsx_icon.ico.zip

Square-version for github/twitter organization (Header background in twitter may be yellow, for example):

Large transparent option for prints

This is awesome :smile:

@psb Do you mind if we use your logo for FableConf?

@alfonsogarciacaro Why not the ones from @sergey-tihon ? Wasn't this one we choose ?

Sergey's logo is the one for Fable, yes, the Twitter account already uses it 😄 I was just thinking it'd be nice to use @psb proposal for FableConf, it just fits so well with the French colors and the Picasso style reminds me of something shared between Spain and France :wink:

Hum ah yes 😊

Hi there!
I would like to propose a little bit more saturated/punchy color palette 😄

@alfonsogarciacaro Sure. All the files are here. The blue and red in the logo are the official colours used in the French flag, but it's easy to change them if you need to do so.

To be honest I prefer the actual blue :) Than the punchy one.

@MangelMaxime I think having them side by side makes the saturated version look bad. Try covering up the left side with your hand, then the right side looks a lot better.

Nice trick @Pauan! The saturated version actually looks better, specially for Twitter, I'll use it! Thanks @whitetigle!

Just if need here is the logo used for the Github repo with only the symbol :)

There is a trimmed and optimised svg version of the fable conf logo here. It's smaller than the png and should look better (i.e. not blurry) at all sizes.

Thanks @psb, I was about to ask you that ;) I'm happy yo saw the web with the log, it looks very nice :clap:

De nada. I hope the conference goes very well. Unfortunately, I can't make it this year, but maybe next year.

The SVG version
fablelogo_copy.svg.zip