This is very interesting.
How did you create your new & improved version - was it created by hand or is there a Photoshop or similar technique?
Cheers,
Henry

--
Henry Hadlow - Graphic Design / Art Direction

Hi! Of course it was created by hand!:-) Programs can not do this, well at least not successfully. Particularly Photoshop can't. But you can set very small type in World or in web page, take a screenshot, enlarge it and then study the colorful world that you did't even know it was there! (link 1, link 2)

It helps if you use some techniques of pixel art.

I remembered I did some other favicons as well, I just have to post them!

Oh, and I see there is too strong yellow in YouTube favicon…

Doing screen shots of windows font smoothing and then zooming in can produce some interesting color palettes.

So, some more (old one on left, new on right):

BBC favicon. There is also an optical correction; I tried to make the upper bowl of "B" a little smaller.

MATD favicon, which has most visible differences in "D" and "A".

This could be the classic example, so I attached an enlargement (OK, serifs in "M" aren't necessary):

And Ascender favicon:

I don't think there is something wrong with originals, but they are not perfect either.

You're of a rare breed - it takes one to know one!
Although not using subpixels, you can see a similar
type of obsession in my Mana grayscale pixelfonts:
http://www.themicrofoundry.com/manademo/
And one day I'll use Photofont to make subpixelfonts.

Some people will tell you you're nuts. Just smile
and ignore them - they don't know what Craft is.

hhp

Creating Mana was surely a lot of work! It's good that I decided to do favicons, the smallest think on webpages (16×16) … yet very noticeable. But maybe I can create a very small-sized subpixel font.

I know this is nuts (or maybe not?), and this is one of the reasons I like it. :-D

miha, you rock

This is unreal man. That YouTube favicon, especially. Really great work.

Have you considered building a Photoshop filter for this? It can be at least partly automated.

(I'm the author of "ICO Format" and the other plugins on this page, http://www.telegraphics.com.au/sw/ - talk to me privately if you'd like to pursue this.)

Thanks! I know it is not real: colors are there but you just hardly see them :-)

Photoshop filter is certanly an interesting idea. Maybe it can be implemented in a way that you draw a line and it returns a line with subpixel rendering. Specially useful if you use lines in colors.

Well, the problem is that I only know ActionScript 3.0 (and basic PHP). I have also a doubt how much automation is possible.

I'm not sure this would work on display devices other than LCDs with RGB-ordered subpixels. What about jumbotrons, OLEDs, CRTs, greyscale reflective LCDs, or BGR-ordered LCDs?

Found a cool site with monitor tests, including a pic that can help you determine your LCD's subpixel ordering.

An excellent demonstration. And Hrant, this reminds me of stuff you were talking about (manual grayscale bitmaps) circa 2003.

miha: When I say "automation", it's possible to process a higher resolution image down to an icon while generating the correct RGB encoding of the subpixels. Same way subpixel type rendering works. Plugins are typically coded in C or C++. Just saying I'm open to collaboration on that, if you were interested. Probably this would be a Filter.

From Twitter:

litherland @aegirthor Me, too. This is the hottest thing since I can't remember when.

Do you think something like Quartz on Mac OS X is clever enough to display all vector images with sub-pixel accuracy?

On the Youtube icon there's a big difference just because you resized the red box in your favicon to 15 pixels wide versus the original's 14 pixel width. In the original, there aren't enough pixels to make the letters readable and have space to put a break between the 'b' and 'e'.

Susan, you are right, this favicons works only on monitors with RGB-ordered subpixels. But I think this type is in majority. Also, Windows ClearType offers an option for BRG-ordered subpixels, but not for other monitors. I would like to know the usage percent of different types of monitors …

Toby: I have to do some research about Ps filters and then I will contact you. Maybe I can help with something.

Vector images can be displayed with subpixels, but there is a catch: It works good for black & white text, but with colorful pictures benefits of subpixel rendering may be lost.

Thom, welcome to Typophile! I have to say you are right. The new favicon looked better just because of added pixel and because old one is bad. Subpixels were just for show :-)
Although I tried again: (original first, second and third are mine; the third one is even one pixel less wide)

haha! Nice comeback, miha :)

I see subpixel anti-aliasing as overrated. Also does not work on some displays.

Jakub, I think your favicon is the nicest (except for the top of the "Y", which could be made more Y-like as in my previous post – with subpixel positioning).

But if you preserved 14 pixels wide background (like in original favicon), there is no way to make it as nice as with subpixel rendering. And certainly impossible with 13 pixels.

Actually I was frustrated with original design, this is why redesigned it – using my newest obsession. I have YouTube open all the time (mostly listening to the songs) and have to watch its blurry favicon … same with Wikipedia.

BTW, there is an explanation on Microsoft site that "a very small number [of LCD screens] have a striping order of BGR". It also says that it improves rendering on CRT, but just a little.

Certainly not ideal, but still legible at 13x13px I'd say. :)

Ugh, now you suprised me!

Ok, here is side by side comparison (well I know you could make "You" smaller):

Yours has more true colors … but mine has counters in "u" and "b"! :-D

Can we do now one with 10 pixels? :-P

