By Bret Comnes & Rafael Conde in News & Announcements

Netlify now shows your deploy status on its favicon

Ever tab away from a Netlify deploy log only to lose it next to a sea of similar looking Netlify tabs? Yeah, that happens to us, too. That’s why we recently rolled out an update that displays deploy status information in the favicon on your browser tab. The special favicons appear when you navigate to your deploy logs.

Here’s what you’ll see:

4 versions of the favicon: 1. A simplified version of the Netlify logo – a teal square rotated 45 degrees. 2. Simplified logo with a yellow circle. 3. Simplified logo with a red circle with a white line through it. 4. Simplified logo with a checkmark.

You will see a yellow dot on the icon when the deploy is building; it will turn into a white check on the logo if the build succeeds, or a red dot with with a line through it if the build fails. When you are on a different page of the app, no status icon will be shown.

While this might seem like a simple feature, we discovered a few interesting problems during development. Keep reading if you’re curious how we worked through these problems.

Brand sentiment

In one of our first iterations, we used red, yellow and green colorized versions of Netlify’s logo. We decided against this initial version to avoid developing unintended user sentiment during negative outcomes like when your build fails.

Shape and contrast

In an attempt to solve the problems we identified with a colorized logo, we switched to using small colorized dots overlaid on an unmodified logo.

The colorized indicator overlay solved some of the problems we had with the colorized logos, but a large issue remained. Color blind and vision impaired individuals may have trouble distinguishing the red, yellow and green colors of the dots if they lack any distinguishing features independent of color.

When working with a fraction of 16x16 and 32x32 pixel icons, it may seem like it’s hardly worth including distinct status shapes, but it actually provides important distinguishing features to anyone who can’t easily distinguish colors.

First, we removed a lot of the “noise” from our logo by reducing it to its simplest shape. This helped ensure it looked sharp as a small 16x16 pixel icon and afforded visual room for the increased detail around the status icon.

Then, we had to come up with different shapes to distinguish between the building and failed states. We tried a lot of them, and these were some of our favorites:

5 different versions of the favicon for a failed deploy. 1. circle. 2. cross, 3. hexagon, 4. triangle, 5. circle with a horizontal white line through it.

As we explored each shape, we had some realizations:

Final

Ultimately, we chose a set of favicons that incorporated considerations for color, shape, and contrast.

4 versions of the favicon: 1. A simplified version of the Netlify logo – a teal square rotated 45 degrees. 2. Simplified logo with a yellow circle. 3. Simplified logo with a red circle with a white line through it. 4. Simplified logo with a checkmark.

Conclusion

Hopefully this feature comes in handy and isn’t too disruptive to your compile time sword fighting.

The #1 programmer excuse for legitimately slacking off: 'My code’s compiling'
I bet xkcd didn't anticipate these status favicons

We strive to take accessibility into consideration when designing and changing features, and make a best-effort attempt to not let easy-to-miss accessibility issues fall by the wayside. If any of these accessibility design considerations have made your work a little easier we would love to hear from you! Likewise, if we’ve missed something here or elsewhere in the product we would love for you to help us learn and get better.

Lastly, if you enjoy solving problems like this, we’re hiring!