Update favicon and container width

[tinykite]

What this does

Updates favicon.ico for Safari with additional whitespace around the logo. Additionally constraints the width of the page description on the LIL homepage with a max-width declaration that constraints the width, using ch units — which is the approximate width of a 0. (For situations where we want to constrain the width of an element for readability purposes, it's very useful!)

Closes Eng-683 and Eng-686.

Screenshots

The updated favicon is in the left menu — the existing apple touch icon shows up in the icon grid to the right.

A mobile-sized viewport showing the header splash content region

A desktop-sized viewport showing the header splash content region. The content declaratively always breaks after the same number of characters, regardless of viewport width.

How to Test

I discovered in the testing of this fix that Safari caches favicons, which definitely caused me a fair amount of confusion. However, these are the steps that can be taken to refresh your favicons:

• Quit Safari
• Switch to the finder and use CMD-Shift-G to bring up a contextual "Go To" menu.
• Navigate to ~/Library/Safari/Favicon Cache/ and delete everything in the Favicon Cache folder.
• Open Safari again — the favicons should be cleared. If the LIL website is in your favorites, you may need to click on the apple touch icon in the favorites icon grid or the favicon itself in the sidebar to refresh the icon. If, for some bizarre reason this does not work, you may need to try to quit out of Safari and/or hard refresh in an incognito window until you see the icons cleared again. 🙃