BTW, you did see my subpixel font with x-heigh of 3 pixels? It's here: First subpixel typeface, ever. It's actually more appropriate for subpixel design than colorful icons.

I have. Truly stunning! Especially if you blow it up and wonder what on earth it reads ;)

The most common case where subpixel hinting breaks down might be display devices that can be rotated. I used to run a 17" LCD in portrait mode for more vertical space, for instance. A more common example is probably portable devices like iPhones that can change orientation at will.

Not to discourage the work, of course. Subpixels are awesome. =)

»Have you considered building a Photoshop filter for this? It can be at least partly automated.« — qu1j0t3

Something similar exists already. Not as a Photoshop filter but a command line tool for Unix systems. It works well, check my comment there for an example.

»I see subpixel anti-aliasing as overrated. Also does not work on some displays.« — jimmac

I think that is because OpenSuse doesn’t enable the true contemporary goodness of FreeType. The old-fashioned intra-pixel filtering is awful.

Tobias, this link and its content are awesome! Really great. When I see the favicon on his site, I think redesigning YouTube favicon here is just a child play … I knew the site was special in a first moment because of sharp heading, rendered with subpixel technology.

I've already seen pictures rendered with this technique loong time ago, but they were bad. On this site, they look great!

"Hi! Of course it was created by hand!:-) Programs can not do this, well at least not successfully."

Uh, they can do this very successfully, actually. There is no shortage of subpixel-aware icon editors out there, and it is not at all difficult to construct a three-boolean lookup table to colors.

In your other post full of false data, I already provided you links to two different image editors, one from the 1970s, which could do this quite easily. You know, the one where you claimed you didn't see any links to font images or font packages.

John Haugeland is http://fullof.bs/

John Haugeland your website is named perfectly. Make of that what you will.

miha, Tom Gidden is a friend of mine, actually :) he said he has been reading this thread with interest when you first posted it. Before I even told him about it

Interesting, Matt! I didn't know he was reading :-)

Here's a favicon that might lend itself to your skills.

http://kakaku.com

Hi all, We've been following this thread at YouTube and are happy to let you know that you've inspired us to change our favicon. We're preparing a blog post about it, but in the meantime we wanted to send Miha some YouTube gear as thanks for bringing it up. Can you email your mailing address to: mia@youtube.com? Thanks!

Hi Mia & others, I am positively surprised! I've sent you an email.

Matt, you will have to wait a little longer, I am busy with designing my typeface! :-P I've already started and it is not as hard as it seems.

This is great news, well done YouTube and well done miha!

The blog post is now live and the favicon is updated (on YouTube, at least). It will take a while to populate across the Web: http://youtube-global.blogspot.com/2009/09/user-inspires-favicon-change....

Thanks again!

Looking great! Well done all involved.

Shame it's not miha's sub-pixel favicon, though.

^ It does use half of his version (the "You") and the "Tube" part is based on the one that jimmac created since the "Tube" lettering is a bit more clear.

It was also widened by 1px so it's the full 16px wide (instead of 15px, so there's no white line along the edge).

Digression: It's great to see this new crowd frequenting Typophile. I hope you guys stick around for more/deeper font talk. And I'd encourage you to browse around this new home - especially the bitmap stuff.

hhp

congrats miha! excellent work.

Congrats! I wish they had included the upper-right corner reflection, but good news all the same.

Marc Piel

I have been very interested in the discussion on sub pixel type because of the "italic" version.

As an industrial designer I have often had to design IHM with pixels and have just realised the number of times I italised, because it made for easier reading, word spacing, etc....

This is even true with a 7x5 pixel matrix!

Does anyone have any comments on this?

Marc

"It’s great to see this new crowd frequenting Typophile."
Exactly, and as a consequence this thread's quality increased.

"Here’s a favicon that might lend itself to your skills."
Hm, doing this is easy … I did it, but ".com" is rendered with Saffron, an Adobe Flash rendering engine. There are actually a lot of possible designs. Here is one:

Marc – welcome to Typophile! Can you explain with more details?

nice work, miha

@miha: this is great work. Would you mind if we used the redesigned favicon for MATD?

—
http://davi.cz

David, you can use it (I also replied to your email). I think different rasterisers can give good result too in this specific case, because letters are relatively big.

Matt, thanks!

You know who REALLY needs the subpixel favicon makeover? FontShop. Go there and you'll immediately see why :-)

Google There's an incredibly short post up at Typophile by Miha showing how much better YouTube's favicon could be if Google applied a sub-pixel rendering technique. Sub-pixel rendering is the approach that Microsoft uses in its ClearType font-smoothing technology, though there are many others using the new york hotels. The concept of sub-pixel rendering is that you can fool the eye into seeing smoother curves and cleaner lines than are actually possible due to the pixel density of a screen by using very specific colors

qu1j0t3: The idea for making a subpixel image reduction filter for photoshop sounds very cool. I've used your ico format plugin to make many favicons, and a filter for reduction would definitely make good and clear favicons much easier to produce ^_^

Excellent blog post! thank you so much for sharing
this on us, I really enjoyed reading all your articles
here. I'm looking forward to see more articles.
Once again thank you and keep up the good work...

real twitter favorites