Add logo image to share the page on social networks

[leobalter]

The site being shared on facebook today brings this image as big thumb: https://www.persona.org/static/i/browser-icons.png Facebook cuts the image to fit on the sharing post and it shows only the Opera logo.

[callahad]

Oooh, that's a particularly bad thumbnail...

[callahad]

We should probably use http://people.mozilla.org/~smartell/persona/assets/persona-logo.png or http://people.mozilla.org/~smartell/persona/assets/persona-logo-wordmark.png

Looks like all we have to do is add

<meta property="og:image" content="https://example.com/foo.png" /> to our header to use it.

Facebook suggests "an image of at least 600x315 pixels. However, bigger is better, so if you have a 1200x630 or larger image that you can use, please give it to us. Also, we recommend that you keep images as close to a 1.91:1 aspect ratio as possible to avoid cropping. (Note: image sizes must be no more than 5MB in size.)"

[AALEKH]

Please review this fix , if any sort of error occurs please guide me through it :)

[callahad]

Thanks for the pull request, @AALEKH! Looks good, with three notes:

1. We should include the image directly in this repo, rather than hotlinking to smartell's people page.
2. The image ratio is a bit off from what Facebook suggests. They suggest 1.91:1, where the current image (3106x755) is closer to 4.11:1, so it would likely get cropped when posted. It'd probably be fine to just add more space above and below the logo (keeping it vertically centered) to reach the 1.91:1 ratio. 3106x1625 should be good.
3. We should probably put it on non-transparent background. White should be fine.

If you're feeling ambitious, it'd be especially neat to change the Persona text color to white and put the whole thing on top of the "Dark Gray" gradient background defined here: https://www.mozilla.org/en-US/styleguide/websites/sandstone/colors/

But I'd happily merge it with just the above 3 items fixed :)

Thank you so much, again! 🍻