Despite its small size, Favicon Optimization helps your site in terms of visual appeal and SEO, as well as improving the site’s speed for visitor’s usage. Favicon, which consists of two, words Fav or favorite and icon. This small icon appears in the browser bar of any user who enters your site address, making it easy for the user to distinguish your page from dozens of other pages.
If you are justified in using this technique to improve your site, it is better to keep reading to master all aspects of this topic.
How To Create A Favicon Icon For My Website?
My suggestion and the best way I know to create a favicon is to use the RealFaviconGenerator. Using the services of this link is free and since its capabilities; you can easily generate your desired favicon.
After creating the favicon, you must upload it. You can use the following methods depending on the type of site:
- WordPress websites: you can use the RealFaviconGenerato plugin.
- Joomla site CMS: You must place the favicon in /joomla/templates/<your template> path.
What Resolution Should My Favicon Be?
A favicon should generally be 16 × 16 or 32 × 32 pixels. It is also recommended that its size be less than 1KB. However, Most of the time, the favicon that we end up designing does not have the right resolution. To solve this issue, you can enter the following codes in .htaccess:
- Apache HTTPD:
AddOutputFilterByType DEFLATE image/x-icon
- NGINX:
$ gzip -k9 favicon.ico
- SVG:
<head>
<link rel=”icon” href=”/favicon-32×32.png” type=”image/png” sizes=”32×32″>
<link rel=”icon” href=”/favicon-16×16.png” type=”image/png” sizes=”16×16″>
<link rel=”icon” href=”/favicon.svg” type=”image/svg+xml” sizes=”any”>
</head>
Is Favicon .ico Still Needed?
favicon.ico file was used before alone. Now most browsers are more efficient at using PNG icons. Therefore, the use of PNG icon is more common.
Why Favicon Is Loading Slowly?
Sometimes the Favicon Loading Slow for various reasons. You can do the following to Favicon Optimization:
- Change the favicon to data-URI
- Insert this code in function.php
function add_favicon() {
echo ‘<link rel=”shortcut icon” type=”image/x-icon” href=”data:image/x-icon;base64,AAABAAEAICAAAAAAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAgBAAAAAAAAAAAAAAAAAAAAA…….=” />’;
}
add_action(‘wp_head’, ‘add_favicon’);
Why Wordpress Favicon Not Loading? And How To Fix It?
There are several reasons why Favicon is not loading in the browser, and one of these is the name chosen for Favicon. The length of this name can be the reason why the favicon does not appear as well as the lack of access to the cache. There are several different solutions to this issue:
- Renaming the Image File: The name of the favicon should not only be appropriate but should not have a structure similar to untitled-image.jpg”, “IMG_1245.jpg.
- Clearing the Web Browser Data: you need to go through this path: Chrome ® Settings ® Privacy and Security ® Clear browsing data. Then check the “cached images and files” and click the “Clear data” option.
Or, this path: Firefox ® Menu ® Options ® Privacy & Security ® Cookies and Site Data ® Clear Data.
Or this path: Safari ® Preferences ® Advanced ® Show Develop ® Develop ® Empty Cache.
- Resizing the Image: You need to choose the right size for your favicone to fit display properties.
Critical Favicon Optimization Points
Favicon helps you identify your site through multiple tabs opened or bookmarked pages. However, it is better to pay attention to the following points before creating a favicon:
- Make your favicon is cacheable.
- Set up cache for PNG and SVG favicons for years.
- If you want to create a scalable favicon, it is better to use the SVG format.
- The best design for a favicon is a simple pattern. the small size of this icon makes any complex design indistinguishable and unnecessary. So the simpler the design with gentle colors, the more you have doubled its beauty and attractiveness.
