Setting a Favicon for your WordPress website
Setting a favicon for your website ensures your brand shows up even in the smallest details. A favicon is a website icon that represents your website. It shows up next to your website title in a browser tab, or on a home screen on a phone or table when a user adds your website to his home screen for quick access.
For instance, everyone recognizes Facebook’s favicon:
If you haven’t set a favicon for your WordPress website, you will see the default WordPress favicon when you visit your website. We love WordPress, too, but it’s better for your site to advertise itself rather than the program used to build it.
Read on to learn how to create a recognizable favicon for your website and tell WordPress to use it.
Choose an image to represent your website
The first thing to do when creating your website icon is to choose the image to use. We recommend using your logo. If your entire logo isn’t easily recognizable when displayed at a small size, then choose one identifiable part of it that stands out as your favicon.
Create your website icon
If you need to adjust your image or select only part of it, try using Photoshop or Photoscape X on your computer, or PicResize online. Choose an image that can be displayed in a square shape. When creating your icon, you will want to make an icon that will work for both mobile devices as a home screen icon and for browser tabs.
- Making your image 512 x 512 pixels square
- Including a background color – not a transparent background
- Including some space around the image.
Using this size and a background color will ensure your image displays well on all devices.
Tell your WordPress website to use your website’s icon
Once you have created your image, in your WordPress admin area, go to Appearance -> Customize. Then click on “Site Identity.”
Click on “Select Icon,” and upload your image to your media library, and select it.
You’ll see a preview of your icon. If it looks right, click on Publish.
You’re all set!
Other methods for creating a favicon
The major advantage of this built-in WordPress method is that it’s easy to use. The disadvantage is that your image may not look as sharp on a high resolution / retina display, and you can’t include separate versions of your image to use based on the device chosen.
If you’d rather include one version of your icon for the site’s favicon (used in the browser tab) and one for the Apple touch icon (used for mobile devices’ home screens) to ensure your images are as sharp as possible, watch for our other tutorials on:
If you’d rather have us add your favicon so your site’s brand is recognizable in every detail, get in touch.