Question: In our (web) application, we want tooltips (read: title attributes) that also indicate shortcuts for buttons. We have some button that involve the cursor ('arrow') keys. 

We've tried using characters like ⬅ and ←, but they just don't look right. We've also tried spelling it out, e.g. "Left Arrow Key", but that's a bit verbose.

What's a good way to do this?

Answer: 
Tooltips from the basic 'title' attribute are very limited and not your best option: browsers may or may not pop them up as you expect them.

I think @Rahul comment is very good in this regard: you may want to look at a more complete tooltip solution. There's plenty of pre-made libraries to give you more flexible, solid and appealing tooltips that the basic 'title' attribute.

If you are looking at the title attribute for accessibility reasons (as a fallback option from more complex tooltip solutions), then I think the verbose option ('Press Left Arrow Key to...') is your best option: a screenreader would read it out nicely.
What's wrong with your first icon? It looks almost perfect, to me. Of course, it would be better to see it in the context of your other 'key shortcut' icons, but it looks very much like it will convey the important info., namely 'this is the left cursor key'.

If you want to be extra clear, you could colour it beige according to the fact that it's the most likely colour of the key the user will press. Maybe some shading and reshaping of the icon would help to emphasise its 'key-ness'.