When you launch your website, it’s really easy to miss a lot of little details, including a favicon. Does your website display your logo in browser tabs or shortcuts on mobile phones? Let’s get that fixed now.
What is a Favicon?
When you are browsing websites, have you noticed a small logo appearing in the browser tab? This little image is known as a favicon, and is very helpful when the visitor has 20 different tabs open and needs to find which one is your site.
The term favicon is short for “favorites icon”. Favicons started just for tabs on websites, but now also include:
- Shortcuts saved to iOS dashboards
- Windows 8 (phone and computer) tiles
- Android
- Retina display computers
With so many places now using a tiny image to set your website apart, it’s important that you make a favicon.
How to Make a Favicon
You will need a square representation of your logo at least 270 pixels wide and tall saved as a .png or .gif file format.
Manually Creating a Favicon
Follow the steps from WordPress.org to create a .ico file and upload it to your website.
Some themes include a favicon location to upload as well and allow you to upload it to the theme settings.
Using a Plugin to Configure Your Favicon
To create a favicon and configure your WordPress website to use it, I recommend the plugin Favicon by RealFaviconGenerator. This is the only plugin that I found that covers so many different favicon formats.
Once installed, a Favicon menu option appears under Appearance. Upload your image, and generate.
You will be redirected to configure settings for your favicon on their website:
Configure the background colors that you would prefer for iOS and Windows tiles. I also select the high resolution favicon option not pictured to prepare for retina devices.
Congrats! Your favicon is now created and implemented. Double-check how it will display on many devices and sizes at Favicon Checker.
P.S. – if you host with HostMonster or use a Genesis theme, please go fix this now. I’d rather see a blank icon placeholder than more websites with these favicons.
