diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl
index 1c4457f..3f1aad4 100644
--- a/public/templates/index.tmpl
+++ b/public/templates/index.tmpl
@@ -12,8 +12,8 @@
   <ul>
   {{#each styles}}
     <li>
-      {{#if serving_raster}}
-        <img src="/raster/{{@key}}/0/0/0.png" width="32" alt="{{name}} preview" />
+      {{#if thumbnail}}
+        <img src="/raster/{{@key}}/{{thumbnail}}" width="64" alt="{{name}} preview" />
       {{else}}
         N/A
       {{/if}}
diff --git a/src/server.js b/src/server.js
index e35416d..b58ae4a 100644
--- a/src/server.js
+++ b/src/server.js
@@ -11,6 +11,7 @@ var clone = require('clone'),
     cors = require('cors'),
     express = require('express'),
     handlebars = require('handlebars'),
+    mercator = new (require('sphericalmercator'))(),
     morgan = require('morgan');
 
 var serve_font = require('./serve_font'),
@@ -190,6 +191,11 @@ module.exports = function(opts, callback) {
           style.viewer_hash = '#' + center[2] + '/' +
                               center[1].toFixed(5) + '/' +
                               center[0].toFixed(5);
+
+          var centerPx = mercator.px([center[0], center[1]], center[2]);
+          style.thumbnail = center[2] + '/' +
+              Math.floor(centerPx[0] / 256) + '/' +
+              Math.floor(centerPx[1] / 256) + '.png';
         }
       }
     });