diff --git a/xpfe/global/resources/content/bindings/tabbox.xml b/xpfe/global/resources/content/bindings/tabbox.xml
index ca106196cb4..b2943552631 100644
--- a/xpfe/global/resources/content/bindings/tabbox.xml
+++ b/xpfe/global/resources/content/bindings/tabbox.xml
@@ -499,7 +499,7 @@
            extends="chrome://global/content/bindings/tabbox.xml#tab-base">
     <content>
       <xul:hbox class="tab-middle box-inherit" xbl:inherits="align,dir,pack,orient,selected" flex="1">
-        <xul:image class="tab-icon" xbl:inherits="validate,src=image"/>
+        <xul:image class="tab-icon" xbl:inherits="validate,src=image" anonid="tab-icon"/>
         <xul:label class="tab-text" xbl:inherits="value=label,accesskey,crop,disabled" flex="1"/>
       </xul:hbox>
     </content>
diff --git a/xpfe/global/resources/content/bindings/tabbrowser.xml b/xpfe/global/resources/content/bindings/tabbrowser.xml
index 583140aee47..2042390c44f 100644
--- a/xpfe/global/resources/content/bindings/tabbrowser.xml
+++ b/xpfe/global/resources/content/bindings/tabbrowser.xml
@@ -353,9 +353,23 @@
                 else if (this.mBrowser.contentDocument instanceof ImageDocument &&
                          this.mTabBrowser.mPrefs.getBoolPref("browser.chrome.site_icons")) {
                   var req = this.mBrowser.contentDocument.imageRequest;
-                  var sz = this.mTabBrowser.mPrefs.getIntPref("browser.chrome.image_icons.max_size");
-                  if (req && req.image.width <= sz && req.image.height <= sz)
-                    this.mTab.setAttribute("image", this.mBrowser.currentURI.spec);
+                  if (req && !(req.imageStatus & Components.interfaces.imgIRequest.STATUS_ERROR)) {
+                    try {
+                      var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+                      var tabImg = document.getAnonymousElementByAttribute(this.mTab, "anonid", "tab-icon");
+                      var w = tabImg.boxObject.width;
+                      var h = tabImg.boxObject.height;
+                      canvas.width = w;
+                      canvas.height = h;
+                      var ctx = canvas.getContext('2d');
+                      ctx.drawImage(this.mBrowser.contentDocument.body.firstChild, 0, 0, w, h);
+                      this.mTab.setAttribute("image", canvas.toDataURL());
+                    } catch (e) { // non-canvas build, fall back to the old method
+                      var sz = this.mTabBrowser.mPrefs.getIntPref("browser.chrome.image_icons.max_size");
+                      if (req.image.width <= sz && req.image.height <= sz)
+                        this.mTab.setAttribute("image", this.mBrowser.currentURI.spec);
+                    }
+                  }
                 }
                 else if (this.mTabBrowser.shouldLoadFavIcon(location))
                   this.mTabBrowser.loadFavIcon(location, "image", this.mTab);