Posted by: digdug2k | July 30, 2014

Better tiles in Fennec

We recently reworked Firefox for Android‘s homescreen to look a little prettier on first-run by shipping “tile” icons and colors for the default sites. In Firefox 33, we’re allowing sites to designate their own tiles images by supporting  msApplication-Tile and Colors in Fennec. So, for example, you might start seeing tiles that look like:

appear as you browse. Sites can add these with just a little markup in the page:

<meta name="msapplication-TileImage" content="images/myimage.png"/>
<meta name="msapplication-TileColor" content="#d83434"/>

As you can see above in the Boston Globe tile, sometimes we don’t have much to work with. Firefox for Android already supports the sizes attribute on favicon links, and our fabulous intern Chris Kitching improved things even more last year. In the absence of a tile, we’ll show a screenshot. If you’ve designated that Firefox shouldn’t cache the content of your site for security reasons, we’ll use the most appropriate size we can find and pull colors out of it for the background. But if sites can provide us with this information directly its 1.) must faster and 2.) gives much better results.

AFAIK, there is no standard spec for these types of meta tags, and none in the works either. Its a bit of the wild wild west right now. For instance, Apple supports apple-mobile-web-app-status-bar-style for designating the color of the status bar in certain situations, as well as a host of images for use in different situations.

Opera at one point supported using a minimized media query to designate a stylesheet for thumbnails (sadly they’ve removed all of those docs, so instead you just get a github link to an html file there). Gecko doesn’t have view-mode media query support currently, and not many sites have implemented it anyway, but it might in the future provide a standards based alternative. That said, there are enough useful reasons to know a “color” or a few different “logos” for an app or site, that it might be useful to come up with some standards based ways to list these things in pages.



  1. Can the tile images for these be SVG images? That would make more sense for future-proofing it. Also, does it have to be an actual file or will data: URIs work? I’m having difficulty finding the related bug number for this on bugzilla.

    • This is Native UI and since Android doesn’t support SVG natively, no we can’t show them there. Data uri’s should work eventually (we already have some code to convert those into bitmaps), but since we’re using the Picasso library for loading these, there’s a chance it won’t support them. I’ll have to look. The work was done in bug 1014712.

  2. Is there a recent change that thumbnails of sites are not shown anymore in the “Top sites” screen? I only see the favicon (I am using the latest Nightly build)

    • Yes. We fixed this in bug 996129. Its to avoid accidentally thumbnailing something like your bank account information or a secret Facebook post. Our behavior matches the desktop behavior for pages with the Cache-Control header set now, except that instead of generating a thumbnail of the login page, we just use the thumbnail right now. We’ve been kicking around some alternative idea (storing the thumbnails with a heavy blur on them). Ideas are welcome.

  3. I can’t seem to find the intent to implement email for this feature; could you point me to it?

    • Forgot about this. Just sent one out.

  4. Will we get those tiles in regular Firefox? It would look great!

    • Desktop is working on some different plans for about:home right now. I don’t think this is on their radar, but we can see if they want it. I’ll ask around!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: