Safari 9.0 Pinned Tabs

While I am waiting for OS X El Capitan to download, I am doing some corresponding research. One new feature of the Safari 9.0 update that will need some special attention for front-end web developers is the new icons for pinned tabs. Unfortunately, Safari isn’t using an already existent file format or option that has commonly been served up for this sort of purpose—like a favicon.ico (48px x 48px) or the apple-touch-icon.png (180px x 180px).

Here’s the specific info on the matter at hand, Mac Developer Library – Prerelease – Safari 9.0, and the code snippet that should make it all better. It better! (I’ll test this after I have Mac OS X El Capitan and Safari 9.0 installed.)

<link rel="mask-icon" href="website_icon.svg" color="red">

So, I also found an Adobe web article on exporting SVG for the web using Adobe Illustrator. Importantly, this article hones in on the “Best export options for the web.” This is very important, because we are adding more code and another image file to our websites here, making websites into beautiful digital behemoths. (Update 04 Jan 2016: Adobe is revamping and renaming their website and has deleted the link resource above!)

Additionally, here’s some info about how to manually manage your SVG file once you’ve output it.

Online Character Reader (OCR)

Online Character Reader (OCR)

Working for clients who still use typewriters and fax machines, this is the best OCR I’ve used. http://finereaderonline.com/en-us

If the print is too light, hopefully using PDF format, open in Photoshop and tweak the curves. Try to remove any smudges or dots on the page, they’ll probably be interpreted as a symbol so proofreading is encouraged.