Favicon: на пути к PWA

Болотова Ольга

Favicon: на пути к PWA

Болотова Ольга

Привет, я джуниор

Немного истории

В марте 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>

Управляет способом повторения сообщений.

Вызов в <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>
		

Mac OS

			<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff">
		

IOS

			<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">
		

Android

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">
		

Автоматизация

http://realfavicongenerator.net/

Вопросы?

olbolot.ru

vk.com/olbol

github.com/olbol

telegram: @olbolot

Fork me on GitHub