A favorite icon (favicon), what is it? See that icon up there when you visit a web page or website. That small icon? Yes, that’s a favicon right there. You’ll find them displayed on the “tab” at the top of a web browser (e.g., Google Chrome, Apple Safari), typically 16x16 pixels in size, representing a website/web page. You’ll also find favicons on mobile home screens, a browser's bookmark bar, and search results.
While it’s “mini” in size, a lot is on its shoulders: It can make your brand instantly recognizable, improve user experience, and reinforce brand identity.
So, it plays a significant role in branding (consistency, recognition, and recall). In the following, we’ll share the process of creating a favorite icon from your logo. Sounds technical? We’ll prove to you it’s not.
We’ll even teach you how to do it quickly - even without design experience - and ways to optimize and integrate it into your website. Let’s get started.
Understanding Favicons
As mentioned, it’s a tiny image that directly represents your website (your home on the WWW). Like a visual shortcut or sign, it lets users quickly identify it even if they have at least seven browsers open simultaneously.
Standard Formats
- .png: User-friendly. Creating it doesn’t require special graphic design tools.
- .ico: Microsoft developed the ICO, the original favicon file format. This format allows multiple small images within the same file and is supported by all browser types. (Most widely supported by browsers)
- .svg: Lightweight and highly scalable, but currently doesn’t have excellent browser support. It doesn’t sacrifice load times, though. (Only Opera, Firefox, and Chrome support it)
These are the most common, although additional formats can be available for specific devices or browsers.
Recommended Sizes (in pixels)
PNG (*Browsers accept any square image)
16x16
32x32
ICO
16x16
32x32
48x48
However, note. Some websites may require higher resolutions (e.g.,64x64, 128x128, or 512x512 for mobile devices and retina displays).
How to Prepare Your Logo for a Favicon
First things first: Not all logos can be favicons. Some are not fit to be one. That’s why how you design them matters.
Do you have a logo with intricate text or details? We recommend using a distinguishable element, like a monogram or symbol from your branding, instead.
Or does your logo include small text or details? This can be illegible when scaled down. We strongly suggest using high-contrast or even bold elements for maximum visibility.
It’s also wise to use a transparent background because it allows the seamless blending of your favicon with different browser themes, but a solid, plain-colored background is a sound idea if it enhances the icon’s clarity.
Want to make your favicon look polished and easily identifiable? Use sharp edges in a balanced design.
How to Create a Favicon from a Logo
If you’ve already created a logo with logogenie.com, it’s time to create a favicon. Here are popular ways to do it.
Online Favicon Generators
Use an online tool/generator like Favicon.cc, Favicon.io, or RealFaviconGenerator to make the process convenient and fast—without resizing and converting your logo into file formats manually. [We’ve also prepared a guide on the right logo sizes.]
Upload your brand logo and convert it into different favicon sizes (and even generate one or more resolutions as you deem fit to ensure your favorite icon’s compatibility across devices, browsers, and operating systems).
- Upload your logo image.
- Customize the online favicon generator’s settings.
- Download your favicon!
(Some tools also offer a package containing the different favicon versions for a consistent look and time-saving means of resizing and converting on your end.)
Graphic Design Tools/Software
Want a customized favicon? We recommend using Illustrator, Adobe Photoshop, Canva, or GIMP. Before you get started, set the size of the canvas (dimensions: 128x128 px or 64x64px) for the best results.
You might have to resize and adjust your company logo (or create a business logo first) to ensure visibility and clarity, even at smaller sizes. We recommend designing a sharp and clean design for better scaling.
Remember to save it in PNG format before converting it to a favicon format like ICO for compatibility. [If you are designing in Photoshop, choose “Save for Web” to optimize the file quality and size appropriately.]
Converting the Image into Favicon Format
The design process doesn’t end with having your readymade JPG/PNG file because you must convert it into the ICO format to ensure its browser compatibility. Use conversion tools like ICOConvert, ConvertICO, and Favicon.io for this.
While you prefer a standard size (16x16, etc), we recommend generating multiple sizes to ensure the correct size is readily available for different devices. WordPress and other platforms allow direct uploading of a PNG file, though.
Still, having an ICO version can ensure maximum compatibility across multiple platforms.
How to Add a Favicon to Your Website
Now, on to the next step. With your favicon ready, let’s proceed to the next essential step: uploading it to your website.
Go to the root directory and upload it there. Alternatively, you can put the favicon file directly at /favicon.ico to ensure it’ll be detected automatically by most browsers.
Are you using a CMS like Wix, Shopify, or WordPress? If so, go to the theme settings and upload the favicon there. If you can’t find where to upload it in the settings, go to the dedicated favicon upload section.
Meanwhile, if you have a custom-built website that requires manual integration, you must ensure it’s stored in an accessible location.
To Update the HTML Code
section of the HTML code:
- Insert the link tag into the
- Is the favicon stored in a subfolder? Replace the favicon.png with the actual file path of your favicon. Improve compatibility with an additional tag because some web browsers require an ICO file.
With additional meta tags, you can identify or specify icons for Android devices, Apple devices, or Windows, ensuring a smooth user experience with multiple favicon versions.
To Update the CMS or WordPress Favicon
WordPress
Go to Appearance > Customize > Site Identity.
Upload the favicon.
Shopify
Navigate to Settings > Files or within your theme editor.
*Other website builders, such as Squarespace or Wix, may have their upload options, which you can find in Settings. TIP: Check your favicon across browsers and devices and see if they appear correctly
Testing and Troubleshooting
“My favicon doesn’t appear. What should I do?” Clear your browser cache and refresh the page. Remember that some browsers can take time to recognize your new favicon upload.
In addition, check if the favicon has been implemented with tools like an online favicon generator’s checker.
But if you still cannot see the newly uploaded favorite icon, recheck the file path. See if it’s appropriately linked in your HTML code. Finally, ensure it displays consistently on multiple browsers like Edge, Firefox, Chrome, and Safari.
Best Practices for Favicon Design
Use your logo or brand symbol to help users recognize your website when browsing home screens and bookmark lists.
If you don't have a logomark that fits into the square canvas, remember to use its most recognizable part.
A transparent background can be a better choice than one with background colors. Some users may find the latter too overwhelming, often appearing dated. In addition, a transparent version can be shared or uploaded virtually anywhere because it won’t contradict whatever background colors a device, a browser, or a website has.
Simplicity is the key to an effective favicon!
Do not use an intricate lining or complex text, mainly if you use the smallest size. In addition, it must be recognizable, even from a distance, so we recommend using your logo’s simplified and condensed version if you initially used its colorful and complex version.
Consider branding
How will it be viewed or perceived by people who visit your website for the first time? You must align it with the current branding style guidelines to ensure consistency! Remember, it’s part of a more significant identity, so ensure it looks like it is a part of your brand.
Utilize the entire space
PRO tip: To maximize space, fill in the background of your favicon with color before adding your logo/icon in the middle.
However, you do not need a solid background to utilize the entire space because transparent backgrounds work perfectly. Overall, no matter what you put in the space, ensure it can stretch closer to the boundaries of your favicon design to enhance its clarity.
Use an SVG file for modern browsers because it offers excellent scalability.
As it’s vector-based, it can retain sharpness regardless of size, making it ideal for future-proofing your website design and in high-resolution displays. It’s lightweight, too, improving overall site performance and reducing load times.
Final Thoughts
Use an easy-to-recognize, straightforward, bold, and simple favicon without any excessive details - that can make it less visible in small sizes. Keep it on-brand to enhance professionalism and reinforce your identity. Ensure clarity and compatibility across all platforms.
The steps we’ve outlined above should get you started in creating a professional-looking favicon for your web page or website with your logo. So, go ahead, create a favicon, and implement it to make your website look polished and recognizable to your audience wherever they find it.
