88 Outstanding Favicons and 6 Resources to Help You Create Your Own

Share this article

Favicons have become a standard element in web design, and they can have a tremendous impact on brand recognition (see Matt Magain’s post, Google Changes Favicon, Challenges You To Do Better). If you’re not used to designing for a tiny area (just 16×16 pixels), it can be very difficult to create a distinguishable company-specific or site-branded favicon. And depending on the logo, colors, words, etc. that you’re working with, it can be a challenge to create one that actually looks good. In my constant search for favicon inspiration, I compiled a list of more than 80 creative and well-designed favicons that successfully portray the look and feel of the website or brand. There are probably thousands more that are suitable for this list, so if you have a few of your own favorites, share them in the comments.

99designs 99designs Duct Tape Marketing Duct Tape Marketing MODx MODx SitePoint SitePoint
Acquisition Acquisition Epicurious Epicurious Mozilla Mozilla Skype Skype
Ad and Breakfast Ad & Breakfast ESPN ESPN MTV MTV Small Design Firm Small Design Firm
Amateur Illustrator Amateur Illustrator Facebook Facebook Noggin Noggin SmartWebby SmartWebby
Amazon Amazon Fast Company Fast Company NY Giants NY Giants Smashing Magazine Smashing Magazine
Ben and Jerry Ben and Jerry Finer Design Finer Design Nymbler Nymbler StumbleUpon StumbleUpon
Blooms Today Blooms Today Flickr Flickr New York Times New York Times Target Target
BMW BMW Flock Flock Open Directory Project Open Directory Project Twhirl Twhirl
Boho Magazine Boho Magazine Food and Wine Magazine Food & Wine Magazine Organic Organic Twitpic Twitpic
Brain Candy Brain Candy Georgia Aquarium Georgia Aquarium Panic Panic Twitter Twitter
Cars.com Cars.com Graphic Design Studio Graphic Design Studio Patrick Monkel Patrick Monkel Two Peas in a Bucket Two Peas in a Bucket
CBS CBS Green Tea Design Green Tea Design PBS Kids PBS Kids twothirty twothirty
Christian Sparrow Christian Sparrow Hawaii.gov Hawaii.gov Pepsi Pepsi United States Postal Service USPS
Ciplex Ciplex HGTV HGTV PETA PETA Visible Theory Visible Theory
Cloudless Cloudless Hulu Hulu Petco Petco Webmonkey Webmonkey
Constant Contact Constant Contact Knitty Knitty Peter Hurley Peter Hurley Wedding Bee Wedding Bee
Design Float DesignFloat LightMix Design Studio LightMix Design Studio Pink Cake Box Pink Cake Box The White House The White House
deviantART deviantART LinkedIn LinkedIn Purina Purina Whole Foods Market Whole Foods Market
Devlisting Devlisting LogoSauce LogoSauce RingCentral RingCentral Wine.com Wine.com
Digg Digg MailChimp MailChimp San Diego Zoo San Diego Zoo Yelp Yelp
Digileon Digileon Martha Stewart Martha Stewart ServiceMagic ServiceMagic YouTube YouTube
Ditley Web Design Ditley Web Design The Metropolitian Museum of Art The Met Seventhman Seventhman ZAP Electric Cars ZAP
Now that you’re inspired, it’s time to create your own favicon that’s as smooth as the examples above. Here are a few resources you may find useful:

Frequently Asked Questions (FAQs) about Favicons

What is the importance of a favicon for a website?

A favicon, short for favorite icon, is a small square image or logo that appears next to a web address. It plays a crucial role in enhancing a website’s usability and branding. It helps users to locate your page easily when they have multiple tabs open. Moreover, it strengthens your brand identity and increases its visibility. A well-designed favicon can make your website stand out from the crowd and create a lasting impression on your visitors.

How can I create a unique and effective favicon?

Creating a unique and effective favicon requires a blend of creativity and strategic thinking. It should be simple, yet distinctive and reflective of your brand. You can use design tools like Photoshop or Illustrator to create your favicon. Remember to keep it simple, use a square canvas, and stick to your brand colors. Also, consider how it will look when scaled down to a small size.

What are the best practices for designing a favicon?

When designing a favicon, it’s important to keep it simple and recognizable. Use a design that represents your brand and is easily identifiable. Stick to a square shape and ensure it’s legible at small sizes. Also, use a transparent background to make it blend seamlessly with different browser themes.

How can I add a favicon to my website?

To add a favicon to your website, you need to create a .ico file and upload it to your website’s root directory. Then, you need to add a link tag in the head section of your HTML code that points to the favicon file.

Can I use different favicons for different pages on my website?

Yes, you can use different favicons for different pages on your website. This can be useful for distinguishing between different sections of your site. However, it’s important to maintain consistency to avoid confusing your visitors.

Why isn’t my favicon showing up?

If your favicon isn’t showing up, it could be due to several reasons. The favicon file might not be in the correct format, or the link tag in your HTML code might be incorrect. Also, some browsers might not display the favicon until you bookmark the page.

How can I test my favicon?

You can test your favicon by opening your website in different browsers and devices. Make sure it’s visible and recognizable at small sizes. You can also use online favicon testing tools to check its compatibility with different browsers.

What are some common mistakes to avoid when creating a favicon?

Some common mistakes to avoid when creating a favicon include using too many colors, complex designs, or text. These elements can make your favicon look cluttered and hard to recognize when scaled down. Also, avoid changing your favicon frequently as it can confuse your visitors.

Can I use an animated favicon?

While it’s technically possible to use an animated favicon, it’s generally not recommended. Animated favicons can be distracting and annoying to users. Moreover, not all browsers support animated favicons.

How can I make my favicon stand out?

To make your favicon stand out, use a unique and simple design that represents your brand. Stick to your brand colors and ensure it’s recognizable even at small sizes. Also, consider how it will look against different browser themes.

Alyssa GregoryAlyssa Gregory
View Author

Alyssa Gregory is a digital and content marketer, small business consultant, and the founder of the Small Business Bonfire — a social, educational and collaborative community for entrepreneurs.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week