How to Make a Favicon: Complete Guide and Design Tips

Favicon means “favorite icon.” Sometimes called a “​​shortcut icon” or “website icon,” these are small graphics that represent your brand online. Favicons can appear in the web browser bar, search engine results pages, and bookmark lists.

The icon design should be inspired by your brand’s logo and color scheme, but may need to be modified to fit the tiny footprint. For example, Google uses a simple “G” for its favicon, while Fiverr has a green and white “Fi.”

It doesn’t have to take long to create and install a favicon, and it’s a step worth taking. 

In this guide, we make it simple. You’ll find everything you need to know from design principles to creation tips below.

Design principles for creating a Favicon

Before you make a favicon, consider a few design principles. The rules are similar to logo creation and include:

• Simplicity: The most common size for a favicon is only 16x16 pixels. Due to limited space, it’s important to keep it simple. Long words or intricate pictures won’t be legible, which can confuse your visitors.

• Brand consistency: The favicon will appear next to your URL or page title, so make sure it’s relevant and consistent with the rest of your branding. Use similar colors, fonts, and shapes.

• Color usage: Every brand has a color palette, and you should stick with this when creating your favicon. For example, Facebook is known for its signature blue and white, and these hues feature in its web icon.

• Memorability: Your website will have a default favicon like the Shopify or WordPress logo. Change it to a customized design to ensure your website is unique. 

• Background: Favicons are multipurpose and can be displayed on various screens, with light or dark modes. To make it accessible to everyone, consider using a transparent background.

• Suitability: Make sure the image is suitable for all ages. This means there should be no adult content or offensive materials. If Google flags your web icon, it will be removed from search‌ results and replaced with a default. 

Now, here are a few favicons you can use as inspiration. This is how Fiverr, Instagram, and Facebook appear in a Google search:

Favicons

As you can see, these website favicons follow all the above rules. The brands are instantly recognizable, even without a description.

Best practices for favicon design

The W3C (World Wide Web Consortium) advises that favicons should be 16x16 or 32x32 pixels. It also suggests you use 8-bit or 24-bit colors. 

These are the currently supported file formats for different web browsers:

• Edge (Microsoft): ICO, PNG, GIF, JPEG, SVG

• Chrome (Google): ICO, PNG, GIF, JPEG, SVG

• Firefox (Mozilla): ICO, PNG, GIF, JPEG, SVG

• Opera (Kunlun): ICO, PNG, GIF, JPEG, SVG

• Safari (Apple): ICO, PNG, GIF, JPEG, SVG

Internet Explorer (Microsoft) has been retired, but is compatible with both ICO and PNG favicon file formats.

According to Google for Developers, you can only have one favicon per website, except when you have subdomains. For example, https://homepage.com and https://subdomain.homepage.com can both have different icons. But, https://homepage.com and https://homepage.com/page would be the same.

How to create a Favicon

Ready to make a favicon? You have options depending on how much time you have and your skill level:

Hire a Favicon designer

A favicon may only be small, but it will be seen over and over again. It should be professional, simple, and consistent with your brand, so it is worth investing in graphic design.

At Fiverr, you’ll find plenty of talented people who can design your favicon for you. If you need it, you can combine it with other services, such as logo design, web design, and social media design.

Fiverr

You can browse examples of previous work and read reviews to help you choose the right person for the job. It’s a quick and easy process and a good option for those who aren’t confident with DIY design.

Ask your designer to send you both 16x16 and 32x32 pixel PNG or ICO files. The bigger size is best suited to retina screens used on Apple devices, and can also be scaled down as required.

Favicon Generators

Another way to create favicons is with an online generator. There are a number of free favicon generators to choose from, including:

• Favicon.io: You can generate your icon from an image, text, or emoji. This free tool also comes with a basic logo generator.

• Favicon.ico: Upload an image or use the color picker tool to design a basic favicon. There is an instant preview that’s true to scale, so you can see how it will look. 

• RealFaviconGenerator: You can upload an image, and this generator will resize it in an instant. It shows how it will look in different browser themes and comes with HTML markups.

• Iconifier.net: Use this free tool to resize any image into a favicon. It can also convert your file into the .ICO format.

You’ll need to start with an existing image such as your logo to use these tools effectively. But, what if there is the option to create a favicon using emojis or generic graphics? While some tools offer this feature, it isn’t recommended. 

Remember, you want your favicon to be memorable and consistent with the rest of your branding. Use the Fiverr logo maker if you don’t have an existing logo.  

Look for an icon generator that has:

• Compatibility with all modern browsers 

• Compatibility with iPhone and Android devices

• Common file types such as ICO or PNG

• Previews of how your icon will look

• A secure website without excessive pop-ups

• Customization options

• A user-friendly dashboard

Some of these generators also come with a “favicon checker.” You can enter the URL for your page to make sure it is displaying properly.

Design software

If you have design experience and want to make your own icon, you will need the right software. Look for a solution that lets you customize everything from fonts to backgrounds to colors.

