Figma Favicon & Browser Mockup

Digital Tricks

September 14, 2020
Paul Novak
Creative Lead

Designing a good favicon is something that is often overlooked or left until the last minute of a site launch. However, addressing it earlier in a presentations can help show your client that you are thinking of all aspects of the project. Another reason is with the rise of dark mode within the different OS environments. It's important to try and support all users no matter their personal settings and attempt to give them the best experience.

If you are anything like me, you have way too many tabs open at any given time. With those tiny tabs all you see is the favicons. So, it's important to try and stand out and be visible all the time.


Web browser tab going from light mode to dark mode
You can see some of the icons get lost once you switch to dark mode.

You can see some of the icons get lost once you switch to dark mode.

So, I built a pretty easy to use tool in Figma to quickly mockup favicons as well as Web Clip images for Safari's favorites view. I rebuilt Chrome and Safari within Figma, and decided to make a full-on site mockup tool. It's easy to take your pieces of art from other places and simply drop them into the three spots in Figma and generate a series of mockups that can easily be exported and added to a presentation (or anything really).

Get your hands on the Figma file: Favicon & Browser Mockup

Play around with ōryōki browser: oryoki.io