Byword Replacement Icon

Byword has become one of my favorite apps to write in, even just as a scratchpad sometimes, from amongst many, many Markdown text editors. It works great in OS X 10.10 Yosemite too, but I find the icon clashes in my Dock with the new style of system icons. I get the typewriter key idea, but it looks a little archaic with its real-world style texture and depth now that Apple has switched to a more expressive and simplified style.

I looked around online and found this replacement by Natty Coleman and tried that out for a while. It’s a little too dark though, the icon is larger than other circular OS X icons, and I wasn’t sure about the switch to a sans-serif B either. Unfortunately I pasted Natty’s replacement over the original icon, so I wasn’t able to use it as a resource later. I thought I’d be able to find it by examining the package, but no luck in the resources folder. I just remembered that I think you can “delete” the icon in the Get Info window to revert to the original so I’ll have to give that a try. There is also another one on Dribbble, but it didn’t work for me for a couple reasons.

Anyhow I made this replacement icon for my own use. I used the new style from iTunes/iBooks/Mac App Store/ etc. and tried to keep it as close to the original as possible. I kept the serifed B and used Baskerville Old Face, which is my best fast guess at what font the original icon’s B was. Probably not correct exactly, but hard to tell from just one character. The bars get a little thin though, so if I do a round two I will try to find a better match. Like I said, I didn’t keep the original icon for reference so I was basing it on the icon visible in the App Store search results, which is pretty small.

I inverted the gradient to keep with the style Apple uses, and lightened it up a bit to make a drop shadow from the B visible. I used Pixelmator (who’s icon is also looking a little incongruous. Correction, this icon was updated with the latest version, my Dock just hadn’t updated yet.) with this OS X icon template, and then produced an icon using Img2icns for the final result. I didn’t spend the time to really do everything properly at every size though, as I don’t really have the tools for that. The only way I’ve done that before was with Photoshop and IconBuilder and I don’t have Photoshop currently. Plus that would take a lot longer and I wanted something quick.

Original, Natty’s, Mine.

Here’s the actual icon file if you want to use it as well:

Byword Replacement Icon.icns

UPDATE: I’ve changed the font and made the B larger. It’s still not the right font, but the bar thickness is better. I think the B might be too big now, but I’m still working on it.

Byword Icon 3.icns

Byword Replacement Icon version 3UPDATE 2: Small tweaks to the gradient. Also started playing around with a version for OmniFocus, not that all icons in OS X should be circles now!

Byword Replacement Icon 4OmniFocus Icon DarkOmniFocus Icon Light

UPDATE 3: A few months back the official actual icon of Byword was updated to a new modern look. The App developer went with an even more minimal look than what I was playing with and I think it looks great:

The new updated official App icon for Byword.