Болотова Ольга
В марте 1999 года Microsoft выпустила браузер Internet Explorer 5, который первым стал поддерживать значки для сайта.
Прошлое: ico
Настоящее: png
Будущее: svg
<link rel="icon" sizes="<ширина>X<высота>">
<link rel="icon" sizes="<ширина1>X<высота1> <ширина2>X<высота2>">
<link rel="icon" sizes="any">
<meta name="msapplication-TileImage" content="tileimage.png">
<meta name="msapplication-square70x70logo" content="smalltile.png">
<meta name="msapplication-square150x150logo" content="mediumtile.png">
<meta name="msapplication-wide310x150logo" content="widetile.png">
<meta name="msapplication-square310x310logo" content="largetile.png">
<meta name="msapplication-TileColor" content="#009900">
<meta name="application-name" content="Rick and Morty">
<meta name="msapplication-tooltip" content="Rick and Morty">
<meta name="msapplication-starturl" content="htttp://example.com">
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/img/favicons/mstile-70x70.png"/>
<square150x150logo src="/img/favicons/mstile-150x150.png"/>
<square310x310logo src="/img/favicons/mstile-310x310.png"/>
<wide310x150logo src="/img/favicons/mstile-310x150.png"/>
<TileColor>#000000</TileColor>
</tile>
<notification>
<polling-uri src="notifications/template1.xml"/>
<polling-uri2 src="notifications/template2.xml"/>
<frequency>30</frequency>
<cycle>1</cycle>
</notification>
</msapplication>
</browserconfig>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/img/favicons/mstile-70x70.png"/>
<square150x150logo src="/img/favicons/mstile-150x150.png"/>
<square310x310logo src="/img/favicons/mstile-310x310.png"/>
<wide310x150logo src="/img/favicons/mstile-310x150.png"/>
<TileColor>#000000</TileColor>
</tile>
<notification>
<polling-uri src="notifications/template1.xml"/>
<polling-uri2 src="notifications/template2.xml"/>
<frequency>30</frequency>
<cycle>1</cycle>
</notification>
</msapplication>
</browserconfig>
<meta name="msapplication-config" content="browserconfig.xml">
<tile>
<visual lang="en-US" version="2">
<binding template="TileWide310x150ImageAndText01"
<image id="1" src="images/image1.png" alt="alt text"/>
<text id="1">Text Field 1</text>
</binding>
</visual>
</tile>
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114"
href="apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120"
href="apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144"
href="apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152"
href="apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180"
href="apple-touch-icon-180x180.png"><link rel="apple-touch-icon-precomposed"
sizes="180x180" href="apple-touch-icon-precomposed.png">
<meta name = "apple-mobile-web-app-title" content = "AppTitle">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="images/touch/startup.png">
{
"name": "Rick and Morty",
"short_name": "Rick",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#b3adad",
"background_color": "#b3adad",
"display": "standalone"
}
<link rel="manifest" href="manifest.json">