A favicon (a combination of "favicon" and "icon") is a small image used to quickly identify a website. These can be found on the left side of the browser tab, or as a touch icon on the home screen of a mobile device. To make a favicon for your website, you can use a brand logo or business logo. Because of the limited space available for favicons, they often end up as a small part of the logo or as a redesign. Regardless of the type of website, Popeye recommends adding a favicon. A favicon gives a website a professional look, helps users find it more easily, and can indirectly improve a website's SEO ranking.
WordPress favicon
What is the recommended icon size?
Favicon sizes are strictly limited. For most browsers, 16 x 16 or 32 x 32 pixels are recommended by default. Larger favicon sizes are recommended for high-resolution screens, and smaller favicon sizes are available for a range of different options. It is better to add both formats.
What favicon size does Google use?
Besides the two different icon sizes mentioned above, there are other formats that may be more suitable, depending on the browser. Google Chrome uses 48 x 48 pixels to display favicons in its search results. Multiples of this size can also be used, such as 96×96 pixels or 144×144 pixels. These favicon sizes also matter on Android. This is because the operating system uses website icons of this size as shortcuts on the home screen. For devices with higher screen resolutions, you can use 192 x 192 pixels.
What icon size do Apple devices use?
For their competitor Apple, the situation is a bit more complicated. Favicon sizes vary by device. For iPhone, use 60 x 60 pixel dimensions. You can use a higher resolution if it's a multiple of that resolution. This allows favicons to display better at higher resolutions and then scaled down when needed. A 180 x 180 pixel image is a good choice. On the iPad, on the other hand, icons are saved at 83.5 x 83.5 pixels. On modern Retina and Super Retina displays at 167 x 167 pixels.
What are the most important favicon sizes?
The size of the favicon varies by browser version and end device. Below is a list of common sizes:
| browser or device | size |
| most modern browsers | 16 x 16 or 32 x 32 pixels |
| Google and Android | 48 x 48 or 192 x 192 pixels |
| iPhone (newer models) | 60 x 60 or 180 x 180 pixels |
| iPad (newer models) | 83.5 x 83.5 or 167 x 167 pixels |
| Chrome Store | 128 x 128 pixels |
| Google TV | 96 x 96 pixels |
| Internet Explorer 9 | 24 x 24 pixels |
| iPad home screen | 72 x 72 pixels |
| iPhone (older models) and iPod Touch | 57 x 57 pixels |
| iPhone 4 home screen | 114 x 114 pixels |
| Opera Speed Dial | 195 x 195 pixels |
What file formats are available for favicons?
You can use different image formats for your favicon. The Windows icon .ico is widely used because it is supported by a range of browsers. The .png format is especially useful for larger images such as touch icons. You can also use .svg or .gif format.
How to add a favicon to a Wordpress website?
Generators are great tools for creating favicons, especially if you want to make sure the formatting is right the first time. The generator guides you every step of the way in creating your favicon and ensures that your favicon is sized for all relevant browsers.
| 1 |
<head> |
Generally, the file name of the favorite icon is "favicon.ico", which can be placed in the root directory of the website. If you need to use another file name or path, you need to modify the value of the "href" attribute accordingly.
It is very necessary to add an icon to the website, which can improve the brand image, user experience, professionalism and traffic of the website, and also help to improve the search engine ranking.