If you don’t already have a favorite, you can try:

• Gimp: This is a free Photoshop alternative. It can take time to master this software, so it may not be the best pick for beginners. However, there are tutorials available, and it’s compatible with all file types, including PSD.

• Adobe Illustrator: Adobe is often the go-to for professional graphic designers. Like Gimp, there can be a learning curve, but it’s powerful enough to handle any design project. This comes with a monthly subscription fee.

• Canva: The Canva icon maker is a cloud-based solution with an easy-to-use interface. Your designs won’t be as customizable as the other options on this list, but they can be a good starting point. Start with a free subscription or scale up for more features.

• CorelDraw: CorelDraw is software for editing, illustration, and design. It has a range of tools to help you create and resize your favicon. Some design experience is required, and it comes with a one-off purchase fee. 

Graphic design logos

Most paid software comes with a free trial, so take the tool for a spin before making a financial commitment. 

How can you turn your logo into a favicon?

By now, you know that your favicon needs to be consistent with the rest of your branding. 

Companies like Disney, Apple, Warner Bros, and Starbucks have versatile logos that are scaled down without any changes to fit the favicon size requirements:

Favicon logos

But, resizing your existing logo isn’t always possible. If so, take the key elements and create something new.

This is how Reddit, TikTok, and Netflix do it. The logos are all text-heavy, but the small images pop with a simple icon:

Logo to favicon

Whether you already have an icon or a signature font, your logo should inspire your favicon.

How to add a Favicon to your website

Once you have a favicon, it’s time to add it to your website. The first step is to name the image file, and we suggest calling it favicon.ico. We will use this file name in any examples below.

What you do next will depend on how your site is hosted and your coding skills. 

Upload a favicon using HTML code

If you are confident about making a few changes to your site’s backend, you can add a favicon using HTML. You will need to log in to the web server and upload the favicon.ico to the root directory or /images folder.

Then, download a copy of the index.html file, which can be found in the root directory. You can open it in a text editor like Notepad or edit using the built-in Developer Tools in Chrome.

You will need to add a link element to this file. The new code will sit between the <head></head> tags, directly after the page title. It should look something like this:

<head>

  <title>Name of Page</title>

  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

</head>

Save and upload the file to the server, overwriting the existing file. 

Upload a favicon using WordPress

43.5% of all websites use WordPress. So, if this is your preferred platform, you may be wondering how to add a favicon.

You don’t need to mess around with code. You can do it all from the admin dashboard. The exact steps can vary depending on your theme, but here are the basics:

WordPress

• In the sidebar, hit the “Appearance” tab

• Select the “Customize” tab

• Go to “Site Identity”

• Choose “Site Icon”

• Follow the instructions to upload your favicon file

• Save the changes and preview them in your favorite browser

WordPress expects the file to be larger than the norm. You should aim for 512 x 512 pixels to ensure it looks good on any screen.

Of course, this platform is powered by different plugins. So, there are favicon generators available if you want something more customizable.

Upload a favicon using Shopify

Out-of-the-box solutions such as Shopify, Wix, and Square have code-free options for adding a favicon.

They all have similar steps, so we will use Shopify as an example:

• Sign in to the Shopify admin dashboard

• Select “Themes” and choose your favorite

• Click “Customize” then “Theme Settings”

• Select “Logo” or “Favicon” (this varies between themes)

• Click “Select Image” and upload your favicon file

• Hit “Done” and “Save”

Shopify is compatible with both 16x16 pixel and 32x32 pixel files. 

Overwhelmed by the process? Fiverr’s web design services can help you set up your website and upload the favicon for you.

Hire a Favicon designer on Fiverr

When it comes to designing and building a website, there is a lot to learn. Fortunately, you can find designers on Fiverr who will take care of everything.

Our designers can help you hone your brand identity, create new web pages, and make the favicon shine in every address bar.

The Fiverr platform comes with transparent pricing and secure payment processing. Plus, you can communicate with creators through the app. This means added protection for both buyers and sellers.

What are you waiting for? Get a custom favicon package that includes multiple sizes and formats.

Make a Favicon FAQs

How do I create a favicon?

To create a small icon, you can use a favicon generator, customize a template, or design something from scratch using Illustrator, CorelPaint, or similar.

The other option is to hire a Fiverr freelancer and let them take care of your entire design process.

Is the favicon 16x16 or 32x32?

You can use either. 16x16 pixels is the standard favicon size shown in most browser tabs. However, you can also design a favicon that’s 32x32 pixels because it will scale down. 

Is a favicon a JPEG or a PNG?

A favicon image can be a JPEG or PNG file. But, the most widely accepted is the ICO file type. Free tools such as ICO Converter and Red Ketchup can change any image into an ICO format.

Can a PNG be a favicon?

Yes, you can save your favicon as a PNG file, and it will work in most browsers. You can also use the ICO, GIF, or JPG file extension. 

SVG files are becoming more common but may not load in some browsers.