6 ms·
Show HN: Favicon alert bubbles
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.
- tommoor 15y agoTinycon 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 15y agoWhile 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... ?
- falling 15y agoBecause you are being arrogant. (I don't have downvote powers)
- the-cakeboss 15y agoWhat was arrogant about the comment? He merely stated that he doesn't find the solution to be aesthetically pleasing. Are opinions contrary to those of the majority now to be considered arrogant?
- Gigablah 15y agoWhile I appreciate a good piece of code and the need to reinvent a wheel That reeked of sarcasm.
- the-cakeboss 15y agoOh, ha! I completely missed the sarcasm in that. Yeah,I can see it as being uncivil.
- abcd_f 15y agoIt wasn't supposed to. Reinventing a wheel is a good thing, that's what a majority of people on HN do on daily basis. This is what moves things forward. "Reeked of sarcasm". Jeez.
- falling 15y agoArrogance is more about tone than content.
- rjvir 15y agoThere 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.
- jbri 15y agoAlso, in many cases the title of a page is longer than the area it's supposed to fit in - in which case, appending the alert to the page title results in it not being visible.
- rplnt 15y agoAnd 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.
- mooism2 15y agoAppending to the end of the page title doesn't work, because the end of the title gets chopped off when it doesn't fit in the tab title or window title. Prepending to the start of the page title does work though.
- josscrowcroft 15y agoThis is one of the reasons I use Twitter web client - it sits in a tab (on the @mentions screen) and I only pay attention to it when I see a "(1)" or whatever. It's unobtrusive notifications.
- tommoor 15y agoHey, the number in title approach definitely has its place! (There's a reason why Facebook, Google use that approach right?) But if you have an audience skewed towards modern browsers and want to do something a little different this works well and definitely draws the eyes attention.
- artursapek 15y agoChanging the title bar is ineffective; you either make the title blink between two states which is a blaring annoyance and terribly distracting (GChat), or you just add a modest little (1) that is hard to see (Facebook). I think the favicon is much better suited for this function; it conforms to what people are used to with mobile phone UI. However, the problem with this library is it has to follow the limitations of favicons' dimensions. I think there should be an open standard for having alert badges like iPhone and Android phones put on top of home screen icons. The browser distributer could design theirs to match the UI so people could recognize them, and they could be allowed to extend just 2 or 3 pixels past the normal favicon boundaries to grab attention without being annoying or invisible. You can tell when people want something when they're settling for several make-shift approaches at it within limitations.
- tommoor 15y agoGreat idea, something like this would be really nice to see integrated into the browser tabs themselves.
- kisielk 15y agoChrome has a desktop notification system similar to Growl. Not sure if Firefox and others implement it. I much prefer it over the titlebar modification which I just find plain irritating.
- artursapek 15y agoI used to have that activated for GChat but got tired of it. I think it's more annoying than the title bar, but at least you can turn it off. Alerts should be there when I want to look for them - they shouldn't pull me out of what I'm doing. If they have to pop up on the screen for me to notice them it probably means I'm paying attention to something else.
- mbrzuzy 15y agoI was just the other day thinking of whether something like this exists, and this library is very aesthetically pleasing indeed.
- mikeburrelljr 15y agoFYI: Typo @ ..."browers" that don't support canvas or dynamic favicons.
- tommoor 15y agoCheers Mike! Changed.
- rplnt 15y ago> This library also falls back to the standard number in page title approach for browsers that do no support canvas / dynamic favicons. I use Opera and it used fallback although favicon notification works for me in GMail or Meebo. You might check that out.
- raphman 15y agoYes, Opera 11.61 masking as Firefox correctly shows the favicon notifications.
- jacobr 15y agoIt's a neat project, but you should really use feature detection rather than UA string sniffing. Both IE9 and Opera have canvas support, but they are not supported. I am pretty sure Opera has dynamic favicon support as well, not sure about IE.
- tommoor 15y agoThe library does use feature detection to detect canvas support, browser sniffing is only to fix some small rendering differences between browsers.
- raphman 15y agoOpera 11.61 masking as Firefox correctly shows the favicon notifications, however.
- tommoor 15y agoOk, i've updated this so the only UA sniffing is to discount Safari as it appears to have all the required support but doesn't allow dynamic favicons. I'm quite sure there isn't a way to feature detect this. Opera now works a treat :)
- jacobr 15y agoIndeed it does, thanks!
- masonhensley 15y agoCool, great job using a timer in the demo to show how it can behave dynamically.
- simcop2387 15y agoAnyone else seeing this not work in firefox? In the javascript console i see several "Tinycon not defined" problems on firefox 10.
- verelo 15y agoJust a bit of feedback about the landing page, there is a css issue i think. http://i.imgur.com/yVXLg.png http://i.imgur.com/yVXLg.png
- tommoor 15y agoSorted, thanks :)
- joshmanders 15y agoI 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 15y agoIt overlaps a little but it's still readable - I think the + approach would be good, i'll look at adding it soon :)
- joshmanders 15y agoAwesome. Really dig this. It's simple and easy to implement. Good work.
- rhplus 15y agoI found the numbers too small to be readable. I'd expect that two states (notify on, notify off) would be enough to serve the same purpose for most users, perhaps with the number in the title too.
- paramaggarwal 15y agoThis 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.
- drivebyacct2 15y agoThis 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.
- ScottMFisher 15y agoBrilliant! One problem I've found is that it can't handle icons larger than 16x16 (it crops them).
- josscrowcroft 15y agoExcellent 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 15y agoCheers Joss! Agreed, that would be nice.. not sure what the best way to format that config would be though.
- pavel_lishin 15y agoMaybe something like: [1,2,3,4,5,6,7,8,9,10,20,30,40,50,100] If the actual number exists in the list, show the number explicitly; otherwise, find the next lowest number and add a +.
- donohoe 15y agoI 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 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/ http://www.nytimes.com/timeswire/
- paintAcquaint 15y agoThis is very cool. Great job! I wonder how cpu intensive it'd be to generate a simple bounce animation.
- zrgiu_ 15y agoFor a canvas of that size I'm sure you could include any basic animation without a noticeable impact on most 2006+ processors.
- rehashed 15y agoHave you seen: https://github.com/makeable/Notificon https://github.com/makeable/Notificon
- tommoor 15y agoYep! Its a good library although wrapped in ender and doesn't do as much.
- deleted 15y ago[deleted]
- wilhelm 15y agoThis is cool, but why does it only work in some browsers?
- lnanek 15y agoJS 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 15y agoWell, this works in more browsers: http://www.p01.org/releases/DEFENDER_of_the_favicon/ http://www.p01.org/releases/DEFENDER_of_the_favicon/
- tommoor 15y agoIt is tested in Chrome, Firefox and Opera. Should work in IE9 but not tested yet. Which browsers do you want? :p
- wilhelm 15y agoOpera. (c: This morning I got the fallback display, but now it works fine. Thanks! I'll definitely use this on one of my projects.
- sambenson 15y agoWhat license is this being released under?
- tommoor 15y agoMIT
- ericbogs 15y agoI 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 http://userscripts.org/scripts/show/39432
- pedalpete 15y agoThis 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?
- twodayslate 15y agoThis should be turned into a chrome plugin. Similar to http://www.howtogeek.com/92562/add-an-easy-to-view-notification-badge-to-tabs-in-firefox/ http://www.howtogeek.com/92562/add-an-easy-to-view-notificat...
- malandrew 15y agoThe 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 15y agoMaybe a reset button somewhere on the page could solve this?