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, faviconWhich appear in the browser, the address bar. In most situations, the favicon is a miniature graphic logo or initials respective websites. This favicon is added to help users identify an address faster web bookmarks.

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 ScreenCPCiPhone, 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 tocreate 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 sizes of icons 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:

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

icons

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" size = "192x192" /> <link href = "/ icon-normal.png" rel = "icon" sizes = "128x128" />

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

There is absolutely necessary to create images for each resolution separately. You can make an image for the high resolution and the devices with lower resolution, will identify and will set the icon.

iPhone Icon Website

The shortcut's icon will look like the website of any applications for iOS.

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

About the author

Stealth

Passionate about everything that means gadgets and IT, I write with pleasure stealthsettings.com from 2006 and I like to discover with you new things about computers and operating systems macOS, Linux, Windows, iOS and Android.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment is processed.