2

A "screenshot" cover image used to resent web apps isn't always favorable

I've noticed various browsers and other softwares out there are taking a "screenshot" of websites that they want to represent as a shortcut in a GUI using that as a cover image for an element / icon / button to quickly navigate to that site.

Recently I noticed my live instance of a web app I'm developing saved to the dashboard of Chrome, and the "screenshot" cover image used showed my page just as the loading screen was transitioning out to display the page, resulting in an unsatisfactory cover image.

Apple accepts a non-standard tag for this

Also, iOS allows pages to be added as Web Apps with an app icon, and by default will also use a screenshot of the page as the app icon, but they do have their own proprietary meta tag which allows the developer to choose the icon image used to represent the web application.

Is there a standard meta tag for this?

That's good, but my question is, does there exist or is there a plan for a W3C standard covering a meta tag which will allow developers to communicate the preffered cover image for all applications which incorporate an icon or button image for the site?

  • you can just ask them directly..there are online APIs that will give you a screenshot for any given URL – vsync Sep 08 '15 at 16:48
  • @vsync ask who? The W3C? I'm asking if there's a standard to communicate to software what my website's cover image should be. –  Sep 08 '15 at 16:51
  • Your best bet is the Open Graph protocol. – Alex Sep 08 '15 at 16:51
  • emal [WHATWG](https://whatwg.org/), maybe there is an open ticket for that which you can star – vsync Sep 08 '15 at 16:53

2 Answers2

3

W3C「Manifest for a web application」draft standard

The (new) standard that’s closest to what’s described in this question is a specification called Manifest for a web application (aka Application Manifest):

This specification defines a JSON-based manifest that provides developers with a centralized place to put metadata associated with a web application: the web application's name, links to icons, as well as the preferred URL to open when a user launches the web application.…

The example JSON manifest below shows how to specify a set of icons as well as a set of one or more splash screens and other properties for an application.

Example manifest 
{
  "lang": "en",
  "name": "Super Racer 2000",
  "short_name": "Racer2K",
  "icons": [{
        "src": "icon/lowres",
        "sizes": "64x64",
        "type": "image/webp"
      }, {
        "src": "icon/hd_small",
        "sizes": "64x64"
      }, {
        "src": "icon/hd_hi",
        "sizes": "128x128",
        "density": 2
      }],
  "splash_screens": [{
        "src": "splash/lowres",
        "sizes": "320x240"
      }, {
        "src": "splash/hd_small",
        "sizes": "1334x750"
      }, {
        "src": "splash/hd_hi",
        "sizes": "1920x1080",
        "density": 3
      }],
  "scope": "/racer/",
  "start_url": "/racer/start.html",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "aliceblue",
  "background_color": "red"
}

To associate a manifest with a Web application/document, you use <link rel=manifest>:

Example of how to associate a Web app/document with a manifest 
<!doctype>
<html>
<title>Store finder - search</title>

<!-- Startup configuration -->
<link rel="manifest" href="manifest.webmanifest">

<!-- Fallback application metadata for legacy browsers -->
<meta name="application-name" content="Store Finder">
<link rel="icon" sizes="16x16 32x32 48x48" href="lo_def.ico">
<link rel="icon" sizes="512x512" href="hi_def.png">
…

It’s a relatively new spec and still in the process of being refined and implemented in browsers, so it’s not an immediate solution to the problem in the question here. But the authors are from Mozilla and Google, along with Intel, and I think you can expect to see support for it getting added at least to Firefox and Chrome in the near future; there are feature bugs open for both browsers:

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
1

The short answer is No. Facebook has og:image via open graph. Twitter has twitter:image. I'm sure there are 100 other competing standards.

Josh J
  • 6,813
  • 3
  • 25
  • 47