Add base64 favicon and social sharing meta tags

[jessicaschilling]

Small enhancements to dir-index-html pages:

• Closes HTTP Error 404 for /favicon.ico  #35 - not only prevents 404 error on an implicit /favicon.ico but also gives the tab an IPFS cube favicon consistent with other IPFS sites.
• Closes Improve social media previews #34 - adds social sharing metadata. Proof of display in comments below.

[jessicaschilling]

Thanks to @lidel for raising the idea of an inline favicon! Sending to both @Stebalien and @aschmahmann for review, since I'm not sure whose purview this falls under these days.

Favicon screenshot:

[Stebalien]

@aschmahmann is big boss now.

[jessicaschilling]

Proof of display for social sharing cards ... note that these are all using https://gateway.ipfs.io/ipfs/QmUj1ZWPLTvzZhzUFqmthsCwWm6Tn8rF5cyV9h8xCSKVQ2 as a test, which is simply a view-source of my local instance of this branch saved as regular HTML.

Slack:

Twitter (via https://cards-dev.twitter.com/validator):

Facebook (via https://developers.facebook.com/tools/debug/):

[jessicaschilling]

@lidel had a great idea to dynamically insert title element for cases in which someone might be social-previewing multiple links. Amended, and new previews follow using https://gateway.ipfs.io/ipfs/QmNjia5FrrhnrUgtKmzFKvbkJNvAL2Rmc9xxYiVw5GA3xs (again, saved-as regular HTML from my local) ...

Slack:

Twitter (via https://cards-dev.twitter.com/validator):

Facebook (via https://developers.facebook.com/tools/debug/):

@lidel -- you'll see in the Facebook preview that something as long as a CID in that dynamic title field pushes the subtitle out of the available space. I'd actually lean toward restoring the original Facebook meta tags to result in the earlier screenshot -- I know that's not dynamic, and doesn't help differentiate if someone posts a bunch of links to FB, but at least the generic one has some meaning. LMK.

@aschmahmann -- in any case, I think we're close enough to done for you to be able to review this 😊

[jessicaschilling]

@lidel OR -- this is actually preferable -- let's just reverse the title and description tags for Facebook (and others who use the og:foo meta tags). Semantically it still makes as much sense ...

Using https://gateway.ipfs.io/ipfs/QmXFhdYS5EwEVp3Ri2jARj9bmmzT1doZk5CzqVrJX2LRsp ...

Slack reverses the order from my previous comment's screenshot, since it uses the same meta tags as FB:

Twitter is the same as before:

Facebook is better:

[aschmahmann]

Seems good to me. Feel free to merge after @lidel approves.

[jessicaschilling]

@lidel -- we chatted briefly about this but just want to confirm you're OK with this as it stands. Thanks!

[lidel]

LGTM, ship it! 👍

(we can always revisit Open Graph / Twitter tags in the future)

[jessicaschilling]

FYI -- this one is PR'd into go-ipfs as ipfs/kubo#7511