Hit enter to search or ESC to close
People use WordPress to build websites for individuals and businesses. One way to help repeat visitors know that the site is yours is with a custom WordPress favicon.
A favicon is an icon that appears in a browser tab or window, and typically in a list of bookmarks or favorites associated with a particular site. If a browser does not find a custom favicon, it shows a default favicon instead.
The WordPress favicon is often a smaller version of a site’s logo. You may be able to shrink the logo to the favicon size, but it is usually necessary to create one that is related to the original logo.
Businesses should have a favicon to improve familiarity and encourage trust from potential customers. Branding allows visitors to recognize a site quickly. It adds consistency and validity.
Individuals may also use favicons for similar reasons, although the target is repeat visitors rather than purchases in most situations.
The favicon size in WordPress is 16×16 pixels. However, some other browsers and applications use larger sizes, ranging from 16 to 195 pixels square.
If you stick with the 16×16 size, then applications that use the larger size will usually make it bigger, which often leads to pixelation. Because of this, WordPress’s Site Identity requires 512×512 instead.
Some common alternative sizes are:
If a favicon is saved in the wrong format it will not display properly. The most common format is Windows ICO, which was the original requirement. It can hold a variety of sizes and resolutions for use on multiple platforms. This is the only format used by Internet Explorer.
PNG is the most user-friendly option because almost any graphics program will save in this format, and it offers a smaller file size and allows the favicon to be transparent if desired.
Opera supports using SVG for favicons, although it is the only browser that does.
GIF, JPG, and APNG are alternatives, but less useful because they have poor resolution, and can be distracting. Distraction is especially likely with animated GIF files and APNG files, which are also animated.
It is a good idea to design a WordPress favicon to add identity to your site. You can design one on a graphics program on your computer or use a free website online, such as favicon-generator.org or favicon.cc.
Consider the following factors to improve the value of your favicon.
The most important reason to have a favicon is to be recognized. Create a design that represents the product or service you offer or a design that matches your brand logo. An image that is directly related to your brand, such as a smaller version of a logo or the main letter or letter of a company name, is ideal.
Because of its small size, simple is best. Basic shapes or letters are a good choice for visibility. It is most effective when visitors recognize it at a glance. The more detail you try to include, the more difficult it will be for a visitor to recognize what the icon is. Accuracy, boldness and clarity are essential.
High contrast will improve readability and enhance recognition. Consider the favicon of sites like NBC and Netflix. Their sites are immediately clear. Sites that have a clear color identity should include that color in their WordPress favicon. Again, keep it simple. Too many colors can cause a blurry image.
Add a WordPress favicon using one of the following methods:
Hover over Appearance and select Customize, then select the Site Identity tab. The site icon is at the bottom of the left panel and allows you to choose any 512 pixel or larger square image, which it resizes as needed.
If the file you choose is not square, WordPress provides an interface for cropping the image to a square.
Edit the header.php file in your current theme and add this code:
<link rel=”icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” >
<link rel=”shortcut icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” />
Replace “yourdomain” with the domain name of your site, and be sure to upload the favicon to the webspace.
If you want to prevent WordPress from undoing changes to updates, create a child theme before editing and editing the child theme file instead of the main theme file.
Use one of the plugins we listed below.
Changing the WordPress favicon is similar to adding one. The same methods work for uploading a new favicon. It is also possible to upload a new one and overwrite the old one, which will replace it if the visitor clears their cache or performs a hard refresh.
Let the WP amateurs handle your upgrades and changes if you find the process confusing. The team is available 24/7 to provide service and support.
Simplify the process of adding or changing WordPress favicons by installing a plugin.
There are many possible causes of favicon errors, ranging from user error to browser specifications.
When your website is cached, changes to elements such as favicons take time to appear. You can speed up the process by doing a hard refresh (Ctrl + F5) or clearing the browser cache. If this doesn’t solve the problem, check the favicon file type. If it is not an .ico file, it may be incompatible with the browser.
If your code has a typographical error, the favicon is likely to be flawed instead of displayed. Simple errors such as missing quotes, slashes, or brackets cause errors that spoil the image and possibly the entire web page. Check the code carefully.
The file context is also very specific. If the link (the part within the href quotes) points to an image that does not exist, the favicon will not be displayed. Be careful to upload the favicon file and copy the exact link. The best way to do this is to use a media library inside WordPress.
If you are checking the display on a local computer instead of loading the Internet page, WordPress will not show the favicon because most browsers do not look locally for the favicon. Check the page on the Internet to make sure it is showing to visitors.
The default file type for a favicon image is .ico (“image/ico”). When another file type is used, such as PNG or SVG, that must be adjusted in the code when using the editing theme method. The file type must match the file type of the image. For example, a PNG file should say “image/png” instead of “image/ico”.
For more information on all kinds of WordPress-related topics, subscribe to the WPBuffs newsletter.
The easiest way to add a WordPress favicon is to use the Site Identity section of Customize. The second easiest is to use a plugin. You can also add favicons manually by editing the theme.
The icon itself appears in the tab or window title. It also appears in bookmark lists. The setting is found in the Customize section under Appearance. From there, click Site Identity and click the site icon at the bottom of the left pane where you upload your favicon.
16×16 pixels is the default size, but if you use the site detection method, the image should be 512×512 pixels instead. The software will shrink the image to the appropriate size for each browser or device.
You change the favicon the same way you add one. Either go to Appearance → Customize → Site Identity, change it in your plugin, or upload a new favicon.ico file, overwriting the previous one.
About the author