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.

Recent Features

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

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!