[whatwg] Canonical Image and Color

Ian Hickson ian at hixie.ch
Fri Jul 12 10:32:46 PDT 2013

On Mon, 11 Feb 2013, Brian Blakely wrote:
> Meta elements for defining a canonical image and color to be associated 
> with the page(s) in which they are included.  This is intended for use 
> by user agents and third-party applications (such as social networks), 
> referred to collectively as "parsers" in this document.  It is inspired 
> by Microsoft's recent work in site pinning and Apple's "standalone" 
> webapp implementation in iOS Safari.
> <meta name="image" content="path/to/image.png" />
> <meta name="color" content="#123456" />
> * Image
> Value may be a relative or absolute path to file.  No restrictions on 
> filetype or resolution.  May also be an animated image or video format. 
> Filetypes supported and handling therein is relegated to the parser.
> * Color
> Value may be any of the CSS named colors, hex codes, RGB, HSL and their 
> alpha-channel variants.  Once attained by the parser, use is at that 
> parser's discretion.

You are welcome to register these on the wiki and convince people to use 
them, sure. Seems like they already have solutions, though, as you show:

On Mon, 11 Feb 2013, Brian Blakely wrote:
> * Social network sharing
> Facebook currently scrapes "OpenGraph tags" from shared pages to create 
> a content snippet.  One such tag is og:image, which specifies the image 
> to display in that snippet.  Twitter and Google+ use these same tags in 
> addition to their own implementations for developers.  For the title and 
> description of the snippet, scrapers will fall back to <title> and the 
> meta description.  A canonical image would serve the same purpose, but 
> for visual content.

Sounds like this is already solved, then.

> * News aggregation
> Flipboard, a highly visual, magazine-style news and article reader, 
> displays a hero image from the target page.  It does this by parsing and 
> analyzing the <img> elements in a page, sometimes displaying a 
> non-optimal or even vacant result.  A canonical image would allow 
> developers to control this kind of representation with more specificity, 
> and provide the 3rd party app with another presentation option.

Why don't they use the data that Facebook, Twitter, and Google+ use?

> * OS Integration
> Apple currently parses their own "apple-touch-icon" element that 
> specifies which image will serve as a web application's icon after the 
> user has added to the homescreen.  Android's browser uses this same 
> element, while Microsoft uses a similar "msapplication-TileImage".  
> When these element is not specified, a screenshot of the website is used 
> instead or, in Microsoft's case, the favicon.  Firefox OS has still 
> another means of implementation for this.  A canonical image could 
> either replace or provide an additional fallback for this functionality.

Why isn't <link rel=icon sizes=""> sufficient?

> * Color
> In all these cases, a canonical color allows external parsers to provide 
> further branding or additional flourish in their representation of apps 
> and pages.  Microsoft's "msapplication-TileColor" and 
> "msapplication-navbutton-color" elements aim to fulfill this purpose in 
> IE by coloring the app's tile on the Windows 8 homescreen and IE's own 
> navigation UI, respectively.

Seems like there's already a solution, then.

Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'

More information about the whatwg mailing list