Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

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

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    WebKit Marquee CSS: Bringin&#8217; Sexy Back

    We all joke about the days of Web yesteryear.  You remember them:  stupid animated GIFs (flames and "coming soon" images, most notably), lame counters, guestbooks, applets, etc.  Another "feature" we thought we had gotten rid of was the marquee.  The marquee was a rudimentary, javascript-like...

  • By
    CSS Scoped Styles

    There are plenty of awesome new attributes we've gotten during the HTML5 revolution:  placeholder, download, hidden, and more.  Each of these attributes provides us a different level of control over an element on the page, but there's a new element attribute that allows...

Discussion

  1. Varun Choudhary

    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!