Twitter has a good looking logo and it’s probably safe to assume that any modern website is using it right now. If you’ve been using it wrong this whole time, it’s actually against Twitter’s branding policies. In this tutorial, we’ll use Inkscape to create a vector Twitter logo icon that meets their requirements!
1. Get the Bird
Since we’re using Inkscape, we’ll definitely want to be dealing with vector images. On the official Twitter branding guide, they have EPS and PNG files available for download. While the EPS file is their only option for a vector file, it’s not ideal for Inkscape. I’ll be using a free service like ZAMZAR to convert the EPS into an SVG file.
I ended up downloading and converting the white version of their logo. Once you get your SVG file, open it up with Inkscape and you shouldn’t see anything… because the Twitter bird is completely white (well, the Fill is actually undefined at this point). Let’s go ahead and copy/paste this bird over to a new Inkscape document.
Here’s the bird in a new 96px by 96px document. Now we can work on making this usable and quite frankly, legal.
2. Twitter’s Guidelines
Here’s what Twitter says we can do with their current logo:
- Use our official, unmodified Twitter bird to represent our brand.
- Make sure the bird faces right.
- Allow for at least 150% buffer space around the bird.
- Don’t change the color of the bird.
So far, we’ve gotten an official file from Twitter’s website and are using an unmodified bird (aside from converting it to SVG, but we should be okay there). We’ll definitely keep the bird facing right, also. Another rather important thing is the color, which Twitter says should be #55aceeff, but I also got #00b0edff from their official logo by using Inkscape’s color dropper. To be safe, just use whatever their most current guideline says.
One of the more interesting guidelines they have is the 150% buffer space around the bird, and Twitter’s graphic explanation is pretty weird also. 150% of what? Why isn’t the bird centered? Why doesn’t the bird’s beak count?
So to simplify this (and to be safe), I just took the size of the document (96px) and divided it by 1.5, which yields 64px. In a radial icon, you could get something like this:
Below is my final result blown up to 600px. I know I technically changed the color of the bird, but I saw this inverted style of logo under their accepted logos, so I just went with it. Also, I ended up using #55aceeff for the color.
As far as I’m concerned, this seems to meet all of the requirements for using Twitter’s bird logo. You can of course read up on their branding documentation on your own, but I’m pretty certain this is a good guide for using the Twitter logo properly. If you’re not sure about if your usage of Twitter’s logo meets the requirements, they welcome e-mails to verify your artwork.
Also, if you find out that anything on here isn’t correct, feel free to let me know – I’d like to keep this as accurate as possible to avoid issues. Thanks for reading!