Által mennék én a Neten favicon, favicon, de favicon

A favicon (favorites icon) a weblapokhoz társított kis kép, melyet a címsorban a cím előtt jelenít meg a böngésző. Eredetileg a Microsoft találta ki a formátumot és a honlap root-jában kell helyezni favicon.ico néven mert a böngészők automatikusan ott keresik. A modernebb böngészőkben meg lehet adni a helyét is:

Több mint egy évtizede elérhető a DynamicDrive honlapján favicon generator ami ikon jpg, gif vagy png képekből készíti el a favicon.ico-t: http://tools.dynamicdrive.com/favicon/

A favicon ezeken a helyeken jelenik meg:

• A böngésző címsorában
• A böngésző kedvencek/könyvjelzők menüpontjában
• A böngésző fülsorában (tab)
• A start menüben
• Az asztalon
• A tálcán
• A hivatkozások között

A mobil böngészők megjelenésével többféle méretű ikonokat használhatunk de az eredeti favicon.ico is megmaradt a használatban. Ha a honlapon nincs deklarálva a helye illetve a root-on sem található akkor a szerver naplóban hibaüzenetek jelenhetnek meg mert a böngészők automatikusan keresik.

Apple

Az iOS ikonokat kirakhatjuk a honlap root-ra és nem szükséges deklarálni a helyét ha a szabványos elnevezéseket használjuk. Az elnevezésekben benne van a képek mérete is. A méretjelölés nélküli kép a régebbi iOS verziókra használatos és a mérete 120x120 pixel. Az iOS az ikonok sarkát kerekíti, ezt érdemes figyelembe venni a tervezéskor.

apple-touch-icon.png
apple-touch-icon-180x180.png
apple-touch-icon-152x152.png
apple-touch-icon-167x167.png

Ha nem a root-on vannak az ikonok (<> jeleket az elejére és végére ki kell tenni!):
link rel="icon" type="image/x-icon" href="favicons/favicon.ico"
link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png"
link rel="apple-touch-icon" sizes="180x180" href=/favicons/apple-touch-icon-180x180.png"
link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-touch-icon-152x152.png
link rel="apple-touch-icon" sizes="167x167" href="/favicons/apple-touch-icon-167x167.png"

Még több info az Apple developer honlapján

Android

Az Android ikonokat a méretet tartalmazó módon lehet jelölni:
link href="/images/favicons/icon-hires.png" rel="icon" sizes="192x192"
link href="/images/favicons/icon-normal.png" rel="icon" sizes="128x128"

A manifest.json fájl a Chrome böngészőknek ad utasításokat.
link rel="manifest" href=“/favicons/manifest.json”

Az ikonokra vonatkozó tartalom:

{

"name":"JTech Communications”,

“icons": [

{

“src”:"/images/android-chrome-192.png", “sizes":"192x192", “type”:"image/png"

}

],

“theme_color":"#ffffff",

"display":"standalone"

}

Windows

A Windows alapú eszközökre egy "browserconfig.xml" fájlt lehet készíteni és a HEAD részben a helyét meghatározni. Ez az Internet Explorer  készült és arra találta ki a Microsoft, hogy az IE számára szükséges ikonok rejtettek maradjanak a többi böngésző számára.
meta name="msapplication-config" content=“/images/favicons/browserconfig.xml”

Az xml fájlban a "http" illetve "https" szükséges az eléréshez. A végén a "Tile" color is megadható ami a tile háttérszínt jelenti az Explorer böngészőkben.

#6A8AA7

Több info:
https://msdn.microsoft.com/library/dn320426(v=vs.85).aspx