As your tab count crosses 15, the page title in the browser's title bar starts to disappear. And it's the favicon that's only visible.
Tech nerds will confirm as they remember websites from their favicon rather than the name. Yes! Some of us work by opening 100 tabs at once.
Bookmarking wizards also rely on the favicons of your website more than its title (we specialize in bookmarks too).
As a website owner, this means two things to you.
First, your favicon should have great readability leading to a good user experience.
And second is that people should be able to remember the favicon, meaning branding and credibility.
With that basics, let's design some great favicons.
How to Create a Favicon: Step-by-Step Guide
The website's favicon should be memorable, both for you and the readers.
So, instead of merely relying on automatic favicons generators, we recommend putting in some manual effort.
This will add personality to your favicon, making your website stand out. So, here is the step-by-step guide on how to create a favicon.
Designing the Image
Creating an image that'll work as the website's favicon is the first and most important part of the job.
You can use Photoshop, Illustrator, Corel Draw, GIMP, Canva, Procreate, or similar tools.
Many websites use their existing logo as their favicon. And some take only inspiration. Both approaches are right, but we favor the latter.
Here are some tips to get things right when creating the favicon image.
Use a Symbol to tell the story. A unique symbol image that tells your brand's story is the best option for a favicon. You can take inspiration from Nike. They use "swoosh" as their favicon.
Use Letters instead of Words. Words are almost impossible to read in a favicon, so just avoid them. A possible alternative is using one, two, or even three letters of your website's name. Less is more here.
Don’t use Photos. Photos, again, don't contribute anything to making your favicon special. Instead, rely on symbols and letters.
Avoid marketing Junk. Favicon is your website identity. Don’t use it as a sale banner.
Try to come up with something new. Don't try to copy the available favicons. Instead, develop something new in line with your brand's identity.
The Correct Image Size
Most browsers support the standard 16x16 pixels favicon image. However, a 64x64 and bigger pixels favicon image would also be displayed fine.
Here's the favicon pixel type and their relative size.
Browser Favicon: 16x16
Taskbar shortcut icons: 32x32
Desktop shortcut favicons: 64x64
Wordpress favicons: 512x512.
We recommend starting with a bigger pixel size that you can resize later.
The Image Format
The .ico used to be the only format acceptable for favicons. It allows you to compress various sizes of images in a single file.
However, PNG and SVG are also popular these days.
A PNG favicon loads quickly and allows a transparent background. It's the reason for its popularity with most WordPress websites.
SVG favicons are lightweight and load the fastest. Most modern browsers support .svg images.
Although the browses can support JPG and JPEG favicons, they are usually the first choice.
The Image Style
The best image style for the favicon has two versions. One in a transparent and the other in a solid fill.
The reason is to make the favicon look perfect across bookmarks, shortcut menus, or any place it would be visible.
Also, don't fill the favicon image in a single color, especially solid black or white. Two colors are best to maximize visibility.
The favicons should remain practically the same in dark and light modes. Again, you can do this by having a two-tone favicon.
Uploading the Image
The next step is to upload the image to your website directory.
Rename the .ico file you've created to favicon.ico. Uploading the favicon to your website can vary depending on CMS.
However, as a rule of thumb, it should be in the public_html folder of your website’s File Manager.
Sometimes, you'll manually need to add HTML code to your theme's header (<head> section). Here's the code you'll need to paste into the <head> section.
<link rel="icon" href="favicon.ico" type="image/x-icon">The image can be in any format .ico, .png, or .svg. We have mentioned the .ico here as a reference here.
Lastly, you might need to add an additional code to make your favicon receptive to the Apple Touch icon.
<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>Free Tools to help Smoothen the Process of Creating a favicon
Many times, you won’t need to put in that much effort in changing the formats and creating manual favicons.
Instead, you can rely on tools to help you do the process.
Here are different tools/websites you can use to create favicons for your website.
Favicon.io
Favicon.io is our top recommendation for creating a favicon for free.
You can create the favicon from your website's logo, plain text, and even from scratch. Plus, the website offers a good UX.
Favicon.io also allows the conversion of different image formats into .ico.
On average, it takes about 10-25 minutes to create a favicon from scratch.
Zyro Favicon Generator
Zyro Favicon Generator is a subsidiary of hostinger. This allows you to create favicons from the start of your existing logo.
Zyro provides different shapes to take inspiration for your favicon. You can add manual text and play with different color palettes.
Canva
Canva has become a gold standard for effortless designing. You can use it to practically design anything, including the favicon.
However, unlike the other tools on the list, it's not exclusive to creating favicons.
Therefore, you have to select the pixel size and do the formatting manually. You can, however, take inspiration from hundreds of free templates.
Conclusion
At Superdense, we help you manage your bookmarks in a minimalistic way.
Over time, it's an observation that users rely more on favicons to return and bookmark the website than anything else.
Therefore, we consider favicons beyond branding and SEO. It’s your site identity.
So, put some time into mastering the details. You can take inspiration from some of the best favicons we have sorted.
