Previously, Safari for iOS would consider the -precomposed keyword to avoid adding visual effects, but it hasn't been necessary since iOS 7. Including multiple versions via the sizes attribute is not recommended. Ī non-transparent PNG that's 180px or 192px square is ideal for the apple-touch-icon.

Safari also uses the tag with the rel attribute: apple-touch-icon to indicate the home screen icon. Icons sizes should be based on 48px, for example 48px, 96px, 144px and 192px. To prevent automatic scaling, you can also provide additional sizes by specifying the sizes attribute. Ĭhrome and Opera uses icon.png, which is scaled to the necessary size by the device. To fully support all browsers, you'll need to add a few tags to the element of each page. Providing a high quality image will make your site more recognizable, making it easier for users to find your site. The icon may show up in many places, including the browser tab, recent app switch, the new (or recently visited) tab page, and more. When a user visits your webpage, the browser tries to fetch an icon from the HTML. These simple tweaks can increase engagement and bring users back to your site. Modern browsers make it easy to customize certain components, like icons, the address bar color, and even add things like custom tiles.

How to change google chrome icon