public
Last active

rel=logo enhancements

  • Download Gist
gistfile1.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
<!--
 
rel=logo is lovely.
 
I have a few ideas on making it better. The core idea is great, but if we're
pushing a new thing, we have an opportunity to encourage web developers to
provide more than just a single color logo. All of the ideas below are optional
enhancements for anybody wanting to use rel=logo on their site.
 
-->
 
<!-- Encourage developers to provide monochrome renditions of their logo for
reproduction in environments without color. We can do this with rel="logo
monochrome", in much the same way as alternative stylesheets are specified
(https://developer.mozilla.org/en/CSS/Alternative_style_sheets). -->
<link rel="logo"
type="image/svg"
href="http://yourdomain.com/logo.svg"/>
<link rel="logo monochrome"
type="image/svg"
href="http://yourdomain.com/logo_monochrome.svg"/>
 
 
<!-- We should be taking advantage of the existing media attribute to give hints
about the intended usage for a given logo. SVGs are great, but Facebook isn't
going to use an SVG as your site's image. Why not supply a PNG, sensibly sized
for the screen, with appropriate media definitions? Any site looking to fetch a
small logo to display can look for this standard link. -->
<link rel="logo"
type="image/svg"
media="screen, print"
href="http://yourdomain.com/logo.svg"/>
<link rel="logo"
type="image/png"
media="screen"
href="http://yourdomain.com/logo_small.png"/>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.