Have you heard of the term “favicon“ and wondered what people are referring to? Don’t fret, by the end of the article, we’ll tell you everything you need to know about favicons. It should be pretty obvious that it has something to do with icons since it’s in the name. As you’ll see below, that’s how it started. However, over time, it evolved and included more file types, particularly images. Also, with the introduction of smartphones, the app icons became important, and favicons found their application there. Did that pique your interest? Let’s get into what is WordPress favicon and how to create it, then.
What’s WordPress favicon?
Favicon is a little icon or a collection of icons displayed next to the website name in browser tabs. Additionally, it can be seen next to website names in the browser bookmarks and Google search results. As technology progressed, it found its use as a default shortcut icon to websites on the home screen for iOS and Android, as well as operating systems such as Windows 8, 8.1, and 10.
Can I use another file type for WordPress favicon?
Once again, favicons initially used an ICO file extension exclusively. As time went on, image formats such as PNG, JPEG, GIF, Animated GIF, APNG, and SVG, were introduced to the compatibility list. Some of them became default formats. Read our tips below for a practical application.
The benefits of using a favicon
The first benefit of utilizing a favicon has to do with brand recognition and familiarity. When someone visiting your website sees it in the browser tab, they don’t have to read the website name to recognize it. This is especially important if they have tens of tabs open, and website names aren’t visible. The purpose is further improved if the favicon matches your website aesthetic and color palette. The same applies to your apps for Android, iOS, Windows Store, etc. Finally, if the favicon looks professionally done, it makes you look competent and credible, which increases users’ trust.
How to make a favicon in WordPress
There are three common ways to create a WordPress icon:
1. Use image editing software
The most common one is Adobe Photoshop. However, there are plenty of free photo editing software such as GIMP, Canva, and Fotor, and paid photo editing software such as Adobe Lightroom/Illustrator, Corel PaintShop Pro, and CyberLink PhotoDirector.
2. Use cloud-based image editing software
If you are short on cash or can’t install software, there are online alternatives. It won’t have as many options as the computer or mobile software but can serve as a temporary solution.
3. Utilize an online logo creator and favicon generator
There are a plethora of websites that help you make a logo for your brand or product for free. They require no technical knowledge, and often no graphical knowledge or creativity since you can customize templates. Depending on the website you use, you might or might not be able to save the logo in a format you want. If you can’t, you’ll have to use one of many favicon generator websites out there such as RealFaviconGenerator or Favicon-Generator.
Tips for making a favicon
The only constant rule is that a favicon must be a square e.g. height and width must be identical. Other rules change over time, as the resolution of monitors and smart devices increases. Keep in mind, you can always change a favicon in WordPress. However, you shouldn’t change the URL too often or at all.
What size should my favicon be?
Here are the size recommendations for a WordPress favicon:
- In 2021, the absolute minimum resolution is 48 x 48 pixels, but that’s a reduced size displayed in browser tabs and bookmarks. If a user pins your website to their home screen in Android and iOS, things will be incomprehensible.
- For optimal results, your favicon should have a resolution of 512 x 512 pixels. Up until recently, the optimal size was 256 x 256 pixels, but the increase of affordable monitors and smart TV using 4K/5K resolution displays upped the standard.
- Tip: WordPress allows you to crop your favicon. For that reason, you can upload a rectangular favicon and cut the sides off.
How to choose the color, letters, and design?
That’s up to you. However, here are things to keep in mind while making a favicon:
- Use a color or color palette that exists on your website homepage.
- Preferably, use a font that exists in your website logo or somewhere on your homepage.
- Don’t make the favicon white or black. While is the default browser theme and many people use Dark Mode themes in software and browsers.
- Choose one or a maximum of two letters. Give preference to the abbreviation of your website or product name.
- Some platforms support animated favicons. They’re a great way to draw visitors’ attention and keep them coming.
- Be aware that the corners might be cut off on some operating systems. An example of this is Apple iOS which, by default, rounds the corners of all of their home page icons.
- Use online generators for favicons to preview changes across browsers and software without installing any of them. Many also offer analysis and suggestions for improvements.