Favicon is a short form of favorite icon. Microsoft first introduced it on using Internet Explorer 5 during March 1999. Later, World Wide Web Consortium (W3C) standardized the use of favicon in HTML 4.01 recommendations. Favicon is also referred with many other names like site icon, URL icon, bookmarks icon, tab icon or shortcut icon. Favicon became popular since some time search engines show them in search result pages. If you are using WordPress, it is easy to add favicon to your website and we will explain the process in this article.
Related: How to add favicon in free Weebly site?
Why You Should Use Favicon?
Depending upon the browser, you can see favicon in different place. In general, Chrome and many other browsers show the icon in the tab along with page title.
On Mac, you can enable or disable favicon showing in Safari browser. Similarly, you can see the favicon when switching pages in mobile browsers. Favicons are used to increase the brand visibility of a website as it is shown on the browsers. Different browsers show favicon in different places:
- Show on the browser tab
- Displayed as bookmark icons and in reading list
- Displayed in the address bar on some browsers
- Pinned icon when you pin the tab
- App icon when adding shortcut from browser to desktop or home screen on mobile
In addition to the usages in browser, there are few other visibility factors. Search engines like Yandex shows the favicon in search results as shown below:
Google some time shows the icon and some time not. However, favicon also may be used as a desktop or apple touch icon. This will act as an app icon on smartphones and tablets when you add the shortcut of the webpage.
In summary, companies use favicon same as their brand logo so that users can easily remember.
General Usage of Favicon
The favicon is generally an image icon file with .ico extension. You need to upload the image in the root directory of your site. Then the favicon image is linked to the site using the following meta tag in the header section:
<link rel="shortcut icon" href="http://example.com/favicon.ico" />The size of the favicon used is of 16 x 16 pixel.
How to Add Favicon in WordPress Site?
It was an hassle to add favicon till WordPress version 4.2. In order to make things simple, adding favicon was made as a core functionality from version 4.3. The “Site Icon” module from Jetpack plugin was added into WordPress customizer as a default function. And you just need an image without any other need of meta tag or plugin.
Image Requirements
WordPress site icon needs two simple requirements:
- Image should a square in size.
- Minimum size should be 512 x 512 pixels.
You don’t need to use .ico image, simply prepare a .png, .jpg or .gif square image of 512px size to use as your favicon in WordPress site. The same icon will be used as an app icon on all mobile devices. Prepare an image with smaller size with clear visibility using software like Photoshop or Snagit. Remember the favicon image will be resized to 16 x 16 px on the browser tab. Hence, prepare the image with dark color to increase the visibility. You can also try our free favicon generator tools to generate the icon image file for your site.
Uploading Image to Site
Login to your admin panel and navigate to “Appearance > Customizer” menu. Click on the “Site Identity” option as shown in the below picture.
Click on the “Select Image” and upload your favicon image.
If you upload larger than 512px image size then WordPress will automatically open the crop image screen. Move the crop area to view instant preview of your favicon on browser and as an app icon on the left panel.
Once the image is uploaded, click on the “Publish” button.
That’s it!!! You are done. No need of meta tag insertion or plugin. Check your site on the browser to see the favicon is effective instantly. You may need to clear the browser history to delete the cached pages and load your page again. Any time you can remove or change the favicon on your site.
Frequent Problems with Favicon
Though it is easy to upload favicon in WordPress, users face some frequent problems.
- Google / other search engine is not showing the favicon in search results – this happens generally due to the size of your icon. Though WordPress needs 512 pixel size, the recommended size of favicon are 16×16, 32×32 or 48×48 pixels. The larger image size may create problems as it is not a recommended size. However, it should work for WordPress sites as you can see it in the browser for this website. If you have problems, remove the site icon in customizer and re-upload it again. Also clear the cache if you are using caching plugin and server side caching if available. Wait for few days so that Google can crawl the pages again and properly show the icon. As long as you see the icon in browser, you should not worry about whether Google is showing in the search result or not.
- Unclear icon in the browser – this happens when you try to resize larger image to smaller size or vice versa. We recommend to create exactly the needed size and upload the file.
- Favicon not visible in browser – in this case, make sure you have uploaded the image properly and check you can open the image file in browser successfully.
Leave a Reply
Your email is safe with us.