Favicon: на пути к PWA
Болотова Ольга
Привет, я джуниор
- Работаю в веб-студии Pugofka
- Наставник в Loftschool и Epic Skills
- Учусь в ИТМО (фак. ИТиП) на 4 курсе
- Пишу диплом о доступности веба для людей с ОВЗ
Немного истории
В марте 1999 года Microsoft выпустила браузер Internet Explorer 5, который первым стал поддерживать значки для сайта.
Прошлое: ico
Настоящее: png
Будущее: svg
Атрибут sizes в HTML5
<link rel="icon" sizes="<ширина>X<высота>">
<link rel="icon" sizes="<ширина1>X<высота1> <ширина2>X<высота2>">
<link rel="icon" sizes="any">
Windows
С помощью метаданных в <head>
<meta name="msapplication-TileImage" content="tileimage.png">
С помощью метаданных в <head>
<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.xml
<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.xml
<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>
<cycle>
Управляет способом повторения сообщений.
- 0: (по умолчанию при одном уведомлении) не повторять.
- 1: (по умолчанию при нескольких уведомлениях) повторять уведомления для плиток всех размеров.
- 2: повторять уведомления только для средних плиток.
- 3: повторять уведомления только для широких плиток.
- 4: повторять уведомления только для больших плиток.
- 5: повторять уведомления только для средних или широких плиток.
- 6: повторять уведомления только для средних или больших плиток.
- 7: повторять уведомления только для широких или больших плиток.
Вызов в <head>
<meta name="msapplication-config" content="browserconfig.xml">
template1.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">
manifest.json
{
"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"
}
Вызов в <head>
<link rel="manifest" href="manifest.json">
Fork me on GitHub
