After many, many hours of toiling away feverishly on your computer or laptop, you’re finally ready to launch that perfect website, with the perfect URL and the perfect layout and the perfect logo and the perfect fonts and the…
You get the idea.
But have you really thought of everything?
Regardless of the aim of your website, from blog to business or beyond, chances are you’ll be launching it amongst a crowded field of other very like-minded sites. Even with a solid SEO and marketing plan, there’s always the chance of being lost in a never-ending shuffle of websites.
Which is why it’s important to seek out all possible advantages and utilize tools to help set your website apart.
In other words, you need to extend your brand beyond the basics. You need to make your website look more credible, help to build your brand and much more.
One way to do this is with a favicon.
What is a Favicon?
A favicon (pronounced fave – icons, short for favorite icons) is that tiny little logo that shows up next to a web address (like google.com above). Typically, you’ll see a favicon in your browser, or your bookmarks page.
Adding a favicon to your website or online store helps to strengthen your brand, by separating your website’s design from all of the others that are out there. Favicons help to:
- Make your website look professional
- Have a site that’s easily recognizable
- Distinguish your site from competitors
- Build your company’s brand and awareness
Ultimately, it’s a small emblem that can have big implications.
Before favicons, it used to be difficult to tell websites apart from each other in your browser. If you had 12 tabs opened, they all looked exactly the same. The first favicon was created to make it easier for people to navigate through multiple web pages, to identify sites easily from a list.
So how can you make a favicon?
Let’s cover image type and size to get started.
What Image Type and Size Should a Favicon Be?
While you can create your favicon using standard image types such as GIF, JPG, and PNG, there’s no guarantee that those will work across all browsers. Some older versions of Internet Explorer for example, which many people still use, may not display any of those formats when it comes to a favicon.
Note for Mac users: As of this writing, a third-party extension is necessary to view favicons in Safari browser tabs, though they do show up in the Bookmark lists. However, the new macOS Mojave, which is set to release later this year, will correct this with an option to turn the feature on or off in Safari > Preferences > Settings > Tabs.
So to avoid the issue, we suggest using the Microsoft ICO format which does work across all browsers. The ICO format also allows you to save the favicon in varying sizes in one file. If you are to use a different format, then we suggest a PNG as the next best image type.
This is important as you want to be sure the favicon will show up correctly when displayed in a tab, bookmark or favorite list, or if a user drags it to their desktop or saves to their mobile devices home screen.
Typically, its recommended to save the favicon in the following sizes:
32×32 – Standard for all browsers.
120×120 – iPhone (standard)
152×152 – iPad and iPad Mini
167×167 – iPad Pro
180×180 – iPhone (retina)
192×192 – Android
310×310 – Windows 10 & Microsoft Edge
How Do You Create a Favicon?
It’s pretty simple. In fact, there are a ton of free online tools that do the whole process for you in a few seconds.
Let’s cover the top favicon generators around (all of them are free).
17 Best Free Favicon Generators
Perhaps the most straightforward generator on our list, with Favikon you merely upload, crop, and download. You can create an ICO or PNG file for multiple applications.
In three steps you’re done creating a favicon for your website or blog, and you get to save it either as a .ico or a .png. What does this mean? You can download it in both large and small sizes.
Free favicon provides users with the ability to upload an image and edit it to their desired features. It’s free to use and supports simple graphics.
This dual-purpose service offers the standard upload method, or you can use their icon maker tool to create your own from scratch. Though it’s not the most complete icon builder we’ve seen, it does work well for simple icons in up to six sizes.
If you don’t already have a logo, but want to make a favicon, Logaster should be your first choice. It provides website and blog owners with the ability to create a logo and convert it into a favicon.
Instead of uploading or editing an image, Logaster guides you through the process of creating an actual logo by having you enter your company or website name and then choosing an activity. From there your logo is produced which also includes a favicon file for your website.
We really like the Favicon.cc service, as it’s one of the more advanced favicon tools on our list.
Not only can you import an image up to 5MB in size across six file types – BMP, CUR, GIF, ICO, JPG, PNG – but the service allows you to create your own favicon from scratch. You can also add animation should that be necessary to make your favicon stand out even more.
Generating a favicon online should be an easy process, and Genfavicon delivers.
It’s another generator that makes it easy to upload, easy to edit, where you can crop the portion of your image to the area you want to use as your favicon. You can generate a favicon in five sizes – 16×16, 32×32, 48×48, 64×64, 128×128 – and accepts GIF, JPG, and PNG image formats.
It’s perfect if you’re looking for a straightforward option.
6. X-Icon Editor
The X-Icon Editor is a create-from-scratch generator that shows you a preview of how your favicon will look in different spots like a browser tab, favorites list, and web address bar.
The editor itself has quite a few nice features and lets you create an icon in four sizes. You’ll also be able to preview the final result before completing your design.
Favicon-Generator.org simplifies the favicon creation process by allowing you to choose between generating a simple 16×16 ICO file or creating icons for browsers, Android, IOS and Microsoft applications. You can also browse their public gallery and select a pre-made favicon if you prefer.
Feature-rich but still relatively simple to use, the favicon generator from RealFaviconGenerator.net is the most comprehensive tool of the ones featured on our list.
Not only does it have the most detailed favicon creation options, but it also lets you check a current favicon to see if any applications are missing and what formats you’ll need to create to address the issues.
The FaviconGenerator.com tool is an easy, no-fluff generator that lets you use images up to 2MB in size, though it does need to be 100×100. You can also create a favicon in five sizes – 16×16, 24×24, 32×32, 48×48, and 64×64.
This option is best for those with a little knowledge of CSS and HTML because after generating the favicon, you’ll be required to copy a code. Stay away if you prefer a quick and coding-free favicon generator.
10. Dynamic Drive Favicon Generator
This favicon generator from Dynamic Drive is a more standard tool where you directly upload your image, and the program creates the favicon for you. In addition to the usual three image file types, GIF, JPG, and PNG, Dynamic Drive also supports BMP. The maximum file size can upload through 150KB.
Winning our vote for best designed favicon generator site, Favic-o-Matic handles the most extensive array of size options as well. From regular conversion sizes to icons for Android and iOS, the service offers you a choice of 20 different size variations to cover almost any need you have.
Upload an image of at least 32×32 px and start creating your favicon with Favic-O-Matic. The online generator helps you create icons to across different platforms, including iOS, Android, Windows, Metro and more.
While you’ll find most on our list deal directly in images, be it uploading or editing them, Antifavicon is unique as it works with text only. Just enter the verbiage you want, select your color scheme and the service will automatically generate your text-driven favicon with an option to save the file.
So if you’d rather use text instead of an image for your favicon, this should be your go-to. Antifavicon is easy to use and a good option for complete beginners.
Another no-frills generator, FavIcon.pro will convert GIF, JPG, and PNG into one of five sizes. It supports icons of 16×16, 32×32, 48×48, 64×64 and 128×128 sizes. These are considered the common favicon sizes, but the current WordPress version supports files of up to 152x152px.
With FavIcon.pro, you’re able to generate icons for every platform, browser and operating systems (OS). If you’re looking to experiment with different favicon and icon sizes, use FavIcon.pro.
Utilizing a three-step process, ProDraw uses the upload method for images up to 1MB in the following formats – BMP, GIF, JPG, PNG, and TIF. From there you select your size from eight different options and create your download. The extra feature here is the option to choose from four different levels of sharpness.
ProDraw also provides other services like adding effects to photos, generating Ecards, Google Maps HTML and converting addresses to GPS location. So if you’re looking for an online tool that goes beyond icons and favicons, ProDraw is your winner.
The faviconit generator hits all of the major points by not only creating favicons, but also touch icons for Apple devices and HTML header for all web browsers and devices.
You’ll upload an image that is at least 310×310, and a max of 1MB and Favicon does the rest. All you need to do is click on the “faviconit!” button after your image has finished uploading.
16. Webestools Favicon Online Generator
Webestools is a favicon generator that offers website designers and owners with a variety of online tools.
Among these tools is their Favicon Online Generator that allows you to upload images from your computer or the internet. You can then edit the image using its online editor tool and create your desired favicon of either 16×16 or 32×32 size.
The Faviconr online generator allows you to generate your favicon from GIF, JPG, and PNG image formats. It lets users upload images below 150KB in order to generate a favicon. You can create a favicon that’s transparent, as long as the source GIF or PNG file is also transparent.
When done, Faviconr requires website and blog owners to copy and paste a line of code to your site. This means you’ll need a little backend knowledge to use Faviconr.
How Do You Add a Favicon to Your Website?
By now you’ve picked the perfect favicon generator and have a beautiful new favicon ready to go!
But there’s still one more thing to do: Upload it to your website.
How you upload your favicon depends on how you set up your website.
If you’re using a website builder such as Wix or Weebly, or an ecommerce solution like Shopify, consult the respective service’s help center to direct you to the proper steps for adding your favicon. If you’re using the popular WordPress platform, uploading a favicon is easy (here’s how with FTP for Joomla).
- Login to your WordPress dashboard
- Scroll down to Appearance, then click Customize
- Navigate to the Site Identity section and go to Site Icon
- Click on Select Image and upload your brand new favicon
- Click Publish
- You’re done!
And that’s all there is to it. Your favicon is ready to show on every website browser across the world.
Though at first glance it doesn’t seem like much, favicons are a very big deal when it comes to your website’s overall reach and branding.
Think for a moment of all the places you see a favicon, and you’ll start to realize how it ultimately becomes your site’s principal or lead identifier.
Apple touch icon.
And on and on.
As you finish up your website design and prepare it for launch, be sure to cover every last detail so that your site is indeed ready to reach the world. Soon enough that small little favicon may very well be the way in which the world reaches you.