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.
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 on Home ScreenCPC iPhone, iPad si iPod Touch.
How to add a shortcut to a website on iPhone, iPad and iPod Home Screen
We do this by opening a web page on iPhone (Safari, Chrome, etc internet browser), click on the square with the arrow (the sign for "share" in iOS), then the option "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 resolutions of iPhone and iPad.
Resolutions and standard icon sizes for iPhone, iPad, iPod and Android
- Modeclassic lele of iPhone / iPod = 57 × 57
- iPad = 76x76
- 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 on 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-76 × 76.png ”rel =”apple-touch-icon ”sizes =” 76 × 76 ″ /> <link href=”/apple-touch-icon-120 × 120.png ”rel =”apple-touch-icon ”sizes =” 120 × 120 ″ /> <link href=”/apple-touch-icon-152 × 152.png ”rel =”apple-touch-icon ”sizes =” 152 × 152 ″ /> <link href=”/apple-touch-icon-180 × 180.png ”rel =”apple-touch-icon ”sizes =” 180 × 180 ″ />
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.
The shortcut icon to the website will look similar to any applications for iOS.
