Якщо Ваш сайт досить популярний, то багато користувачів заходять на нього навіть з телефонів і планшетів!
Багато додаю його в закладки на робочий стіл телефону або планшета, для того щоб на робочому столі відображалася красива іконка вашого сайту, необхідно:
Насамперед, нам необхідно створити потрібну іконку в форматі .png. Малюєте (або підбираєте) її. Бажано, в хорошому дозволі.
Якість (дозвіл) екранів пристроїв від Apple постійно росте і змінюється, тому потрібно оптимізувати ці "картинки" під різні пристрої.
Друге, необхідно зробити іконки різних розмірів для різних пристроїв:
для старих iPhone розмір іконки повинен бути 57х57, для новий, починаючи з 4-го діють наступні розміри:
- 60х60 - IPhone
- 76x76 -iPad
- 120x120 - iphone-retina
- 152x152 - ipad-retina
Третє, вставити в код вказавши шляху до картинок:
<Link rel = "apple-touch-icon" href = "touch-icon-iphone.png"> <link rel = "apple-touch-icon" sizes = "76x76" href = "touch-icon-ipad.png" > <link rel = "apple-touch-icon" sizes = "120x120" href = "touch-icon-iphone-retina.png"> <link rel = "apple-touch-icon" sizes = "152x152" href = " touch-icon-ipad-retina.png ">
Safari на iOS 7 не додає ефекти до іконок. А старі версії Safari додавали ефекти для іконок, щоб ефект не застосовувався - потрібно до імен файлів додати - precomposed.png
А що Android!?:
Вся справа в тому, що Android-девайси також підхоплюють файли apple-touch-icon.png і незважаючи на наявність у назві слова "apple" :)
Справедливості заради, хочу зауважити, що ОС Android навмисно не шукає ці іконки, а тільки в тому випадку, якщо користувач вирішив додати сайт на "робочий стіл".
У висновку - якщо не хочете морочитися зі вставкою коду, підготовкою картинок різного розміру, то просто закиньте в корінь сайту картинку (розміром 60 на 60 пікселів) з назвою "apple-touch-icon.png". Це найпростіший спосіб.
Ми радимо використовувати сервіс ICONOGEN
Вкажіть файл з іконкою і сервіс швидко зробить іконки різних розмірів:
Файли можна завантажити архівом.
Сервіс так само генерує html код для вставки в шаблон сайту:
<Link rel = "shortcut icon" href = "/ favicon.ico" type = "image / x-icon" /> <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 =" icon "type =" image / png "href =" / favicon-16x16.png "sizes =" 16x16 "> <link rel =" icon "type =" image / png " href = "/ favicon-32x32.png" sizes = "32x32"> <link rel = "icon" type = "image / png" href = "/ favicon-9 6x96.png "sizes =" 96x96 "> <link rel =" icon "type =" image / png "href =" / android-chrome-192x192.png "sizes =" 192x192 "> <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" />