

Show HN: Favicon alert bubbles - tommoor
http://tommoor.github.com/tinycon/
A javascript library that allows easy manipulation of the favicon to include nice looking alert bubbles. This means that users can pin your site and still see when their attention is needed!<p>It's been done before, but in my opinion not in a way aesthetically pleasing enough for production use. This library also falls back to the standard number in page title approach for browsers that do no support canvas / dynamic favicons.<p>Thoughts welcome.
======
tommoor
Tinycon is a javascript library that allows easy manipulation of the favicon
to include nice looking alert bubbles. This means that users can pin your site
and still see when their attention is needed!

It's been done before, but in my opinion not in a way aesthetically pleasing
enough for production use. This library also falls back to the standard number
in page title approach for browsers that do no support canvas / dynamic
favicons.

Thoughts welcome.

~~~
abcd_f
While I appreciate a good piece of code and the need to reinvent a wheel, I
wouldn't call your implementation "aesthetically pleasing" either. IMO your
fallback option is _the_ solution, simply appending "(5)" to the page title
when there are 5 pending alerts works the best.

[edit] And I am being downvoted because... ?

~~~
rjvir
There are certain situations in which only the favicon is displayed - for
example, when tabs are "pinned". In these cases, appending text to the page
title would not be visible, which is why it's beneficial to have a dynamic
favicon.

~~~
rplnt
And my pinned tabs are wider than regular tabs. So favicon it is. Gmail has
this function and it is great. Although I do agree that having both is
probably the way to go. Change favicon (don't blink!) and prepend a
number/message to the title.

------
josscrowcroft
Excellent stuff. I find the best javascript micro libs are built with one
specific purpose in mind, like at work or on a startup, then extracted out and
open-sourced :)

I'd suggest adding a config option for how to handle certain digits or
multiples - personally I would prefer to have 1..20 and then 20+, 30+, etc.
because they're easier to grok at a glance. I guess that could be wrapped into
it pretty easily for any given use case though.

~~~
tommoor
Cheers Joss! Agreed, that would be nice.. not sure what the best way to format
that config would be though.

~~~
donohoe
I did this years ago, its not great but may help as a starting point in
thinking about it:

<http://graphics8.nytimes.com/js/app/timeswire/app.js>

Search for this method: _updatePageTimestamp_

It tries to find a managebale number of updates in a relevant and meaningful
time frame " _There have been 18 updates in the last 20 minutes_ " - it works
on this page:

<http://www.nytimes.com/timeswire/>

------
verelo
Just a bit of feedback about the landing page, there is a css issue i think.

<http://i.imgur.com/yVXLg.png>

~~~
tommoor
Sorted, thanks :)

------
joshmanders
I see in the demo it stops at 99, does it not handle 3 digits very well? If it
doesn't would it be good to make it do say 99+ like Gmail does?

~~~
tommoor
It overlaps a little but it's still readable - I think the + approach would be
good, i'll look at adding it soon :)

~~~
joshmanders
Awesome. Really dig this. It's simple and easy to implement. Good work.

------
paramaggarwal
This is what makes checking Hacker News worthwhile every morning. Small things
that make developer's lives easy.

Motivates me to stop being intimidated by the difficulty of implementation,
and concentrate on the power of the idea.

------
simcop2387
Anyone else seeing this not work in firefox? In the javascript console i see
several "Tinycon not defined" problems on firefox 10.

~~~
tommoor
I'll download FF10 and check it out, feel free to submit an issue and i'll
stomp it.

------
paintAcquaint
This is very cool. Great job! I wonder how cpu intensive it'd be to generate a
simple bounce animation.

~~~
zrgiu_
For a canvas of that size I'm sure you could include any basic animation
without a noticeable impact on most 2006+ processors.

------
ScottMFisher
Brilliant! One problem I've found is that it can't handle icons larger than
16x16 (it crops them).

~~~
tommoor
Good find! I'll tackle it this evening, shouldn't be too difficult to fix,
hopefully the loss of quality resizing should be unnoticeable.

------
twodayslate
This should be turned into a chrome plugin. Similar to
[http://www.howtogeek.com/92562/add-an-easy-to-view-
notificat...](http://www.howtogeek.com/92562/add-an-easy-to-view-notification-
badge-to-tabs-in-firefox/)

------
ericbogs
I would argue that the favicon styling used in this Gmail Unread Message Count
userscript is a bit nicer looking? <http://userscripts.org/scripts/show/39432>

------
pedalpete
This is awesome. I was hoping to get something like this for 'save to home
screen'. Any idea if this will work with a large favicon running on a mobile
device?

------
malandrew
The only thing I hate about these kings of notifications is that they pollute
the names of my pinboard bookmarks if I don't manually edit them.

~~~
ashconnor
Maybe a reset button somewhere on the page could solve this?

------
rehashed
Have you seen: <https://github.com/makeable/Notificon>

~~~
tommoor
Yep! Its a good library although wrapped in ender and doesn't do as much.

------
wilhelm
This is cool, but why does it only work in some browsers?

~~~
lnanek
JS for what is normally an image seems pretty far out there, wouldn't surprise
me if not many browsers supported yet. And JS itself often needs to be tested
and tweaked on many browsers before it works on all.

Personally, I would have just implemented in PHP. I already have a pretty
trivial PHP script I use to overlay a site logo on images that are direct
linked instead of accessed on one of my image serving sites. Although browsers
might cache the favicon excessively even with the proper caching headers,
would have to test. But as far as browsers would be concerned it would just be
another image (even if it is generated dynamically by PHP and image magick the
first time and only copied to output from a file cache after).

~~~
wilhelm
Well, this works in more browsers:
<http://www.p01.org/releases/DEFENDER_of_the_favicon/>

------
sambenson
What license is this being released under?

~~~
tommoor
MIT

------
masonhensley
Cool, great job using a timer in the demo to show how it can behave
dynamically.

------
drivebyacct2
This was the next item on my list to hack on this week. This is awesome, I'd
love to see more apps use these, I love pinned tabs in Chrome but I lose info.

