How to Make a Favicon

A tiny detail that will make your business stand out in the minds of your customers, you shouldn’t forget about the humble favicon when you’re building a brand.

Creating a favicon takes minimal effort.

So while you can launch your website without one, there’s really no reason not to include a favicon on your branding to-do list.

So, what is a favicon?

Favicons are the small icons displayed in tabs and on favorite or bookmark lists on browsers such as Chrome, Mozilla, and Safari.

The word ‘favicon’ is a shortened version of ‘favorite icon’, but it also goes by other names:

Shortcut icon
Website icon
Bookmark icon

However, they all mean the same thing.

Entering into life way back in 1999, favicons were introduced to internet users with the launch of Internet Explorer 5.

Businesses usually use a scaled-down version of their logo as a favicon, shrunk down to as small as 16×16 pixels.

They’re used as helpful visual signifiers for users, so that they can browse multiple websites with ease.

Say you’re shopping for new clothes. Imagine that the dozen tabs you have open on your browser represent a shopping mall.

What you can see is a row of tiny logos, so that as you compare items and prices, it’s easy to switch between stores.

Sure, there are meta titles next to each favicon that you could read, but who has time to constantly do that?

How to create a favicon

Now that you know what a favicon is, you’ll probably want one for your own website.

It’s one of the easiest ways to make your business memorable to internet users, and it’ll give you a professional-looking edge, too.

And if you want to know how to create a favicon, there’s not much to it.

You even have options. Do you want to do it yourself, or have a favicon generator do the work for you?

As it’s a useful skill to learn, let’s first run through the steps you should take to manually give your site a favicon.

1. Create an image

When it comes to finding a suitable icon for a website, the brand’s logo is the most obvious place to look.

But you can choose any image to represent your site. Just make sure that:

It’s consistent with your branding. Use the same colors, typography, and shaping.
It stands out. Your customers should be able to remember the image easily.
It doesn’t copy any other icon or image. Don’t be mistaken for another brand.

You can design a favicon image by using an editor like Photoshop or open-source software like Canva. If budget is no issue, you could even hire a professional designer.

There are a few design elements that should be completely avoided if you want your favicon to look slick, professional, and memorable.

Make sure you don’t fall foul of these unspoken favicon rules:

No photos. At the size your favicon needs to be to fit in a browser tab, no photo is going to be clear enough to look good or even remotely memorable.
No words. You could definitely feature one, two, or even three letters in your favicon, especially if it’s part of your logo, but full words? Forget about it.
No marketing junk. Although it’s great for branding and image consistency, a favicon is not the place for promotional tools like ‘new’ or ‘sale’ banners.

Use the correct sizing

While browser tabs display favicons in 16×16 pixels, they could also be displayed on a site at up to 32×32 or even 64×64 pixels.

Make sure that your favicon will look its best whichever site it’s on, and create it in a larger format. It can then always be shrunk down to 16×16 pixels.

Use the correct format

Although previously favicons had to be saved as .ico, .png files are now accepted too. You can use tools like faviconer.com to convert files into the .ico format.

If you want your favicon to show up as a Safari Pinned Tab icon, though, you’ll need to save it as a .svg file.

Use the correct style

It’s worth remembering that favicons don’t just show up on browser tabs and in bookmark lists. It will also be visible on wireless devices and shortcut menus.

With that in mind, create two versions of your favicon image: one in solid fill, and one which is transparent. That way, you can guarantee it’ll look good wherever it’s displayed.

2. Upload the image to your website

Once you have an icon ready to go, the next step is relatively simple.

Just rename your .png or .ico image file to ‘favicon’ and upload the file to the root directory of your website.

If you have created a .png file, you’ll likely need to upload multiple files to suit all size requirements.

This is where converting your favicon into a .ico format is beneficial. A .ico file can hold more than one icon, meaning your various sizes can be uploaded to your site as one.

3. Add a basic HTML code

Chances are you won’t need to add any code to help modern browsers find your favicon. Most of them will automatically detect favicon.png or favicon.ico and set it as your icon.

That said, it’s worth adding a basic code to ensure the icon is visible from any browser.

You can implement a ‘link rel= shortcut icon’ HTML code by opening the header.php file and typing this out below or after the </head> tag:

<link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico>

Just remember to switch the file extension type depending on what format you’ve saved your favicon as.

4. Make it versatile

A growing number of eCommerce transactions are taking place over mobile devices, so if you can optimize your site for wireless use, you definitely should.

While not everyone in the world owns an Apple device, you will need to create an Apple Touch icon if you want your favicon to work properly for these users.

Apple Touch icons represent websites that have been saved to the home screen on an Apple phone or tablet.

Not every site has optimized their favicons for Apple Touch use. In these cases, when a user saves the site URL to their home screen, a miniature version of the landing page shows up.

But if you want to look super slick, you can create and upload an icon file specifically tailored for use on an Apple Touch device.

For starters, the file must be provided in a .png format. It’s also best to create the icon at up to 180×180 pixels, to ensure it looks great on any number of screen sizes.

Finally, it’s worth adding a separate HTML code to your website for your Apple Touch icons. The coding would look something like this:

<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>

How to make it even easier

Hopefully you remember the part of this article that mentioned there were two options for creating favicons for your own site.

And maybe you’re wondering how the second option could be any simpler than the first – after all, that was quite straightforward.

Enter the website builder.

Designed to make your life easier in every way, at least when it comes to making a successful site, a decent website builder comes with a favicon generator.

With a tool like Zyro’s favicon generator, you’re given all the information you need in order to know how to make a favicon without the added steps of coding, converting, and finding a designer to do the most fun part of the job.

So, let’s go through the steps for making and uploading a favicon to your site with a generator tool, using Zyro as an example.

1. Pick a template

You can choose from one of Zyro’s preset templates, or upload your own custom image.

2. Customize to perfection

Make use of the tools at your disposal to edit the image or template’s color, layout, and text.

3. Download and go

You’re done – it’s time to download your favicon as a .png or .ico file and publish it on your site.

When it comes to uploading your generated favicon to your Zyro site, there’s zero coding work, no converting necessary, and only a few clicks needed.

Just head to the Zyro editor. If you have multiple websites, pick the site you want to upload a favicon onto.

Select General settings from your settings dropdown menu, locate Favicon and expand the options available to you.

Go to Browse files to find the favicon image that you’ve generated with Zyro’s tool, and double click to upload it.

Next, check out the preview of how your icon will appear on browsers.

If you’re happy with it, click Save changes and your favicon is loaded.