When you're sifting through a sea of open tabs, how do you quickly find the one you need? I bet it's by using favicons — the small icon that appears next to a site's title in your browser tab.
Short for "favorite icons," favicons don't just appear in browser tabs; you'll also find them next to bookmarks, history results, search bars, mobile browser screens, home screen shortcuts, and SERPs.
Favicons are often overlooked when creating a website, but they can make a big impact on how polished your website feels. In this article, we'll cover why you need a custom favicon, how to create one, and how to add it to your website.
Why should you add a favicon to your website?
Favicons are one of those small things that make a big difference. Here's why:
- Favicons improve the user experience: Favicons help people quickly navigate to your website when they have multiple tabs open. It also allows visitors to recognize your site in search results. This instantly elevates the website experience and enables people to find your website easily whenever they need.
- Favicons boost brand recognition: Favicons make your website instantly recognizable in a jungle of tabs or SERPs. Visitors will soon start associating and remembering your website with your custom favicon, regardless of the device they're on. If you've used an iteration of your logo, favicons will also reinforce your brand identity and allow you to maintain consistent branding across marketing channels.
- Favicons lend your website some credibility: Generic favicons (like the globe sign) can make a website look unfinished or poorly maintained. Custom favicons, on the other hand, can instantly make a site look more reliable and professional.
Now you know why favicons are an essential addition to elevate any website. WordPress makes connecting them to your site easy, too — more on that in the upcoming sections.
Do favicons impact your website's SEO efforts?
Not directly, no, but favicons still influence SEO. How? Google crawls your website and looks for the favicon file to identify your website. Your website visitors do the same thing — they spot familiar favicons in search results, leading to a better click-through rate.
Don't take my word for it: a blogger shared on Reddit that they witnessed a drop in organic traffic because Google wasn't showing their favicon in SERPs.
How to create a favicon for your website in three steps
There's a lot of conflicting and confusing advice about creating a favicon — should you use SVG or PNG? Is 16x16 the right size or 48x48? Here's a step-by-step guide that cuts through the noise and clears up what you really need to know:
Step 1: Design your favicon
Ideally, your favicon is a variant of your logo. This ensures your brand identity remains consistent and memorable. If your website doesn't have a logo, you can either hire a graphic designer to create one for you or DIY it using graphic design tools like Canva or Photoshop.
Once you have a logo, you can export it in the right size (512x512) directly from Canva or Photoshop. Or you can also upload your logo to a favicon generator tool to convert it into a favicon. Here's a list of five useful favicon generators:
These tools provide your favicon icons in both PNG and ICO formats. For example, in RealFaviconGenerator, you can upload your image, see how your favicon appears across different devices, and download your favicon package. You can also customize how your favicon appears on browsers with dark themes enabled.
Tip: Use a transparent background for your favicons so they blend seamlessly with browser backgrounds. If your logo isn't already transparent, a tool like Remove.bg can help you make the background disappear in seconds.
Step 2: Optimize your favicon size and format
If you have built your website using WordPress, you need to ensure that you meet the site icon image guidelines.
- Aspect ratio: Your favicon should be a square image.
- Dimensions: For WordPress websites, your favicon size needs to be at least 512x512 pixels.
- File type: WordPress supports any valid favicon format — the most common file types are PNG and SVG.
Should you use PNG or SVG? It depends.
- SVG stands for "Scalable Vector Graphics," meaning your favicon in SVG format will be made of paths and shapes, not pixels. This feature makes it infinitely scalable, without losing your favicon's crisp quality. The issue is that SVG isn't fully supported for favicons by all browsers.
- On the other hand, PNG is not only widely supported by all browsers and devices, it's also easier to use since most of us have already used this format.
If you want to understand which browsers support which favicon formats, head over to Can I Use to resolve all your doubts instantly. You can see which browser versions are compatible with PNG and SVG formats.
Note: Depending on a user's browser and device, your favicon will appear in different sizes. For example, favicons usually appear in 96x96 dimensions in a desktop shortcut. The shortest dimension is 16x16. Choose a favicon that remains in good shape once it's shrunk to those dimensions. It's also a good idea to stay up-to-date with Google's guidelines to ensure your favicon displays optimally in SERPs and browser tabs.
Step 3: Add your favicon file to your website
If you are using WordPress, there are two easy ways to add your favicon to your website:
- Using the WordPress general settings.
- Using the WordPress customizer.
Let's cover each method.
Using the WordPress general settings
This is the fastest and most straightforward method to add a favicon to your WordPress website. All you have to do is ensure you have a square 512x512 pixels favicon — WordPress will take care of the rest.
- In your site's dashboard, navigate to Settings → General.
- Click on the "Choose a Site Icon" button.
- Upload a new file or choose one from your existing media library.
- Click the "Set as Site Icon" button after choosing your image. If your favicon needs cropping, WordPress will ask you to adjust the dimensions of the image.
You can see a preview of your favicon after saving changes:
Using the WordPress customizer
Similar to the previous method, using the WordPress customizer is a pretty simple way to upload your favicon.
- In your site's dashboard, navigate to Appearance → Customize.
- Click on "Site Identity."
- At the bottom, you'll find the "Select Site Icon" button to upload your favicon.
- You can also crop your image if you need to after uploading.
Another way to add a favicon to any site (regardless of whether it's on WordPress or not) is to edit your theme code files. Follow these steps:
- Upload your favicon file to your website builder's media manager or library.
- Copy the URL of the uploaded file.
- Insert the following piece of code inside the <head> of your HTML:
<head> … <link rel="icon" href="https://yoursite.com/favicon.png" type="image/x-icon"> <link rel="shortcut icon" href="https://yoursite.com/favicon.png" type="image/x-icon"> … </head>
However, I wouldn't recommend using this method because most website builders have easier ways to upload the favicon, and messing with the code can disturb your website's functionality and appearance if you're not careful.
Three best practices for designing a great favicon for your website
Here are a few best practices you should follow to ensure your favicon looks professional and loads reliably:
1. Keep it simple
Don't use overly detailed logos that contain too much text or elements. If you have a big company name, for example, don't spell out the whole name. Keep it concise and limit it to a letter or an acronym. Why? A favicon is a small icon — you want to make sure it's clearly visible across all browsers and devices. Use a bold symbol that's crisp and easily recognizable.
2. Color-check your favicon
With the new variety of browsers and increasing popularity of dark mode, ensure your favicon looks great against all types of backgrounds. Test it on white, gray, and black backgrounds. Keeping your favicon transparent by removing the background also helps here.
3. Test your favicon after uploading
Check how your favicon appears on various browsers, mobile devices, iPads, bookmarks, and pinned tabs. If it is warped in any device or browser, troubleshoot and reset the dimension to the right measure.
Small but mighty
A favicon is a small detail that can make a big impact on the brand identity and user experience of your website. Hopefully, this article helped you understand how to create them quickly and give your website the polish it deserves.
Favicons aren't the only thing that elevate your website experience, though. A fast speed and a clean user interface also go a long way. Get started with WordPress.com (or migrate your existing website) for excellent website performance, maintenance, managed hosting, security, and much more.
0 Response to "How to Make a Favicon for Your Website (And Why You Should)"