A favicon, short for “favorite icon,” is a 16×16 pixel icon (standard favicon size) that’s used to represent a website or web page in web browsers. Even if you aren’t quite sure exactly what it is, you likely see it every time you browse the internet!
You’ll most commonly find favicons on tabs at the top of the web browser. In addition to this, favicons also appear in the bookmarks bar, browser history, search bar, and mobile search results in iOS and Android.
Favicons are pretty similar to app icons. And, as the line between desktop, browsers, and iOS and Android mobile apps continues to narrow, favicons have become more and more important for your brand’s identity.
With this in mind, in this article, we’ll explain when you should use a favicon and how you can create one. We’ll also share some actionable tips on how you can get the most out of your new favicon, and show you how to upload it to your WordPress website.
Why use a Favicon
A favicon is important for your brand’s identity. Whether you run a blog or online store, a favicon can help people recognize your brand visually.
Put simply, a favicon is an easily identifiable image for your website’s tab. When users have lots of browser tabs open, the favicon provides an at-a-glance reminder that your site is there waiting for them. This makes it easier for visitors to come back to your website, resulting in more hits.
In this way, a favicon can help you deliver a better user experience to visitors, even when they’re not on your website.
Since your website’s favicon can make it easy for people to quickly identify your website in a sea of tabs, it’s essentially part of the coherent branding package of your website as a whole. It plays a part in making sure your website stands out rather than being generic.
In contrast, having the default favicon appear in browser tabs, search bars, and bookmarks looks sloppy and unprofessional. This can damage your brand’s visual identity.
How to create a favicon
The first thing you need to determine is who will create the favicon design for your website. This depends on your graphic design confidence or the graphic design abilities of people on your team. So, the first step is to figure out whether you want to hire a designer or do it yourself using software like Photoshop, GIMP, or any other image editor of your choice.
You can also use a favicon generator to create your favicon. Favicon generators let you upload your image and export it in the correct sizes and file types. There are several online tools available to generate a free favicon for you. Just run a quick online search to gather a nice list of generators to choose from.
You’ll next need to determine the size of the favicon you need. Traditionally, a favicon would just be a 16×16 pixel icon with the ICO file type. However, a 32×32 pixel transparent PNG is more standard now. This is because favicons are getting bigger with the increasing appification of the internet.
iOS allows you to add a site to your home screen, making it look like an app. This is called an Apple Touch icon. For this, your favicon will need an icon that’s up to 180×180 pixels. Similarly, Windows allows you to add web pages as desktop or taskbar shortcut icons which could be up to 310×150 pixels.
You should always check to see where your favicon might be displayed and optimize accordingly. If most of your site’s visitors use mobile devices, for example, you’ll want to make sure you have the right favicon size created. If most of your visitors use iOS devices like iPhones or iPads, you’ll want to create Apple Touch icons. It’s also important that your favicon is a transparent PNG. This way, it won’t look blocky in browser tabs.
With all these different sizes listed, which should you choose when you create your favicon? Actually, none of them! The recommended favicon size of 512×512 pixels is the best choice. It will ensure that all the other sizes are handled once you upload your favicon.
Tips for creating a great Favicon
Now, if you’re wondering, “how can I create a memorable favicon?” – don’t worry!
Here are some actionable tips you can follow:
- Keep it simple. Remember, you don’t have a lot of space to play around with!
- Keep it recognizable. Try and encapsulate your brand in the small space you have to work with. If you’re used to using a logo that isn’t a tiny square, try and create something that evokes that logo rather than unnecessarily trying to squeeze the whole original in.
- Use as little text or lettering as possible. Remember that the favicon is a small image. Even if your usual logo has your company name spelled out, try to keep it concise in your favicon.
- Think about color. Different web browsers (like Google Chrome, Android Chrome, Safari, and Internet Explorer) use different color palettes. And, with the increasing popularity of night mode, you’ll want to make sure your favicon looks great regardless of the user’s browser. All you have to do is ensure that the favicon looks good and stands out at least on white, gray, and black background colors.
The WordPress.com favicon, for example, uses just a simple, recognizable W letter. This makes the user think of WordPress but doesn’t take up as much space as the whole word. It’s perfect for a favicon!
Once you’ve created the favicon, export it as favicon.png or favicon.ico.
Uploading your Favicon to WordPress.com
Now you’ve created and exported your favicon image, all that’s left to do is upload it to your WordPress.com website. This is possible without having to mess around with HTML or CSS code or href tags. Here’s what you need to do:
Log into your WordPress.com account and go to My Site → Settings. In the General tab, click on the Change button.
You’ll be redirected to the WordPress Customizer. Click on the Select site icon button to continue. Next, you’ll see your Media Library on the screen. From here, you can either select an existing image or upload a new one. Remember that the recommended minimum favicon size is 512×512 pixels.
Ideally, it should also be a transparent PNG. The PNG file format typically has a smaller size, as well. That said, some designers prefer to use the ICO file format i.e., favicon.ico.
Once you’ve selected an image to use as your favicon, click the Continue button.
Because a Site Icon (favicon) should be square, you’ll be prompted to optionally crop the image to your liking. Use the corner handles to resize the bounding box or reposition the box by dragging it.
When you’re done cropping, click Done to continue.
If you edited the image, it will first be uploaded before saving your new settings. You should see a spinner indicating that your new icon is being uploaded. You’ll know that the icon is ready when you see a notice confirming that your settings have been successfully saved.
To remove the icon, you can simply go to My Site → Settings, and in the General tab, click on the Remove button.
A favicon is an essential part of your brand identity, which is why it’s important that you get it right. It appears in the browser tab, bookmarks bar, browser history, URL address bar, and search bar, and in mobile search results. Once you’ve created your transparent, PNG, or ICO format favicon, you can upload it to your WordPress site in a few easy steps without having to use any HTML or CSS code or href tags.
To recap, here are some tips to keep in mind when creating your favicon:
- Keep it simple
- Keep it recognizable
- Use as little text or lettering as possible
- Think about color
Ready to set up your website and add a favicon to it? Sign up for WordPress.com today!
You might also like: 5 Tools to Help You Find Free Icons for Your Website