Small But Mighty: A Guide to Favicons, Their Power, and How to Create (or Outsource) One for Your Website
What is a favicon? A favicon is a small, 16x16 pixel icon used on web browsers to represent a website or a web page. Favicon is short for “favorite icon” and are commonly displayed on tabs at the top of a web browser. They're also found on your browser's bookmark bar, history and in search results, alongside the page url.
Why are favicons important? A favicon is one of the tiniest touchpoints of your branding. Favicons can help users quickly identify your website among all their open tabs. They also make it easy for users to find your website in their browser history. The more consumers see your favicon, the more likely they'll recognize your logo the next time they see it.
Lettering Works logo + favicon; Doughnut Gallery logo + favicon
Live Learn Dream logo + favicon; Wild Peoria logo + favicon
Divine Dine logo + favicon; The Wink House logo + favicon
CandleTit logo + favicon; Frittata logo + favicon
What’s the difference between a logo and a favicon? While logos and favicons can be the same, favicons are often a simplified logo or simple design that allow users to quickly recognize a website.
How do I create a favicon for my website? Think about your visual branding and what icon could best represent your brand. Favicons are small icons, so it’s a best practice to design one separate from your logo, especially if your logo has a lot of detail.
Three Tips for Creating Your Own Favicon:
Make it recognizable. This is an opportunity to tie in your branding thoughtfully. Your favicon should connect to your logo and branding, but will likely need to be a simplified version or custom design.
Keep it simple. Remember that it will be very small. While scaling down your logo may be an option, consider developing something more simple that will help your brand stand out.
Use a transparent background. Most favicons have a transparent background as ones with a background can often appear distracting or even dated. Some websites have an option to upload a second favicon to be used for dark mode. Consider what makes the most sense for your brand color wise and if it works in multiple screen modes.
To upload your favicon, you’ll want to check the instructions that your website platform or host provides. For example, Squarespace has clear directions here and Wordpress has clear directions here.
If design isn’t your forte and these tips seem overwhelming, you may want to consider outsourcing this work and hiring a graphic designer or branding professional to help you out. A favicon is also a great deliverable to request if you are working with a professional on establishing your branding.
Favicons are included in all of Lettering Works’ branding packages but I may still be able to help if you already have established branding or aren’t quite ready to invest in a full branding package. Send me a message today or learn more about custom branding from Lettering Works here →
The Favicon Fix: A Lettering Works Passion Project
A peek behind-the-scenes at the development of The Favicon Fix passion project logo is below. As always, I start with sketching, identify my favorite sketches, and recreate them on the iPad in Adobe Fresco. From there, I bring them into Adobe Illustrator to make final tweaks, add color, and finalize my favorite option.
The Favicon Fix Logo
The Favicon Fix Logo Development
This passion project is still taking shape. I’m not sure if I’d like it to be purely educational in nature or if I’d like to be the one to fix all of the favicons. As it develops, I welcome you to reach out directly if you could use support in designing a favicon that well represents your own brand and business.
Some examples of what we don’t want to see on your website
A Gallery of Fixed Favicons:
Looking for tailor-made branding solutions to fuel your success?
Lettering Works takes the stress of design work off your hands and brings a fresh perspective to your business. By fusing strategy with design and innovation with creative collaboration, Lettering Works meets you where you’re at to develop the best solutions for your unique needs. Learn more about custom branding from Lettering Works →
