What is favicon?
It’s quite well known nowadays – but to simply put an icon that appears on your browser tab is called as favicon. Some devices use it to set as a home screen icon or an app icon.
Why favicon is needed?
Although it is not mandatory to use favicon, it is a good practice because:
- That becomes a brand identity
- When someone has many tabs open, it helps to locate the tab
- Google may show the favicon in search results
Does one size fit all? What are the recommended favicon sizes?
This is where it gets tricky. Because different devices have different standards. WordPress does provide simple way to set favicon or siteicon from customiser. However, desktop browsers, Android, iOS & Windows 8 have different standards.
- Google recommends favicon to be 16×16 pixels or in the size multiple of 16px
- For iOS devices where users can pin your website on their home screen, the recommended favicon size is 57×57 pixels
- Add to Homescreen is a also a feature of Android Chrome where the recommended favicon size is 96×96 pixels
- Windows metro on the other hand needs the icons declared in a dedicated “browserconfig.xml” file
- MacOS Safari implements pinned tabs and takes advantage of the MacBook Touch Bar. This feature relies on an SVG icon. This icon must be monochrome and Safari does the rest.
How do you ensure all devices gets the favicon for your site then?
Well, “Favicon by RealFaviconGenerator” plugin takes care of everything. You only need to provide a master image in square size which is at least 70×70 pixels (recommended 260×260 pixels). The plugin then generates all the sizes and serves the different devices when your site is visited from different device/platform.
Here is WPCoworker favicon generated by RealFaviconGenerator plugin
