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, which appears in the browser at the address bar. In most situations, the favicon is a thumbnail of the graphic logo or the website's initials. This favicon is added to help users identify a web address in bookmarks more quickly.

Stealth Settings Favicon

Stealth Settings Favicon in Safari

Favicon in Opera

Favicon in Opera

Until recently, this file should be of the form "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 </ head>, Be this line:

<Link rel = "shortcut icon" href = "/ images / favicon.ico" type = "image / x-icon" />

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 "Add 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.

Resolutions and standard icon sizes for iPhone, iPad, iPod and Android

  • Classical models of iPhone / iPod = 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:

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


After we made the images, climb up on the web server, the HTML source of the website before the closing </ head>, add the following lines:

<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, the name of the .PNG image and "rel =" must contain the prefix "apple-". For Android, the file name will be "icon hires.png"And"icon normal.png"With rel =" icon ".

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

iPhone Icon Website

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

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

About the author


Passionate about everything that means gadget and IT, I am pleased to write on from 2006 and I love to discover new things about computers and macOS, Linux operating systems, Windows, iOS and Android.

Leave a Comment