Giving Your Website a Custom Top Sites Preview

A la iCloud, use a piece of simple javascript to present Safari’s Top Sites with a custom logo.

WOWEE! How do they DO it?!?

On using iCloud so much that it found it’s way into my Top Sites, I found that it had a custom icon.

How did Apple do this? A quick look at the page source shows this piece of code (formatting applied for readability):

if(window.navigator && window.navigator.loadPurpose === "preview")
{
    window.location.href = "https://www.icloud.com/topsites_preview/"
};

Clearly this is the piece of code that redirects to a preview page. It would be the work of a moment to alter this to suit your website.

Although it appears as merely an amusing gimmick, this could have actual uses. As the preview is updated every time it is looked at, a news/blog site could use this to provide users with a headline (rendered huge to appear readable in the preview) of some latest article.

When is this appropriate?

Safari Topsites previews are supposed to be screenshots of the actual website, as Safari animatedly scales them up to browser size when clicked on, so you could argue that apart for web apps like iCloud, presenting a different preview interrupts the user experience.

On a previous version of Safari, I would have argued that this is not true because there was a flash of white before the webpage actually loaded. In new versions, the preview image fades cleanly out into the website. This is a great opportunity to have some fun with the transistion. All sorts of gimmicky usages spring to mind!

But I think this technique, whilst fun, is best applied to web apps like iCloud where the preview will fade out into a fairly blank UI. This has a great effect.

And TBH, what use is it, really :)

Important Note

This notice is supplied with the iCloud source:

<-- IMPORTANT NOTE: This file is licensed only for use in providing the iCloud service,
or any part thereof, and is subject to the iCloud Terms and Conditions. You may not
port this file to another platform without Apple's written consent. -->

Whether or not this has any bearing on the use of this little technique I have no idea. I’ve contacted Apple to ask if they have any problem with it No response (what a surprise). I’m assuming that there’s no problem with us using this.