In WordPress 4.3, a new feature called Site Icon lets you build your personal brand with ease. In this tutorial, I’ll explain how and why you can leverage WordPress’ site identity features to brand your unique online presence.
Site Identity in the Customizer
The Customizer lets you manage your site with a live preview of the changes before they’re published. The Site Identity section in the options panel on the left contains three important options: Site Title, Tagline, and Site Icon. Some themes also include a Logo option, available in WordPress 4.5 or newer.
Site Titles and Taglines
Site title displayed in Google Chrome.
The site title is the single most important aspect of your site’s identity. Typically, it should reflect your domain name and the overall theme of your site. For example, here at http://annenbergdl.org/ our site title is Annenberg Digital Lounge. A good site title is brief but descriptive. You’ll notice that most themes display your site title on your site itself. But the site title is also used in web browsers for the tab title, bookmarks, and in search results on Google.
Google search result for Annenberg DL.
The tagline feature is often overlooked, but just as important. Some themes may not show the tagline, but most will and it will also show up in search results and browser tabs. Searching google for the default tagline – just another WordPress site – yields over 60 million results. Your site isn’t just another WordPress site, so don’t say it is! Come up with a short, fun tagline that gives a bit more information about your site. The tagline is almost always displayed alongside the site title, so use it to give context or explain your site title. On this site our tagline describes the Digital Lounge in a bit more detail, encouraging potential visitors to come to our site to learn more: “Creative Makerspace at USC Annenberg.” Some themes offer a checkbox to show or hide the site title and tagline; even if you hide them, make sure they’re customized since they will show up elsewhere.
Creating a Site Icon
Site icon for Annenberg Digital Lounge.
WordPress 4.3 includes an exciting new feature that lets you create an icon to represent your site across different devices. This “site icon” is used in browser tabs, for iOS and Android touch icons, and even on Windows tiles when your site is pinned.
Site icons must be square, and will be displayed at a wide range of sizes from as small as 16×16 pixels in browser tabs to as large as 512×512 pixels. You can create a logo, or even use part of a picture. Once you upload and select an image with the WordPress media library, you have the option to crop the image as needed:
For best results, we recommend designing a simple square logo or other graphic specifically for your site icon, rather than cropping another image. However, it’s important to have something here to represent your site, so cropping an image directly in WordPress is a good way to customize your brand on the fly. If you’ve ever used plugins or other methods to add a custom favicon, apple icon, or windows tile, those are no longer needed once you set up your site icon.
Displaying Your Site Icon on Your Site
Preview of the login site icon plugin, which displays your site icon on the login screen.
Now that your site icon is showing off your personal brand in web browsers and on mobile devices, you may want to display it on your actual site as well. It’s important to keep in mind that the site icon is intended to be used in web browsers and devices first, so it should be optimized for those uses. However, we’ve created a WordPress plugin that displays your site icon as a widget. To use it, you’ll go to Plugins -> Add New, search for “Site Icon Widget”, install the plugin, and add it to your widget area via the widgets panel in the Customizer.
We’ve also created a handy WordPress plugin that allows you to display your site icon on the login screen. Head to Plugins -> Add New, search for and install “Login Site Icon” and you’ll be good to go. This makes it easier to tell which WordPress site you’re logging in to.
As of WordPress 4.5, an additional feature called custom logo allows themes to implement logos. Logos differ from icons because they don’t have to be square and are usually displayed directly on the site. Only certain themes support logos, but if yours does, you can set up your custom logo in the site identity section of the customizer as well.
