ΡΠΎΡΠΌΠ°ΡΡ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ°, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·Π°ΡΠΈΡ / Π₯Π°Π±Ρ
ΠΠ° ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΠΉ Π΄Π΅Π½Ρ faviconβββΡΡΠΎ Π½Π΅ ΠΏΡΠΎΡΡΠΎ Π·Π½Π°ΡΠΎΠΊ 16×16 Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ Π²Π°ΠΆΠ½ΠΎΠΉ ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠ΅ΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ³ΡΠ°Π΅Ρ Π½Π΅ΠΌΠ°Π»ΠΎΠ²Π°ΠΆΠ½ΡΡ ΡΠΎΠ»Ρ Π² ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΡΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ . Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΠΌΠ°Π»ΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ favicon, ΠΎ ΠΊΠΎΡΠΎΡΡΡ Ρ ΡΠ°ΡΡΠΊΠ°ΠΆΡ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
Π ΠΊΠ°ΠΊΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠ°Π²ΠΈΠΊΠΎΠ½?
Π Π°Π½ΡΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΡΠΎΡΠΌΠ°ΡΠΎΠΌ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π° Π±ΡΠ» ΡΠΎΡΠΌΠ°Ρ ICO. ΠΠ³ΠΎ Π³Π»Π°Π²Π½Π°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ°Π»Π°ΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ°ΠΉΠ» ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ° ΠΌΠΎΠ³ Ρ ΡΠ°Π½ΠΈΡΡ Π² ΡΠ΅Π±Π΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠΊΠΎΠ½ΠΊΠΈ. Π‘Π΅ΠΉΡΠ°Ρ ΡΠΎΡΠΌΠ°Ρ ICO ΡΡΠΈΡΠ°Π΅ΡΡΡ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌ, Π½Π° ΡΠΌΠ΅Π½Ρ Π΅ΠΌΡ ΠΏΡΠΈΡΡΠ» ΡΠΎΡΠΌΠ°Ρ PNG Ρ Π½ΠΎΠ²ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ ΠΏΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ.
ΠΠΎΠΌΠΈΠΌΠΎ PNG, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΠΎΡΠΌΠ°Ρ SVG. ΠΠΎ Ρ Π½Π΅Π³ΠΎ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π½Π΅Π²ΡΡΠΎΠΊΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎΡ ΡΠΎΡΠΌΠ°Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΎΠ², Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±Ρ ΡΠΏΡΠΎΡΡΠΈΠ»ΠΎ Π½Π°ΠΌ ΠΆΠΈΠ·Π½Ρ. ΠΡΠ΄Π΅ΠΌ Π½Π°Π΄Π΅ΡΡΡΡΡ, ΡΡΠΎ ΡΠΈΡΡΠ°ΡΠΈΡ ΡΠΊΠΎΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ.
Π€Π°Π²ΠΈΠΊΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΠ·Π΄Π°Π½ Π΅ΡΡ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΎΡΠΌΠ°ΡΠ°Ρ , Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠΎΡΠΌΠ°ΡΠ΅ GIF ΠΈΠ»ΠΈ JPEG, Π½ΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π΄Π΅Π»Π°ΡΡ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ΡΠ΅Π»Π΅ΡΠΎΠΎΠ±ΡΠ°Π·Π½ΡΠΌ.
HTML5 ΠΈ Π°ΡΡΠΈΠ±ΡΡ sizes
ΠΡΡΠΈΠ±ΡΡ sizes ΠΏΡΠΈΡΠ΅Π» Π² Π½Π°ΡΡ ΠΆΠΈΠ·Π½Ρ Ρ HTML5. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Π΅ΠΌΡ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ±ΡΠ°ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π°. ΠΡΡΠΈΠ±ΡΡ sizes ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ [ΡΠΈΡΠΈΠ½Π° Ρ Π²ΡΡΠΎΡΠ°] Π±Π΅Π· ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π΅Π΄ΠΈΠ½ΠΈΡ. ΠΡΠ»ΠΈ Π² ΡΠ°ΠΉΠ»Π΅ Ρ ΡΠ°Π½ΠΈΡΡΡ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΠΎΠ±Π΅Π». ΠΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ any ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ Π΄ΠΎ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° Ρ ΡΠ°Π½ΠΈΡΡΡ Π² Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅ SVG.
<link rel="icon"> <link rel="icon" any">
ΠΠΎΡΠ° Π»ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ ICO Π½Π° ΡΠ²Π°Π»ΠΊΡ?
ΠΠ°ΠΊ Ρ ΡΠΆΠ΅ ΡΠΊΠ°Π·Π°Π»Π°, ΡΠΎΡΠΌΠ°Ρ ICO ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΡΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΠ°ΡΡ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌ, Π½ΠΎ Π·Π½Π°ΡΠΈΡ Π»ΠΈ ΡΡΠΎ, ΡΡΠΎ ΠΎΡ Π½Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎΡΠ½ΠΎ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ? ΠΡΠ²Π΅Ρ, ΠΊΠ°ΠΊ Π²ΡΠ΅Π³Π΄Π°, Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΡΠΉ. ΠΡΡΡ ΡΠ»ΡΡΠ°ΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΡΠΌΠ°Ρ ICO Π΅ΡΡ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΡΠ»ΡΠΆΠΈΡΡ Π²Π°ΠΌ Ρ
ΠΎΡΠΎΡΡΡ ΡΠ»ΡΠΆΠ±Ρ.
ΠΡΠΈΠ²Π΅Π΄Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΎΠΏΡΠ°Π²Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π° Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ICO Π² ΡΠ°Π·Π½ΡΡ
ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ
ΡΠΈΡΡΠ΅ΠΌΠ°Ρ
ΠΈ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎΠ± Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π°Ρ
.
Windows
ΠΠ°ΡΠ½ΡΠΌ, ΠΏΠΎΠΆΠ°Π»ΡΠΉ, Ρ Windows.
ΠΠΎ 11 Π²Π΅ΡΡΠΈΠΈ ΡΠΎΡΠΌΠ°Ρ PNG Π² IE Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π»ΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ IE10 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΌΠ»Π°Π΄ΡΠΈΡ Π²Π΅ΡΡΠΈΠΉ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΠΌΠ°Ρ ICO. Π Π²ΠΎΡ Ρ IE11 ΡΠΌΠ΅Π»ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ Π½Π° PNG. ΠΠ»Ρ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Microsoft ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ 16Ρ 16, 32Ρ 32 ΠΈ 48Ρ 48 Π΄Π»Ρ ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΎΠ² ΡΠΎΡΠΌΠ°ΡΠ° ICO.
ΠΠ°ΡΠΈΠ½Π°Ρ Ρ IE9, ΡΠ°ΠΉΡΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π±ΡΡΡ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΌΠΈ Π² ΠΌΠ΅Π½Ρ ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ Π·Π°Π΄Π°Ρ, Π° Ρ ΠΏΡΠΈΡ ΠΎΠ΄ΠΎΠΌ IE11 ΠΈ Windows 8.1 ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΆΠΈΠ²ΡΡ ΠΏΠ»ΠΈΡΠΎΠΊ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° ΠΏΠ»ΠΈΡΠΊΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π²ΠΈΠΊΠΎΠ½, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΠΈ ΡΠΈΡΠΎΠΊΠΈΡ ΠΏΠ»ΠΈΡΠΎΠΊ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. Π‘Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ: Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΡΠ΅Π³ΠΈ ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΡΠ°ΠΉΠ» ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
Π‘Π½Π°ΡΠ°Π»Π° Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ±.![]()
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π° Π² ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Windows Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΡ Π² <head>:
<meta name="msapplication-TileImage" content="images\tileimage.jpg">
ΠΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠΊΠ°Π·Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΠΏΠ»ΠΈΡΠΎΠΊ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΡ :
<meta name="msapplication-square70x70logo" content="images/smalltile.png"> <meta name="msapplication-square150x150logo" content="images/mediumtile.png"> <meta name="msapplication-wide310x150logo" content="images/widetile.png"> <meta name="msapplication-square310x310logo" content="images/largetile.png">
ΠΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΏΠ»ΠΈΡΠΊΠΈ:
<meta name="msapplication-TileColor" content="#009900">
ΠΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΈΠΌΡ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°:
<meta name="application-name" content="Rick and Morty">
ΠΡΠ»ΠΈ Π½Π΅Ρ ΡΡΠΈΡ
ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΡ
, ΡΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠΌΠ΅Π½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² <title> ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ΅ΠΊΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ, ΠΏΠΎΡΠ²Π»ΡΡΡΠ΅ΠΉΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΡΠ»ΡΠΊ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Π² ΠΌΠ΅Π½Ρ βΠΡΡΠΊβ Windows ΠΈΠ»ΠΈ Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅:
<meta name="msapplication-tooltip" content="Title">
ΠΠΎΠΆΠ½ΠΎ Π΄Π°ΠΆΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π°Π΄ΡΠ΅Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°:
<meta name="msapplication-starturl" content="./">
Π ΡΠΎΠ³Π΄Π° Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΠ» Π½Π° ΠΏΠ°Π½Π΅Π»Ρ Π·Π°Π΄Π°Ρ, Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΉ ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ Π°Π΄ΡΠ΅Ρ.
ΠΡΡΡ Π΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΈΡ ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΡ , ΠΊΠΎΡΠΎΡΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ²Π΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΈΠ»ΠΈ Π΄Π΅Π»Π°ΡΡ ΠΏΠ»ΠΈΡΠΊΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½ΡΠΌΠΈ.
ΠΠ°ΡΠΈΠ½Π°Ρ Ρ IE11 Windows 8.1 ΠΈ Edge Windows 10 ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΊΡΠ΅ΠΏΠΈΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°ΠΉΠ»Π° ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΎ ΡΠ΄ΠΎΠ±Π½ΠΎ: ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ» browserconfig.xml ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ, ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ Π΅Π³ΠΎ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π΅ΡΠ»ΠΈ Ρ Π½Π°Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΈ ΠΈ ΡΠ΅ ΠΆΠ΅ ΠΏΠ»ΠΈΡΠΊΠΈ.
ΠΡΠ·ΠΎΠ² ΡΠ°ΠΉΠ»Π° Π² <head>:
<meta name="msapplication-config" content="browserconfig.xml">
browserconfig.xml
<?xml version=β1.0" encoding=βutf-8"?>
<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/contoso1.xml"/>
<polling-uri2 src="notifications/contoso2.xml"/>
<polling-uri3 src="notifications/contoso3.xml"/>
<frequency>30</frequency>
<cycle>1</cycle>
</notification>
</msapplication>
</browserconfig>
square70x70logo, square150x150logo, wide310x150logo, square310x310logoβββΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΡΡ
ΠΎΠ±ΡΡΠ²Π»ΡΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΏΠ»ΠΈΡΠΊΠΈ.
Microsoft ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅Ρ Π±ΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠ΅Π»ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΠΊΡΠ°Π½ΠΎΠ² Ρ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ Π² 1.8 ΡΠ°Π·Π° ΠΏΡΠ΅Π²ΡΡΠ°Π» ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΠΏΠ»ΠΈΡΠΊΠΈ, ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ 70Ρ 70 ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ 128Ρ 128, Π° Π΄Π»Ρ ΡΠΈΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΈΡΠΊΠΈ 310×150 ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ 558×270.
ΠΡΠ»ΠΈ ΠΏΠ»ΠΈΡΠΊΠ° ΡΠ°ΠΉΡΠ° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ, ΡΠΎ Π²ΡΡΠ΅ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ. ΠΡΠ»ΠΈ ΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΏΠ»ΠΈΡΠΊΠ°, ΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <notification>
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π° <notification> Π΅ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <cycle>, ΠΎΡΠ²Π΅ΡΠ°ΡΡΠΈΠΉ Π·Π° ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ (ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΡ 0 Π΄ΠΎ 7). Π¨Π°Π±Π»ΠΎΠ½Ρ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΡΠ΅Π΄Π½ΠΈΡ , ΡΠΈΡΠΎΠΊΠΈΡ ΠΈ Π±ΠΎΠ»ΡΡΠΈΡ ΠΏΠ»ΠΈΡΠΎΠΊ.
ΠΠΎΠ²ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Metro ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½ΠΎΠ²ΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Β«Π±Π΅Π»ΡΠ΅ ΡΠΈΠ»ΡΡΡΡΒ», ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎΠΌ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ Windows ΡΠ°ΠΉΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π° ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π° ΠΏΠ»ΠΈΡΠΊΠ΅ Π΄ΠΎ ΠΏΡΡΠΈ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ
ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΈ ΡΠΌΠ΅Π½ΡΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°. ΠΠ΅ Π±ΡΠ΄Π΅ΠΌ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡΡΡ Π½Π° ΡΡΠΈΡ
xml-ΡΠ°ΠΉΠ»Π°Ρ
ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΠΆΠΈΠ²ΡΡ
ΠΏΠ»ΠΈΡΠΎΠΊ, Π²ΠΎΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ
:
<tile>
<visual lang="en-US" version="2">
<binding template="TileWide310x150ImageAndText01"
<image src="images/image1.png" alt="alt text"/>
<text>Text Field 1</text>
</binding>
</visual>
</tile>
Π’ΠΎ, ΡΡΠΎ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ Π² ΠΊΠ°Π²ΡΡΠΊΠ°Ρ
Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ template ββ βΠ½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΎΠ½Π°.
ΠΡΠΎΡ ΡΠ°Π±Π»ΠΎΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ΅ΠΊΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΡΡΠ΅Π΄Π½ΠΈΡ
Π½Π°Π·Π²Π°Π½ΠΈΠΉ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ
ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ: ΠΈ ΠΏΡΠΎΡΡΠΎ c ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΈ ΠΏΡΠΎΡΡΠΎ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΈ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ ΡΠ΅ΠΊΡΡΠ°, ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΡΠ΅ΠΊΡΡ Π½Π° ΡΠΎΠΉ ΠΆΠ΅ ΠΏΠ»ΠΈΡΠΊΠ΅, ΡΡΠΎ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎ ΡΠ°Π±Π»ΠΎΠ½Ρ Ρ Peek Π² Π½Π°Π·Π²Π°Π½ΠΈΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ Π½Π° ΠΏΠ»ΠΈΡΠΊΠ΅.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΡΠ°Π±Π»ΠΎΠ½Π°Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ·Π½Π°ΡΡ Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅.
Mac OS
Π Mac OS ΠΎΡΠΎΠ±ΠΎ Π½Π΅ ΡΠ°Π·Π³ΡΠ»ΡΠ΅ΡΡΡΡ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ. ΠΡΠ»ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡ Π½Π° ΡΠ°Π±ΠΎΡΠΈΠΉ ΡΡΠΎΠ» Π² Mac OS, ΡΠΎ Π·Π½Π°ΡΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ ΡΠΊΡΠΈΠ½ΡΠΎΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ html ΠΊΠΎΠ΄ΠΎΠΌ. ΠΡΠΎΡΡΠΎ ΡΠ°ΠΊ ΡΠ°ΠΉΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π² Mac OS Π½Π΅ ΡΠ΄Π΅Π»Π°ΡΡ, Π½ΠΎ ΠΈ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ.
SafariβββΠ²ΠΎΡ Π³Π΄Π΅ Π½Π°ΠΌ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ ΡΠΎΡΠΌΠ°Ρ SVG. Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ SVG, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ rel ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ mask-icon, Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ SVG Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°. ΠΠΎ Π½Π΅ ΡΡΠΎΠΈΡ ΠΏΡΠ³Π°ΡΡΡΡ, ΡΠ²Π΅Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ color.
ΠΡΠ° SVG-ΠΈΠΊΠΎΠ½ΠΊΠ° Π½ΡΠΆΠ½Π° Π΄Π»Ρ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΡ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π² Safari. Π ΡΠ²Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΈΠΌ, ΠΊΠ°ΠΊΠΎΠΉ ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ color.
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00Π°0ff">
ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ, ΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π±ΡΠΊΠ²Ρ Π΄ΠΎΠΌΠ΅Π½Π° Π½Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΡΠΏΠΎΠΌΠ½ΠΈΠ»Π° Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ»ΡΡΠ°ΠΉ, Π³Π΄Π΅ Π½Π°ΠΌ Π΅ΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡΡ ΡΠΎΡΠΌΠ°Ρ ICO. ΠΠΎΠΈΡΠΊΠΎΠ²ΠΈΠΊ Π―Π½Π΄Π΅ΠΊΡ Π²ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ°Π²ΠΈΠΊΠΎΠ½ Π² ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ Π²ΡΠ΄Π°ΡΠ΅ ΡΡΠ΄ΠΎΠΌ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΡΠ°ΠΉΡΠ°. Π§ΡΠΎ, Π±Π΅Π·ΡΡΠ»ΠΎΠ²Π½ΠΎ, ΡΠ²Π΅Π»ΠΈΡΠΈΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΠ½ΠΈΠΏΠΏΠ΅ΡΠ° ΠΈ, ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠ΅, ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΠΎΡΡΡ.Π―Π½Π΄Π΅ΠΊΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΡΠΈΡ ΡΠ΅Π»Π΅ΠΉ ΡΠΎΡΠΌΠ°Ρ ICO.
iOS
Safari Π² iOS Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ favicon Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ°Ρ , Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΈΡ Π΄Π»Ρ Π·Π°ΠΊΠ»Π°Π΄ΠΎΠΊ, ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π² Mac OS. Π iOS ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ°ΠΉΡ Π½Π° ΡΠ°Π±ΠΎΡΠΈΠΉ ΡΡΠΎΠ», ΠΈ ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ Π½Π°ΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠΈ ΡΡΡΠ»ΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π²ΠΈΠ΄Π΅ Π·Π½Π°ΡΠΊΠΎΠ² ΠΈ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ Web Clips.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ rel=Β«apple-touch-iconΒ» ΠΈ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° sizes.
<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" href="apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" href="apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" href="apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" href="apple-touch-icon-180x180.png">
ΠΡΠ»ΠΈ Π·Π½Π°ΡΠΎΠΊ Π½Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ°ΠΌΠ°Ρ Π±Π»ΠΈΠ·ΠΊΠ°Ρ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π½Π΅ΠΆΠ΅Π»ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΉ.
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π·Π°Ρ
ΠΎΠ΄ΠΈΡ Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ Ρ iOS ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π·Π°ΠΏΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ ΡΠ°ΠΉΠ» apple-touch-icon-precomposed.png, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ Π² ΡΡΠΈΠ»Π΅ iOS: Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ, Π±Π»ΠΈΠΊΠΈ, ΠΈ ΡΠ΅Π½Ρ. ΠΡΠ»ΠΈ ΡΠ°ΠΉΠ»Π° Ρ ΡΠ°ΠΊΠΈΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Π² ΠΊΠΎΡΠ½Π΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈΠ»ΠΈ rel=Β«apple-touch-icon-precomposedΒ» Π½Π΅Ρ, Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΡΠΎΡΠ΅Π½ apple-touch-icon.png, ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΎ Π±ΡΡΡ ΡΠ°ΠΊΠΈΠΌ, ΠΊΠ°ΠΊΠΎΠΉ ΠΎΠ½ Π΅ΡΡΡ, Π° Π²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π±ΡΠ΄ΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½Ρ ΡΠ°ΠΌΠΈΠΌ iOS. Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, Π½ΡΠΆΠ½Π° ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΏΠΎΠ΄ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. Π Π²ΠΎΡ Π΅ΡΠ»ΠΈ Π½Π΅Ρ ΠΈ ΡΡΠΈΡ
ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠΎ Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅ iPhone ΠΈΠ»ΠΈ iPad Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π΅ ΠΊΡΠ°ΡΠΈΠ²Π°Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°, Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ° ΡΡΡΠ°Π½ΠΈΡΡβββΠ΅Π΅ ΡΠΊΡΠΈΠ½ΡΠΎΡ.
Π₯ΠΎΠ΄ΡΡ ΡΠ»ΡΡ ΠΈ ΡΡΠΎ Blackberry Π±ΡΠ΄Π΅Ρ ΡΠΎΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ rel=Β«apple-touch-icon-precomposedΒ», Π½ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π½Π΅ Π±ΡΠ»ΠΎ.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² iOS ΠΌΠΎΠΆΠ½ΠΎ Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅.
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π²ΠΎΠ·ΡΠ°Π·ΠΈΡΡ, ΡΡΠΎ Π²ΡΠ΅ 9 ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π΅ ΠΎΡΠ΅Π½Ρ ΠΈ Π½ΡΠΆΠ½Ρ. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ Apple Touch Icon Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ 180Ρ
180. ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΌΠΎΠ³ΡΡ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ ΡΠΎΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Apple Touch Icon, ΠΏΠΎΡΡΠΎΠΌΡ Π»ΡΡΡΠ΅ ΠΈΡ
ΠΎΠ±ΡΡΠ²ΠΈΡΡ.
ΠΠ°ΠΊ Π±Ρ ΡΡΡΠ°Π½Π½ΠΎ ΡΡΠΎ Π½Π΅ Π·Π²ΡΡΠ°Π»ΠΎ, ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ΄ iOS Π½Π΅ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΡΡ Apple Touch Icon. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π΅Π΅ ΠΈ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ ΡΠ°ΡΠ΅ Π΄ΡΡΠ³ΠΈΡ PNG ΠΈΠΊΠΎΠ½ΠΎΠΊ Π²ΡΡΠΎΠΊΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Π²ΡΠΎΠ΄Π΅ Android Chrome, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΈΡ . Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π»ΡΡΡΠ΅ ΠΈΡ ΠΎΠ±ΡΡΠ²Π»ΡΡΡ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎΠΌ ΠΈΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½Ρ ΠΈΠ· ΡΡΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ.
Π iOS ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅Π³Π° <title>. Π§ΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΌΠ΅ΡΠ°ΡΠ΅Π³ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ:
<meta name = "apple-mobile-web-app-title" content = "AppTitle">
ΠΡΡΠ°ΡΠΈ, ΠΌΠΎΠΆΠ½ΠΎ Π΄Π°ΠΆΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΡΠΈΠ»Ρ ΡΡΡΠΎΠΊΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π΄Π»Ρ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
ΠΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ Π΅Ρ ΡΠ²Π΅Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠΉ.
ΠΡΠΎ ΡΠΎΠΆΠ΅ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ Π½Π° Π²ΠΈΠ΄ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
Android
Π£ΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π° Android ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΡΠΎΡΠΌΠ°Ρ PNG, Π° Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΌΠ°Π½ΠΈΡΠ΅ΡΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ manifest.json, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π²ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΡΠ°ΠΉΡ, Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½Π° Π΄ΠΎΠΌΠ°ΡΠ½ΠΈΠΉ ΡΠΊΡΠ°Π½. ΠΡΠΎΡ ΠΌΠ°Π½ΠΈΡΠ΅ΡΡ ΠΏΠΎΠΊΠ°, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π½Π΅ ΡΠΈΡΠ°ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ΄ IOS. Π Π΅ΡΠ»ΠΈ Android Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ ΡΡΠΎΡ ΡΠ°ΠΉΠ», ΡΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ apple-icon-touch.
Π€Π°ΠΉΠ» ΠΌΠ°Π½ΠΈΡΠ΅ΡΡΠ° ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π² ΡΠ΅Π±Π΅ ΡΡΠ΄ ΠΊΠΎΡΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ², Π½ΠΎ ΡΡΡ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π»ΠΈΡΡ ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ° Π½Π° Π΄ΠΎΠΌΠ°ΡΠ½Π΅ΠΌ ΡΠΊΡΠ°Π½Π΅:
{
"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"
}
ΠΠ»ΡΡ name ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° Π΄ΠΎΠΌΠ°ΡΠ½Π΅ΠΌ ΡΡΠΎΠ»Π΅.
ΠΡΠ»ΠΈ ΡΡΠΎΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ Π½Π΅ ΡΠΊΠ°Π·Π°Π½, ΠΏΠΎΠ΄ΠΏΠΈΡΡ Π±ΡΠ΄Π΅Ρ Π²Π·ΡΡΠ° ΠΈΠ· <title> Π² <head>;
ΠΠ»ΡΡ short_name ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΊΠΎΡΠΎΡΠ΅Π½Π½ΡΡ ΠΏΠΎΠ΄ΠΏΠΈΡΡ Π΄Π»Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ;
ΠΠ»ΡΡ iconsβββΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΌΠ°ΡΡΠΈΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: sizes, src, type;
ΠΠ»ΡΡ theme_color ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ²Π΅Ρ ΡΡΡΠΎΠΊΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. ΠΠ°ΡΠΈΠ½Π°Ρ Ρ 39 Π²Π΅ΡΡΠΈΠΈ Ρ ΡΠΎΠΌΠ° Π΄Π»Ρ Android Lollipop ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΡΠ²Π΅Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠ°Π΄Π°ΡΡ ΡΠ²Π΅Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΈ ΡΠ΅ΡΠ΅Π· <head>, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΌΠ΅ΡΠ°-ΡΠ΅Π³:
<meta name="theme-color" content="#9CC2CE">
ΠΠ»ΡΡ background_color ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Π΄Π»Ρ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° Π΄ΠΎΠΌΠ°ΡΠ½Π΅ΠΌ ΡΡΠΎΠ»Π΅. ΠΡΠΎΡ ΠΆΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠ²Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ½ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ, Ρ.Π΅. ΠΌΠ°Π½ΠΈΡΠ΅ΡΡ Π·Π°Π³ΡΡΠ·ΠΈΠ»ΡΡ, Π½ΠΎ Π΅ΡΡ Π½Π΅ Π·Π°Π³ΡΡΠ·ΠΈΠ»ΠΈΡΡ ΡΡΠΈΠ»ΠΈ;
ΠΠ»ΡΡ display ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ΅ΠΆΠΈΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ standalone, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΎ ΠΎΡΠΊΡΡΠ²Π°ΡΡ Π½Π°ΠΌ ΡΠ°ΠΉΡ ΠΊΠ°ΠΊ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
ΠΡΠ·ΠΎΠ² Π² <head>:
<link rel="manifest" href="manifest.json">
Π ΠΌΠ°Π½ΠΈΡΠ΅ΡΡΠ΅ Π΅ΡΡΡ Π΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΈΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ· Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π½Π°ΡΡΠΎΡΡΠ΅Π΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΠΎΠ½ΠΈ ΡΠΆΠ΅ Π½Π΅ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ Π½Π°ΡΠ΅ΠΉ ΡΠ΅ΠΌΠ΅.
ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΠ·Π°ΡΠΈΡ
Π Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π²ΡΠ΅, ΡΡΠΎ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π² ΡΠ°ΠΌΠΊΠ°Ρ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ, Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΈΡΠ°ΡΡ ΡΡΠΊΠ°ΠΌΠΈ, Π½Π΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΠΏΡΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·Π°ΡΠΈΡ. Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ°ΠΉΡΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΡΡΡΠΎ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π½Π°ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ ΡΠΎΡΠΌΠ°ΡΡ favicon: realfavicongenerator.net, Π° ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΎΠ΄Π½ΠΎ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄.
ΠΡΡΡ ΠΏΠ°ΠΊΠ΅ΡΡ Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ ΠΈ Π΄Π»Ρ Gulp, ΠΈ Π΄Π»Ρ Grunt.
ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ ΡΠ΅Π³ΠΎΠ΄Π½Ρ faviconβββΡΡΠΎ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΈΠΊΠΎΠ½ΠΊΠ° Π² Π°Π΄ΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΈ Π·Π°ΠΊΠ»Π°Π΄ΠΊΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ (favicon) Π΄Π»Ρ ΡΠ°ΠΉΡΠ°?
Π ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
- ΠΠ°ΡΠ΅ΠΌ Π½ΡΠΆΠ΅Π½ favicon Π΄Π»Ρ ΡΠ°ΠΉΡΠ°?
- ΠΠ΄Π΅ Π²Π·ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°?
- ΠΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ Π½Π° ΡΠ°ΠΉΡ?
- ΠΠ°ΠΊ ΠΎΠ±ΡΡΠ²ΠΈΡΡ Apple Touch icon ΠΈ ΠΏΠ»ΠΈΡΠΊΡ Π΄Π»Ρ Windows 10?
ΠΠ°ΡΠ΅ΠΌ Π½ΡΠΆΠ΅Π½ favicon Π΄Π»Ρ ΡΠ°ΠΉΡΠ°?
Favicon (Π°Π½Π³Π».
favorite icon — ΠΈΠ·Π±ΡΠ°Π½Π½ΡΠΉ Π·Π½Π°ΡΠΎΠΊ) — ΡΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π°ΡΡΠΎΡΠΈΠΈΡΡΠ΅ΡΡΡ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ Π²Π΅Π±ΡΠ°ΠΉΡΠΎΠΌ. ΠΡ, Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ°, Π·Π°ΠΌΠ΅ΡΠ°Π»ΠΈ, ΡΡΠΎ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Π΅ΡΡΡ ΡΠ°ΠΊΠ°Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°:
ΠΠΎΡ Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ°ΠΊΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ:
- ΠΠ°ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°
- Π Π΅Π·ΡΠ»ΡΡΠ°ΡΡ ΠΏΠΎΠΈΡΠΊΠ° Π―Π½Π΄Π΅ΠΊΡ, Google
- ΠΠ°ΡΠ°Π»ΠΎΠ³ΠΈ ΠΈ ΡΠ΅ΠΉΡΠΈΠ½Π³ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡ favicon ΡΠ°ΠΉΡΠΎΠ²
- ΠΠ°Π½Π΅Π»Ρ Π·Π°Π΄Π°Ρ ΠΈ ΡΠ°Π±ΠΎΡΠΈΠΉ ΡΡΠΎΠ» ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ
ΠΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΠΉΡΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π±ΡΡΡΡΠ΅Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡ ΡΠ°ΠΉΡ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ°Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°Ρ ΠΏΠΎΠΈΡΠΊΠ°. Favicon ΠΏΠΎΠ²ΡΡΠ°Π΅Ρ ΡΠ·Π½Π°Π²Π°Π΅ΠΌΠΎΡΡΡ ΡΠ°ΠΉΡΠ°.
ΠΠ΄Π΅ Π²Π·ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°?
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠ΅ ΡΠ°ΠΉΡΡ uCoz ΠΈΠΌΠ΅ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ favicon. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ²ΠΎΡ ΠΈΠΊΠΎΠ½ΠΊΡ ΡΠ°ΠΉΡΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
- ΠΠ°ΠΉΡΠΈ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ Π³ΠΎΡΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ .ico (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π΄Π΅ΡΡ)
- ΠΠ΅ΡΠ΅Π²Π΅ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΈΠΊΠΎΠ½ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ² ΠΊΠΎΠ½Π²Π΅ΡΡΠ°ΡΠΈΠΈ ΠΈΠ»ΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ
- Π‘Π°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ Π² Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² GIMP)
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ°ΠΉΠ»Π° favicon.
ico Π²Π°ΠΆΠ½ΠΎ Π·Π½Π°ΡΡ, ΡΡΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΠΎΠΉ. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ 16Ρ
16, 32Ρ
32 ΠΈ 48Ρ
48 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠ°ΡΡΠ΄Ρ Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ .ico, Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΠΎΡΠΌΠ°ΡΠ° .png. Π Π°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ Π΄ΠΎΡΡΠΈΠ³Π°ΡΡ 180×180 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ Π½Π° ΡΠ°ΠΉΡ?
ΠΠΎΠ³Π΄Π° Ρ Π²Π°Ρ Π±ΡΠ΄ΡΡ Π³ΠΎΡΠΎΠ²Ρ ΡΠ°ΠΉΠ»Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ ico ΠΈ png, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°ΠΉΠ»ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ° Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ ΠΈΡ Π² ΠΊΠΎΡΠ΅Π½Ρ ΡΠ°ΠΉΡΠ° (ΠΊΠΎΡΠ΅Π½ΡΒ — ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΏΡΠΈ Π²Ρ ΠΎΠ΄Π΅ Π² ΡΠ°ΠΉΠ»ΠΎΠ²ΡΠΉ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ Π½Π΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ Π² Π΄ΡΡΠ³ΠΈΠ΅ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ):
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½Π°Ρ ΠΈΠΊΠΎΠ½ΠΊΠ° favicon.ico Π±ΡΠ΄Π΅Ρ Π·Π°ΠΌΠ΅Π½Π΅Π½Π° Π½Π° Π½ΠΎΠ²ΡΡ ΠΈ ΡΠ΅ΡΠ΅Π· Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π΅Π΅ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ°Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π² Π·Π°ΠΊΠ»Π°Π΄ΠΊΠ°Ρ ΠΈ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°Ρ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌ.
ΠΠ°ΠΆΠ½ΠΎ! Π§ΡΠΎΠ±Ρ ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΠ»Π°ΡΡ ΡΡΠ°Π·Ρ, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ Π΅Π΅ ΠΏΠΎ ΠΏΡΡΠΌΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅Β http://Π²Π°Ρ-ΡΠ°ΠΉΡ.ΡΡ/favicon.ico ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡΒ CTRL+F5. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π²Ρ Π² ΠΊΠ΅ΡΠ΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΡ Π½Π° Π½ΠΎΠ²ΡΡ, Π΄Π°Π»Π΅Π΅ ΠΏΡΠΈ ΠΎΡΠΊΡΡΡΠΈΠΈ Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ° ΠΏΡΠΎΡΡΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ Π΅Π΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ° Π² Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡΡΡ Π½Π° Π½ΠΎΠ²ΡΡ.
Apple Touch icon ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ°Ρ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ iOS. ΠΠΎΡΡΠΎΠΌΡ Π²Π°ΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΡΡΠΎΠ±Ρ ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ° ΡΠΌΠΎΠ³Π»Π° Π²ΡΠ±ΡΠ°ΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΡΡ:
<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" href="apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" href="apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">
Π Windows 10 Π΅ΡΡΡ ΠΏΠ»ΠΈΡΠΊΠΈ, ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΠ±ΡΡΠ²Π»Π΅Π½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
<meta name="msapplication-square70x70logo" content="tile-70x70.png" /> <meta name="msapplication-square150x150logo" content="tile-150x150.png" /> <meta name="msapplication-wide310x150logo" content="tile-310x150.png" /> <meta name="msapplication-square310x310logo" content="tile-310x310.png" />
ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΎΠ²: Π²ΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ Π² 2022 Π³ΠΎΠ΄Ρ
ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΠΉΡΠ°Ρ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΎΡΠΊΡΡΡΡΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π±ΡΠΊΠ²Ρ Β«WΒ» Webflow Π½Π° ΡΡΠΎΠΉ ΠΎΡΠΊΡΡΡΠΎΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ ΠΊΠ°ΠΊ ΡΠ°Π²ΠΈΠΊΠΎΠ½.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΎΡΠΊΡΠ΄Π° Π²Π·ΡΠ»ΠΈΡΡ ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ²Π΅ΡΡ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ
.
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΊΠΈ
Π€Π°Π²ΠΈΠΊΠΎΠ½Ρ Π²ΠΎΡΡ
ΠΎΠ΄ΡΡ ΠΊ Internet Explorer 5. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ΠΈ ΠΆΠΈΠ»ΠΈ Π² ΠΊΠΎΡΠ½Π΅Π²ΡΡ
ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π°Ρ
Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΡΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Β«favicon.icoΒ», ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄ΠΎ ΡΠΈΡ
ΠΏΠΎΡ. ΡΠ΅Π³ΠΎΠ΄Π½Ρ. ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡ Π² ΠΈΠ·Π±ΡΠ°Π½Π½ΠΎΠ΅ Π² Internet Explorer, ΡΡΠ΄ΠΎΠΌ Ρ Π½ΠΈΠΌ Π² Π°Π΄ΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π·Π½Π°ΡΠΎΠΊ Π·Π½Π°ΡΠΊΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΏΠΈΡΠΎΠΊ Π·Π°ΠΊΠ»Π°Π΄ΠΎΠΊ.
ΠΠΎΠΌΠΈΠΌΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΡΠΎΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠ°Π²ΠΈΠΊΠΎΠ½Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΡΠ΅Π΄ΡΡΠ²Π° ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΠΆΠ½ΠΎ ΠΎΡΠ΅Π½ΠΈΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΏΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ Π·Π°Π³ΡΡΠ·ΠΎΠΊ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π°. Π ΡΡΠ°ΡΡΡΡ, ΠΌΠ΅ΡΡΠΈΠΊΠΈ ΠΈ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ Π±Π»ΠΎΠ³Π° ΠΏΡΠΎΡΠ»ΠΈ Π΄ΠΎΠ»Π³ΠΈΠΉ ΠΏΡΡΡ Ρ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΊΠ°ΠΊ ΡΡΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π³ΡΡΠ±ΡΠ΅ Π½Π°ΡΠΈΠ½Π°Π½ΠΈΡ.
ΠΠ΄Π΅ Π½Π°ΠΉΡΠΈ ΡΠ°Π²ΠΈΠΊΠΎΠ½Ρ
Π€Π°Π²ΠΈΠΊΠΎΠ½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π»Π΅Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ β ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ 16×16 ΠΈΠ»ΠΈ 32×32 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ
Ρ ΡΠ΅ΡΡΠ°ΡΠΊΠΎΠΉ, β Π½ΠΎ ΡΡΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π±ΡΠ΅Π½Π΄ΠΈΠ½Π³Π° Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΏΡΡΠΊΠ°ΡΡ ΠΈΠ· Π²ΠΈΠ΄Ρ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ favicon ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠΎΡΠΌΡ ΡΡΠ΅Π·Π°Π½Π½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°, ΡΠΈΠΌΠ²ΠΎΠ»Π° ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΈΠΌΠ²ΠΎΠ»Π°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π² Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΡΠΎΡΡΡΠΌΠΈ, Π½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ.
- ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° HTML-ΠΊΠΎΠ΄ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Ρ ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ , Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π΅Π΅ Π² ΡΠ΅Π³Π΅ ΠΈ Π² ΡΠΎΡΠΌΠ΅:
β
- ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ°ΠΉΠ»Π° favicon.
png Π² ΡΠ°ΠΉΠ»Π΅ cod e Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΎΠ± ΡΡΠΎΠΌ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅ Π² ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅. Π€Π°Π²ΠΈΠΊΠΎΠ½Ρ Π½Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π΄ΡΡΠ³ΠΈΡ
ΠΌΠ΅ΡΡΠ°Ρ
, Π³Π΄Π΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΡ.
- ΠΡ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΡΠ°Π²ΠΈΠΊΠΎΠ½Ρ Π² ΠΈΡΡΠΎΡΠΈΠΈ Π²Π°ΡΠ΅Π³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ Chrome, Safari, Firefox ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ, ΡΡΠ΄ΠΎΠΌ Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ, ΠΏΠΎΡΠ²ΠΈΡΡΡ Π·Π½Π°ΡΠΎΠΊ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π°. ΠΠΎΡ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π² Google Chrome:
- Π€Π°Π²ΠΈΠΊΠΎΠ½Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π² Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΡ
ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°Ρ
Π² ΡΡΡΠΎΠΊΠ΅ ΠΏΠΎΠΈΡΠΊΠ° Google, Π° ΡΠ°ΠΊΠΆΠ΅ Π² ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΡ
ΡΡ ΡΠΏΠΈΡΠΊΠ°Ρ
Π·Π°ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΈ Π½Π° ΠΏΠ°Π½Π΅Π»ΡΡ
ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π ΡΡΠΈΡ
Π·Π°Π½ΡΡΡΡ
ΡΠΏΠΈΡΠΊΠ°Ρ
Π·Π½Π°ΡΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π½Π°ΠΌ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΡ, Π΄Π°ΠΆΠ΅ Π½Π΅ ΡΠΈΡΠ°Ρ ΡΠ΅ΠΊΡΡ.
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π²ΠΈΠΊΠΎΠ½Ρ
Π€Π°Π²ΠΈΠΊΠΎΠ½Ρ ΡΠ»ΡΠΆΠ°Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠ°ΠΌΠΈ, ΡΠΎΠ·Π΄Π°Π²Π°Ρ Π±ΠΎΠ»Π΅Π΅ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΈ ΠΎΠ±ΡΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½ΠΎΡΡΡ Π±ΡΠ΅Π½Π΄Π°.
Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π²Ρ ΠΏΡΠΈΠ»Π°Π³Π°Π΅ΡΠ΅ ΡΡΠΈΠ»ΠΈΡ ΠΊ Π³Π°ΡΠΌΠΎΠ½ΠΈΠΈ ΡΡΠΈΠ»Π΅ΠΉ CSS, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΡΠ΅ΡΠ°ΡΡΡΡ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Π²Ρ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π²ΠΈΠΊΠΎΠ½ Π²ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² Π²Π°ΡΡ ΠΎΠ±ΡΡΡ ΡΠ΅ΠΌΡ ΠΈ Π±ΡΠ΅Π½Π΄ΠΈΠ½Π³.
ΠΡΠΈΠΌΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π°, Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ YouTube, ΡΠΈΠ½ΡΡ ΠΏΡΠΈΡΡ Twitter ΠΈ ΠΊΡΠ°ΡΠΎΡΠ½ΡΡ Π±ΡΠΊΠ²Ρ Β«GΒ» Google. ΠΡΠΈ Π·Π½Π°ΡΠΊΠΈ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½Ρ, ΠΈΡ
ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ°Π·Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π»Π΅Π³ΠΊΠΎ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΡ Π±ΡΠ΅Π½Π΄ ΠΏΡΠΈ ΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ.
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΡΠΎΠ»Ρ ΠΆΠ΅ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π° β Π²ΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅ΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ
Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΉ Π·Π½Π°ΡΠΎΠΊ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ, Π½ΠΎ ΡΠ°Π·Π±ΠΎΡΡΠΈΠ²ΡΠΌ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ, Π½ΠΎ ΠΈΠΌΠ΅ΠΉΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ ΠΏΡΠΈ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ 16×16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ°Π·Π±ΠΎΡΡΠΈΠ²ΡΠΌΠΈ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΏΡΠΈΠ΄ΡΠΌΠ°ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΡΡΡΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ»Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΡΡ Π±ΡΠ΅Π½Π΄Π°, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ Π΅Π³ΠΎ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠ·Π½Π°Π²Π°Π½ΠΈΠ΅.
ΠΡΠ»ΠΈΡΠ½ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π½Π°ΡΠΈΡ
Π»ΡΠ±ΠΈΠΌΡΡ
Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΈΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Behance.
ΠΠ°ΠΆΠ΅ Π² ΡΡΠΎΠΌ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΌ ΠΌΠ°ΡΡΡΠ°Π±Π΅ Π½Π΅Ρ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ° Π² ΡΠ΅ΡΠΊΠΎΡΡΠΈ, Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΡΡΠΎΠΊΠΎΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΈ Π»Π΅Π³ΠΊΠΎ ΡΠ·Π½Π°Π²Π°Π΅ΠΌΡΠΌ.
ΠΠ΅ ΠΏΠ΅ΡΠ΅ΡΡΠ΅ΡΠ΄ΡΡΠ²ΡΠΉΡΠ΅
ΠΡΠΈ ΡΠ°ΠΊΠΎΠΌ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅ Π»ΡΡΡΠ΅ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌΠ°. ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΡΠΎΡΡΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°Π²ΠΈΠΊΠΎΠ½ β Π²Π·ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΡΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°.
ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ²:Β
- β PetSmart ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΎΠΉ Π»ΠΎΠ³ΠΎΡΠΈΠΏ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°Π³ΡΠΎΠΌΠΎΠΆΠ΄Π°Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π° ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΡΠ³Π°ΡΡΠΈΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ°Ρ ΡΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°. ΠΡΠΎ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΈΡ
Π±ΡΠ΅Π½Π΄Π°, Π½ΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΈΡΡΡΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.
- ΠΡΠ»ΠΈ Π²Π°Ρ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅ΡΠ΅ ΠΈ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠΌ, Π΅Π³ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΊΠΈ. ΠΠΎΠ³ΠΎΡΠΈΠΏ Apple s β ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠΎΠ³ΠΎ.
- β ΠΠ½ΡΡΠ°Π³ΡΠ°ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΊΠ°ΠΌΠ΅ΡΡ ΠΊΠ°ΠΊ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ Π·Π½Π°ΡΠΊΠ°, ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΎΡΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΅ΠΌΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ Π±ΡΠ΅Π½Π΄Π° Π½Π° ΡΠ°Π·Π½ΡΡ
ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ°Ρ
.
ΠΠ³ΡΠ°Π½ΠΈΡΡΡΠ΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΈΠΌΠ²ΠΎΠ»Π°ΠΌΠΈ
ΠΠ°ΡΡΠ΄Ρ Ρ ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΈΠΌΠ²ΠΎΠ»ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ· Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°, Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΌΠ²ΠΎΠ» Π² ΡΠ°Π²ΠΈΠΊΠΎΠ½Π΅. ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π±ΡΠ΅Π½Π΄ΠΎΠ² Ρ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΎΠ΄Π½Ρ Π±ΡΠΊΠ²Ρ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΠΊΡΠΎ ΠΎΠ½ΠΈ Π΅ΡΡΡ.
Π£Π³Π°Π΄Π°Π΅ΡΠ΅, ΡΡΠΈ ΡΡΠΎ ΡΠ°Π²ΠΈΠΊΠΎΠ½Ρ?
ΠΠ°ΠΊΠ»ΠΎΠ½ΡΡΡΠ°ΡΡΡ Π±ΡΠΊΠ²Π° Β«DΒ» ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΡΠ·Π½Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ Disney, ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½Π°Ρ Π±ΡΠΊΠ²Π° P Π² ΠΊΡΠ°ΡΠ½ΠΎΠΌ ΠΊΡΡΠ³Π΅ β ΠΈΠ· Pinterest, Π° ΡΠΈΠ½ΠΈΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ Ρ Π±ΡΠΊΠ²ΠΎΠΉ Β«inΒ» ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° LinkedIn.
ΠΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π° ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ Π΅Π³ΠΎ Π΄ΠΎ ΠΎΠ΄Π½ΠΎΠΉ-Π΄Π²ΡΡ
ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
Π±ΡΠΊΠ² Ρ
ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π±ΡΠ΅Π½Π΄Π°.
Π Π°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΡΡ Π΅ΠΌΡΒ
ΠΠΎΠΌΠΈΠΌΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π²Π°Ρ ΡΠ°Π²ΠΈΠΊΠΎΠ½, Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ²Π΅Ρ. ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΡΠ²Π΅ΡΠΎΠ²:Β
- Π¦Π²Π΅Ρ ΡΠΎΠ½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ΅ΡΡΠΉ ΠΈΠ»ΠΈ Π±Π΅Π»ΡΠΉ , Π° ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈ ΡΠ΅ΡΠ½ΡΠΉ, Π΅ΡΠ»ΠΈ ΠΎΠ½ Π±ΡΠ» ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ Π² Π½ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΠΆΠΈΠΌ. ΠΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ°Π²ΠΈΠΊΠΎΠ½Π° ΡΡΠΈΡΡΠ²Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π° ΡΠ°Π·Π½ΡΡ
ΡΠ²Π΅ΡΠ°Ρ
ΡΠΎΠ½Π°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Marvel ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΡΠ°ΡΠ½ΡΠΉ ΠΈ Π±Π΅Π»ΡΠΉ ΡΠ²Π΅ΡΠ°, ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°Π΄Π΅ΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΠ°.
- β ΠΠ°Ρ Ρ ΠΎΠ»ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΊΠΈ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»ΠΎ ΠΌΠ΅ΡΡΠ°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠ·ΡΡΠΊΠ°Π½Π½ΡΡ ΠΏΠ°Π»ΠΈΡΡΡ Ρ ΡΠ²Π΅ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΠΎΡΠΎ ΡΠΌΠΎΡΡΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Π² ΠΊΡΠΎΡΠ΅ΡΠ½ΠΎΠΌ ΠΌΠ°ΡΡΡΠ°Π±Π΅.
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΡΠ΅ ΡΠ²Π΅ΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΠΎΡΠ»ΠΈΡΠ°Π»ΠΈΡΡ Π΄ΡΡΠ³ ΠΎΡ Π΄ΡΡΠ³Π°. Π―ΡΠ½ΠΎΡΡΡ ΠΈ ΡΠ΅ΡΠΊΠΎΡΡΡ ΡΠ²Π»ΡΡΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌΠΈ ΡΠ°ΠΊΡΠΎΡΠ°ΠΌΠΈ.
ΠΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ
Π₯ΠΎΡΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ ΡΠΎΠ±Π»Π°Π·Π½ Π±ΡΡΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΎ-ΡΠΎ Π² Photoshop, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ. ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΡΠ°Π²ΠΈΠΊΠΎΠ½ Π² Illustrator, Sketch, Figma ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π΄Π»Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π³ΠΎΡΠ°Π·Π΄ΠΎ ΠΏΡΠΎΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΆΠ΅.
ΠΠ½ΠΎΠ³ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡ Ρ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ SVG, Π° Π·Π°ΡΠ΅ΠΌ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΡΡΡ ΠΈΡ
Π² Π½Π΅Π²Π΅ΠΊΡΠΎΡΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ png, gif, jpg ΠΈΠ»ΠΈ ico.
Π Π°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠ° ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΎΠ²
ΠΠ΅Π½Π΅ΡΠ°ΡΠΎΡΡ ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΎΠ² ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ Π±ΡΡΡΡΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°ΡΡ Π·Π½Π°ΡΠΎΠΊ ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². ΠΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΡΠ΄ΠΎΠ±Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ HTML-ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π½Π΅Π΄ΡΠΈΡΡ Π² ΡΠ²ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Ρ Π΅Π³ΠΎ Π² ΡΠ°Π·Π½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ ΠΈ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ ΡΠ°ΠΉΠ»Π°
Π‘Π΅Π³ΠΎΠ΄Π½Ρ favicon.ico ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠΈΡΠΎΠΊΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. ΠΠ΄Π½Π°ΠΊΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ favicon.png. ΠΠΌΠ΅ΠΉΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ Internet Explorer ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ .ico, Π° ΡΠΎΡΠΌΠ°Ρ .png Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΠΎΠΉΡΠΈ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΡΠΎΡ
ΡΠ°Π½ΠΈΠ² Π²Π΅ΡΡΠΈΡ Π·Π½Π°ΡΠΊΠ° .ico ΠΈ .png, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
.
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΊΠΈ
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΊΠΈ β 16×16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² Π½Π°ΡΠΈΠ½Π°ΡΡ Ρ 32×32 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ
Retina. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π²ΠΈΠΊΠΎΠ½Ρ Ρ
ΠΎΡΠΎΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ
Retina, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½Ρ.![]()
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΎΠ², ΠΈ ΡΡΠΎΠΈΡ ΡΠΏΠΎΠΌΡΠ½ΡΡΡ, ΡΡΠΎ Π·Π½Π°ΡΠΊΠΈ Apple-touch, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π΄Π»Ρ OS Safari, ΡΡΠ΅Π±ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² 180 x 180, Π΄Π»Ρ Android Chrome ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠΎΠΊ 192 x 192, Π° Opera Coast ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ 228 x 228. ΠΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·Π½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ°ΠΊ Π² Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, ΡΠ°ΠΊ ΠΈ Π² Π΄ΡΡΠ³ΠΈΡ
ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ
.
ΠΠ΅ ΡΠΊΡΠΏΠΈΡΠ΅ΡΡ Π½Π° ΡΠ°Π²ΠΈΠΊΠΎΠ½ΠΊΠΈ
Π€Π°Π²ΠΈΠΊΠΎΠ½Ρ Π²Π°ΠΆΠ½Ρ. ΠΠ΅Π· Π½ΠΈΡ
Π½Π°ΡΠΈ ΠΎΡΠΊΡΡΡΡΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΊΠ°ΠΆΡΡΡΡ ΠΏΡΡΡΡΠΌΠΈ. Π£ Π½Π°Ρ ΠΎΡΡΠ°Π΅ΡΡΡ ΠΊΡΡΠ° ΡΠ΅ΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ Π·Π°ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ.
Π€Π°Π²ΠΈΠΊΠΎΠ½Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π»ΡΠ΄ΡΠΌ ΡΠ·Π½Π°Π²Π°ΡΡ ΠΈ, ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡ Π²Π°Ρ Π±ΡΠ΅Π½Π΄. ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π²Π°Ρ Π±ΡΠ΅Π½Π΄ ΠΈ ΡΠ°ΠΉΡ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΠ»ΠΈΡΡ, ΡΡΠ° ΠΊΡΠΎΡΠ΅ΡΠ½Π°Ρ ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½Π΅ΡΡΠΈ Π±ΠΎΠ»ΡΡΡΡ ΠΏΠΎΠ»ΡΠ·Ρ.
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² favicon.ico Ρ ΠΏΠΎΠΌΠΎΡΠ½ΠΈΠΊΠΎΠΌ favicon_link_tag Π² rails 4
ΡΠΏΡΠΎΡΠΈΠ»
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ 4 Π³ΠΎΠ΄Π°, 9Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΡΡΠ΅Π² Π½Π°Π·Π°Π΄
ΠΡΠΎΡΠΌΠΎΡΡΠ΅Π½ΠΎ 4ΠΊ ΡΠ°Π·
ΠΠΎΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ°Π²ΠΈΠΊΠΎΠ½ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ favicon_link_tag ΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².![]()
<%= favicon_link_tag 'favicon.ico', ΡΠ°Π·ΠΌΠ΅ΡΡ: '16x16 32x32' %>
Π€Π°ΠΉΠ»Ρ Π±ΡΠ»ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½Ρ ΠΊΠ°ΠΊ favicon-16.ico ΠΈ favicon-32.ico ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. ΠΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² ΠΏΠ°ΠΏΠΊΠ΅ app/assets/images . Π― Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈΡ
ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Ρ? ΠΡΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅?
- ruby-on-rails-4
- favicon
Π Π΅ΡΠ΅Π½ΠΈΠ΅ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π½Π΅ Π² ΠΌΠ°Π³ΠΈΠΈ Rails, Π° Π² ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π²Ρ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΠ΅ ΡΠ°ΠΉΠ»ΠΎΠΌ favicon.ico . ΠΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ» ICO ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎΠ³ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΡ. Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, favicon.ico Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΡΠΈ Π²Π΅ΡΡΠΈΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΠΈ ΡΠΎΠΉ ΠΆΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ: 16×16, 32×32 ΠΈ 48×48. Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² , ΠΎΠ½ Π±ΡΠ» Π²Π²Π΅Π΄Π΅Π½ Π² HTML5 ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π·Π½Π°ΡΠΊΠΎΠ² PNG. ΠΠ΅ favicon.ico .
ΠΠΎΠ΄
ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ:
favicon_link_tag '/path/to/favicon.ico'
Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΏΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ app/assets/images , Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠΈΠ·Π½Π°ΡΡ, ΡΡΠΎ Π½Π΅ Π·Π½Π°Ρ, Π³Π΄Π΅ ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
Π‘Π½Π°ΡΠ°Π»Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΡΡ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ PNG (Π½Π°Π·ΠΎΠ²Π΅ΠΌ ΠΈΡ
16x16.png , 32x32.png ΠΈ 48x48.png ) ΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΡ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° 904, ΠΊΠ°ΠΊ0185 (Π² Ubuntu: sudo apt-get install icoutils ):
icotool -c -o favicon.ico 16x16.png 32x32.png 48x48.png
ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Ρ
ΠΎΡΠΈΡΠ΅ Π²ΠΎΠ·ΠΈΡΡΡΡ Ρ icotool ΠΈ Ρ Π²Π°Ρ Π½Π΅Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄ ΡΡΠΊΠΎΠΉ, Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ favicon. ΠΡΠΎΡΡΠΎ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ favicon.ico ΠΈ ΠΎΡΡΠ°Π²ΡΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π²Π°ΠΌ Π½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Ρ. ΠΠΎΠ»Π½ΠΎΠ΅ ΡΠ°ΡΠΊΡΡΡΠΈΠ΅: Ρ Π°Π²ΡΠΎΡ ΡΡΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°.
0
ΠΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΈΠ΄Π΅ΠΉ Π±ΡΠ»ΠΎ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΡ, ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π½ΡΡ philippe_b, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΈΡ Π² app/assets/images/
ΠΠ°ΡΠ΅ΠΌ Π² ΡΠ°ΠΉΠ»Π΅ application.html.erb ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π³Π°ΠΌΠΈ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ:
<% %w(57 60 72 76 114 120 144 152 180).



