Touch Icon for Apple, Android and Windows

Touch Icon for Apple, Android and Windows

The favicon for the desktop browser is known by everyone. With the explosion of mobile devices in recent years, the touch icon has become increasingly important for the mobile browser. If the user of a smartphone or tablet adds a website “to the home screen”, the touch icon is displayed there. If no touch icon has been generated in the system of the respective website, only a mini-screenshot of the website is displayed. Therefore, a touch icon should be integrated on the website. How to do this, I write here.

Create Apple Touch Icon and integrate it into the website

Apple Touch Icons and Windows Tiles need graphics in higher resolution: Depending on the device and version, icons in the sizes 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 128×128, 144×144 and 152×152 px are required.For Windows, 70×70, 144×144, 150×150, 310×150 and 310×310 px graphics are required.

A file with 152×152 pixels is recommended as the default icon for Apple devices. It is not necessary to generate rounded corners or gloss effects for the icon, because this is automatically generated by the operating system.

If the icon is installed in the root directory, you can do without this meta tag – IOS automatically searches the root directory for the file “apple-touch-icon.png” ab.

Apple Touch Icons

Examples for Apple Touch Icons – Apple Touch Icons in several sizes

>Different devices and iOS versions display the website icons in different sizes. If the Apple Touch Icon was integrated in only one size, then the image graphics for the other largest are scaled accordingly. This can cause distortion or blurring of the graphics. This can be avoided by making the Apple Touch icon available in several sizes.

Touch icon for Android

>For Android devices you should include your own touch icon. Google recommends a file size of 196×196 pixels.

Windows Touch Icons

For the Microsoft operating system Windows you have to include your own so-called tile icons. The tiles on the Windows screen can be inserted in different sizes and formats.