Treehouse

Control Your Web Application’s Fluid.app Icon

By on  

Fluip App

Fluid.app is an nice Mac application for creating desktop applications that wrap a web application. All you need to do is give Fluid.app a URL and a name, and the application generates a .app file within the Applications directory. One other piece of information you can give Fluid.app is the application icon; the default icon being the website's favicon. If you have a web application which could act as it's own desktop application, it's good to be aware that some users may be creating .app's of your site. Did you know that there's a way that you can tell Fluid to use an alternate icon (other than the favicon) for the generated app? It's as easy as adding an additional LINK tag:

<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub" />

Set the rel to fluid-icon, the href to the high-res image location, and the title to the proposed application title and you're done! Check out GitHub's source to see this tag in "real world" action!

I love when I spot tiny snippets like this that help to enrich your website whilst not taking a lot of time to implement. Other such tips include Facebook Open Graph tags, META Tags to Bookmark Sites on IOS, Overriding XP and Windows themes, and Chrome Frame activation.

ydkjs-1.png

Recent Features

  • Responsive and Infinitely Scalable JS&nbsp;Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • 5 Awesome New Mozilla Technologies You&#8217;ve Never Heard&nbsp;Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • Styling CSS Print Page&nbsp;Breaks

    It's important to construct your websites in a fashion that lends well to print. I use a page-break CSS class on my websites to tell the browser to insert a page break at strategic points on the page. During the development of my...

  • Digg-Style Dynamic Share Widget Using the Dojo&nbsp;Toolkit

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

Discussion

  1. and what is the windows equivalent for the same ?

  2. Kristoffer

    Interestingly Google Chrome has this feature now – Create application shortcuts. It uses link rel=”icon”.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!