A favicon is the tiny icon that appears in the tab next to your domain name. It used to appear in the address bar next to your domain name, but it has been removed from that location for security reasons. The one exception is the Microsoft Internet Explorer which still shows the favicon next to the address in the address bar. All the other browsers have removed the favicon from the address bar in order to prevent confusion with the state of website security.
How to Create a Favicon
There are several ways to create favicons, but in general, you would need to have a graphics program that can create a JPEG, GIF or PNG file that is at least 512 wide pixels by 512 pixels tall. The main concern is to keep the file small with minimal colors and resolution in order to allow quick loading speeds. WordPress version 4.3 allows to create a favicon (called a site icon by WordPress) by simply loading a graphic in WordPress and then cropping out just the part of the graphic. Here are some general guidelines for making a favicon:
- WordPress asks that the file be at least 512 pixels wide by 512 pixels tall
- Keep the image to 72 DPI (the resolution used for web images; DPI= Dots Per Inch)
- Keep the numbers of the colors to a minimum
- Keep the file size small. This is normally done by limiting the number of colors and keeping the resolution to 72 dpi
There are many free favicon creation programs on the web. These programs provide a one-stop service for creating the graphic so that you can use it for your website. However, please be careful when using any application on the web to avoid possible malware issues.
How to Add a Site Icon in WordPress 4.3
- Login to the WordPress Administrator
- Click on Appearance, then click on Customize
Click on Site Identity
- Click on Site File under Site Icon
Click on Select file after you have clicked on the file that you’re going to use for the Site Icon. Remember that the image should be at least 512 pixels wide by 512 pixels tall
-
Click on the Select button in the bottom right corner of the Select File dialog screen. You will then the see the image under the Site Icon area of Site Identity. Verify that the Site Icon appears the way you want it to appear.
- Click on Save and Publish at the top in order to save your changes.
How to Crop a Selection to Create a Site Icon in WordPress 4.3
- Login to the WordPress Administrator
- Click on Appearance, then click on Customize
-
Click on Site Identity
- Click on Select File in order to select the graphic where you’re going to crop the Site Icon.
-
Click on Select file. If the file that you’ve selected is fairly large WordPress will automatically detect this and open the Crop Image screen. You will be able to slide and size the crop area for your Favicon. The screen at right also lets you see exactly what the favicon will look like.
- After you have selected the area that you’re going to use for the Site Icon (favicon), then click on Crop Image
-
Once you’ve selected your Site Icon, you will see a version of it in the Site Identity area. Click on Save and Publish in order to save your changes
That completes the tutorial on using the Site Icon (favicon) feature within WordPress 4.3. The graphic above shows you how the favicon will appear in most browsers.
