The icon needs to fulfill the following requirements:
- Works as an 16x16px icon (e.g. for Firefox or Safari)
- Works as an 19x19px icon (e.g. for Google Chrome)
- Works as an 24x24px, 32x32px, 38x38px and 48x48px icon (e.g. retina displays)
- Should be more recognizable than the old icon
- Should be well embedded into the browsers’ extension-bar
- All icon sizes needs to be consistent in their appearance
- The ABP label and the stop-sign are required (more on this later)
- Use the same open source font for every size
Getting into more detail
As you can imagine, it’s very challenging to redesign an icon that is already very prominent, especially if you don’t want to confuse some of the over 60 million users that we have. This project is not a project which started yesterday. The idea to create a new logo is more than a year old. Since then, I created lots of different variants in some quiet minutes, which, for example, didn’t include the ABP label. However, we quickly figured out that we can’t make such a huge leaps in so short a time. Some requirements evolved after creating initial drafts. The idea was to create a logo which has the stop sign and the ABP letters in it. An additional goal was to improve the scalability and similarity between the icon and logo. Using an open source font in our product is IMO now overdue since it is not that difficult to use custom fonts on websites anymore.
This ABP icon has cost me a lot of sleepless nights and it was, and still is, necessary to be patient while developing it (especially the 16x16 one). I asked myself more than once: who had this great idea to call this extension Adblock Plus and why did we put the letters ABP into it…
It is obvious that the three letters ABP are too much for a 16x16 icon in general. But it’s inevitable for now, since we figured out that we can’t change the combination of having the stop sign and ABP label inside. However, I want to show you what I’ve ended up with.
The new icon and a new/old comparison (click to enlarge image)
We have three different icon versions at the moment.
- The one which is used for Google Chrome and Opera
- The one for Firefox and Internet Explorer and
- The one for Safari
We can’t change anything about the grayscale effect in Safari but we could change the icon for all browsers in a way so that they are more equal. At the moment, the Google Chrome and the Firefox icon are quite unequal.
Looking back at our requirements, you will find these two:
- Should be more recognizable than the old icon
- Should be well embedded into the browser user interface
To meet these requirements, color is very important of course. At some point, I decided to use #CD0000 because I wanted to have a recognisable red with a big contrast in combination with the white ABP label. This color was not chosen randomly. I used the WCAG 2.0 contrast ratio formula (You can find an easy calculator for this here) to ensure an acceptable contrast in our future user interfaces / websites . You need to think of it, for example, in the context of developing a website or tools for color blind people (or are there conditions other than color blindness that you mean by ‘color deficits’?).Since there are also a lot of people with color deficits out there, it is of course one of our goals to ensure that most of the people out there can experience our tools and websites without big limitations. The color #CD0000 fulfills all the important WCAG 2 requirements except the WCAG 2 AAA ones. But this isn’t bad because the WCAG 2 AAA requirements include a font which is smaller than 18pt. The ABP icon needs to be scaled down to a size of approx. 34x34px to reach the 18pt font in the ABP label. Therefore, I implemented a dark dropshadow to fulfill also the WCAG 2 AAA requirements. This dark shadow has the color value #8f0000. If you use the WCAG calculator and put #8f0000 as the background color and #FFFFFF as the foreground color you will see that we fulfill all WCAG 2 requirements.
The extra pixel
Optimizing the visibility of the ABP label in the small icon version is one of the more challenging tasks. What I’ve done is:
- First, I used a full colored 1px drop shadow to increase the contrast there
- As a second step, I tried to improve the visibility of the font itself. I solved this problem with some dark extra pixels which I added to the label.
I prepared a little infographic to show the most important details and the implementation of the extra pixels.
16x16 icon details (click to enlarge image)
High definition icons
I have not been able to test the 32x32 and the 38x38 versions for high definition (e.g. retina) displays as of yet, so please don’t focus on those sizes.
How can you support us?
I’d appreciate any feedback related to the logo from a variety of user groups, including developers, designers, ABP users or just people that are interested in creating something together.
If you want to play around with the logo you can do this with the
- ABP icon comparison Photoshop file
- Please download the font Source Sans Pro first
- Let me know if you need other files
Last but not least, you have the chance to vote on whether or not you think the logo is ready to implement or if it still needs some improvements.