How to add a website icons for iPhone, iPad and iPod Touch

Favicon.ico - Website Icon in Browser

Before it launched a website and add a graphics file, favicon, to appear in the browser, at the address bar. In most situations, the favicon is a thumbnail of the graphic logo or the initials of the respective website. This favicon is added to help users quickly identify a web address in bookmarks.

Stealth Settings favicon

Stealth Settings favicon in Safari

Favicon in Opera

Favicon in Opera

Until recently, this file had to be in shape "favicon.ico", To be identified by the web browser. Chrome, Internet Explorer, Opera, Safari, Firefox, etc.
For several years, with advancing new web languages, HTML5 si CSS3, Favicons can be a .png file or .jpg. The condition is that the header of the site, before, Be this line:

Website Icon for iOS - iPhone, iPad and iPod Touch

In iOS we can add Web page shortcuts pe Home ScreenCPC iPhone, iPad si iPod Touch.

How to add a website shortcut on iPhone, iPad and iPod Home Screen

We do this by opening a web page on the iPhone (Safari, Chrome, etc. internet browser), clicking on the square with the arrow (the sign for "share" in iOS), then the optionAdd to Home Screen".

If the website has set favicon for your browser, but not set iOS device specific icon sites, The screen will appear an icon consisting of a image preview web page.

How to add web icons for iPhone, iPad and Android.

The first step is to create an image iconThat appear on Home ScreenCPC idevice community. For web icon is compatible on all the devices and to see clearly, we must create image for all iPhone and iPad resolutions.

Standard icon resolutions and sizes for iPhone, iPad, iPod and Android

  • Classic iPhone / iPod models = 57 × 57
  • iPad = 76 × 76
  • iPhone / iPod Retina = 120 × 120
  • iPad Retina = 152 × 152
  • iPhone 6 / 6S Plus = 180 × 180

Apple updated regularly Recommended icon sizeURLs applications si web pages pe this page.

For the devices Android, icons are two dimensions:

  • Android classic = 128 × 128
  • Android with high resolution (hi-res) = 192 × 192


After we have made the images, it is uploaded on the web server, and in the HTML source of the website, before closing , the following lines are added:

<link href="/apple-touch-icon.png" rel="apple-touch-icon" /> <link href="/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" /> <link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="/icon-hires.png" rel="icon" sizes="192x192" /> <link href="/icon-normal.png" rel="icon" sizes="128x128" />

For devices Apple, .PNG image name and "rel =" must contain the prefix "apple- ". For Android, the file names will be "icon hires.png"And"icon normal.png”With rel =” icon ”.

It is not absolutely necessary to create images for each resolution. You can make an image for the highest resolution, and the devices with lower resolution will identify it and set it as an icon.

iPhone Icon Website

The shortcut icon to the website will look similar to any applications for iOS.

How to add a website icons for iPhone, iPad and iPod Touch

About the author


Passionate about everything gadget and IT, I write with pleasure on since 2006 and I like to discover with you new things about computers and operating systems macOS, Linux, Windows, iOS and Android.

Leave a Comment