Favicon, Apple Touch icon, Title icon – What it is and Why do web site need it?


The format for the image must be 16×16 pixels or 32×32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO usually favicon 16×16 pixel and named as favicon.ico

why do web site need favicon

What is favicon? Why do website need favicon?

A favicon is the little icon that browsers display next to a page’s title on a browser tab, or in the address bar next to its URL.
It also is used when you bookmark a page.
We can not have more then one of the same favicon.ico it can be done by declaring in head part of the web-page, hard coded, different sizes.

A single .ICO file can contain multiple images of different resolutions. In earlier versions of Internet Explorer, the recommended size of a site icon was 16×16 or 32×32 pixels.
Due to the increased resolution of display devices and larger icons on the desktop, a site icon can appear up to 64×64 pixels or more.

 

<link rel="shortcut icon" href="/favicon.ico" />

What is favicon? Why we website need favicon?Different Mobile Devises, will choose what they want size wise.

favicon.ico

favicon16.png

favicon32.png

favicon96.png

favicon160.png

<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">

Internet Explorer 9 – very old 😉 uses site icons in the following places:

  • Address bar (16×16)
  • New Tab page (32×32)
  • Taskbar button (32×32)
  • Pinned site browser UI (24×24)

source: https://msdn.microsoft.com/library/gg491740(v=vs.85).aspx

Apple Touch Icon

Apple Touch Icon or apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, For website apple touch icon also needed. Look at your server statistic and you will see how may times different devises are looking for it.
Similar to the Favicon, the Apple Touch Icon or apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used. If this file is not found these Apple products will use the screen shot of the web page, which often looks like no more than a white square.

This file should be saved as a .png, have dimensions of 57 x 57, and be stored in your home directory, unless the path is specified in the HTML using the below code.

Older IOS do not recognize “size” as you may see tag below, so havin one like this much better then nothing.

<link rel=”apple-touch-icon” href=”generic_apple_icon.png”/>

When this file is used, by default, the Apple product will automatically give the icon rounded edges and a button-like appearance.

Some common sizes can be requested by mobile devises based on it’s screen resolution and IOS

apple-57×57.png
apple-72×72.png
apple-114×114.png
apple-144×144.png
apple-60×60.png
apple-120×120.png
apple-76×76.png
apple-152×152.png

Name of images can differ, because it need to be declared in head of the page.

once you have icons we will need to add <link href= tag info to head of the pages.

ex: rel =‘apple-touch-icon’sizes=’52×52′ for all sizes of apple touch icons we need

some common link href to consider:

<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">

<link href='apple-57x57.png' rel='apple-touch-icon' sizes='52x52'/>
<link href='apple-72x72.png' rel='apple-touch-icon' sizes='72x72'/>
<link href='apple-114x114.png' rel='apple-touch-icon' sizes='114x114'/>
<link href='apple-144x144.png' rel='apple-touch-icon' sizes='144x144'/>
<link href='apple-60x60.png' rel='apple-touch-icon' sizes='60x60'/>
<link href='apple-120x120.png' rel='apple-touch-icon' sizes='120x120'/>
<link href='apple-76x76.png' rel='apple-touch-icon' sizes='76x76'/>
<link href='apple-152x152.png' rel='apple-touch-icon' sizes='152x152'/>

or like this:

<link rel=”apple-touch-icon” href=”apple_icon.png”/>

Standard iPhone - iPhone(first generation or 2G), iPhone 3G, iPhone 3GS
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">

Standard iPad

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />

iPad and iPad mini @1x

<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">

Retina iPhone
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />

iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s

<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
Retina iPad
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
iPad and iPad mini @2x

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
iPad Pro
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
iPhone 6 Plus and iPhone 6s Plus
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">

Android Devices High Resolution

<link rel="icon" sizes="192x192" href="icon-hd.png">

Android Devices Normal Resolution

<link rel="icon" sizes="128x128" href="icon.png">

There are nine apple-touch-icon combinations:

Device Screen iOS version Icon size
iPhone Classic 6 and prior 57×57
7 60×60
Retina 6 and prior 114×114
7 120×120
6 Plus 8 and above 180×180
iPad Classic 6 and prior 72×72
7 76×76
Retina 6 and prior 144×144
7 152×152

Animated favicon

annimaged favicon Animated faviconalso can be created nnd added to website.
It simple gif animations of proper size with additional “link href” tag in the head tag of the page.

with same sizes as other favicon, most popular and guaranty to work 16×16.

HTML tag between the <head> … </head> tags of your web page.


<link rel=”shortcut icon” href=”favicon.ico”>

How to use the Animated FavIcon Gif:

If you would like to display the animated favicon gif, upload animated_favicon.gif also

and insert the following HTML tags.


<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”animated_favicon.gif” type=”image/gif” >

 

 Which browsers are favicons compatible with ?

Most versions of the major browsers support favicons.
Some examples include Internet Explorer 5/6/7+, Firefox 1/2+, Mozilla 1/2+, Netscape 7+, Opera 7+, Avant 1.1, Konqueror 3+, Safari and many more.

more to come later, need to work ;-).

some more info can be found here: https://css-tricks.com/favicon-quiz/

Advertisements