It's a small thing (literally), but it's there at the top of the browser window for everyone looking at our website, and appears every time someone bookmarks one of our pages, so it feels like an important thing to get right.
Our existing icon used the 'Y' taken from 'York' in our full logo, which was starting to look dated and was also a violation of our very own visual identity rules (tut tut).
 |
| The old 'Y' favicon |
As we're now using the University shield as our identifier across our social media channels, it seemed like a good opportunity to bring everything together by using the same icon here too.
Creating the icon
I created the icon at two sizes, 16 x 16 for normal resolution screens and 32 x 32 for retina screens. There are many other possible resolutions for everything from iOS home screen links to Facebook share thumbnails, but I'll come back to those another day.
It turns out that a 16 x 16 canvas doesn't give you much room for subtle details, and at that size the stripes in the shield are very close together and make it look like solid black. To get around this I simplified the shield slightly by removing half of the horizontal stripes in Illustrator, giving the shield the same overall feel as its full-size counterpart.
This was saved as a PNG from Illustrator and uploaded to a tool called X-Icon Editor, which lets you make edits to your icon and preview how it is going to look in the context of a browser toolbar. Once I was happy with the result, I exported my new icon (containing both image resolutions in a single file) and replaced the old one with it.
 |
| The new favicon (with lots of other icon friends) |
No comments:
Post a Comment