Score code, devs, and debt fast.

Start free trial

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

Alyssa Gregory
Alyssa Gregory
Published in
·Updated:

Share this article

SitePoint Premium
Stay Relevant and Grow Your Career in Tech
  • Premium Results
  • Publish articles on SitePoint
  • Daily curated jobs
  • Learning Paths
  • Discounts to dev tools

7 Day Free Trial. Cancel Anytime.

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 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

Subscribe to our newsletter

Get the freshest news and resources for developers, designers and digital creators in your inbox each week

© 2000 – 2025 SitePoint Pty. Ltd.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.