За тиждень / місяць: 9/31
Спробував в заголовок вмістити сенс події, але схоже - все одно не зрозуміло, що ж я таке зробив. Спробую розповісти більш розгорнуто, а також пояснити, як це зробити.
Як можна легко помітити - деякі іконки виглядають просто як квадратик з першою літерою сайту (на наведеному скріншоті - сайт ТДТУ, Мобайл-рев'ю, ну і мій власний, зрозуміло), а деякі - як нормальні favicon, які виводяться і в звичайній рядку url - ЯПлакаль, Яндекс, Ф-Центр. І мене ця ситуація дуже сильно дратувала, душі прекрасні пориви, розумієте-ли - а тут таке. Почав шукати, як поставити в панель швидкого доступу на стартовій сторінці гугл хрому нормальну іконку / фавіконки. Перелопатив все, ніде немає.
Отже, в рядку, де ми вводимо url, у нас фавіконки береться з кореневої директорії: сучасні браузери не вимагають явного вказівки на необхідний файл, а просто шукають favicon.ico і виводять її куди треба. Однак в разі відсутності /favicon.ico можна використовувати для кожної сторінки свій значок, явно вказавши його положення в HTML-коді (всередині елемента
).Тому перше, що нам необхідно зробити, це знайти у себе файл. в якому є елемент head. Причому файл не аби який, а що лежить в папці з вашою темою, у мене це наприклад щось типу 0: / public_html / wp-content / themes / coffeedesk /. У мене таким файлом виявився файл header.php - він виводиться і на сторінках, і в постах, і на головній сторінці (в сенсі - до нього йде звернення). Копіюємо його куди-небудь до себе на комп'ютер (дуже бажано зробити його копію ще де-небудь, щоб відкотити все назад якщо що), відкриваємо в Notepad ++, і шукаємо там з самого верху щось типу:
lt; link rel = "icon" type = "image / png" href = "/favicon-16x16.png" sizes = "16x16" gt;
lt; link rel = "icon" type = "image / png" href = "/favicon-32x32.png" sizes = "32x32" gt;
lt; link rel = "icon" type = "image / png" href = "/favicon-96x96.png" sizes = "96x96" gt;
lt; link rel = "icon" type = "image / png" href = "/favicon-192x192.png" sizes = "192x192" gt;
lt; link rel = "manifest" href = "/manifest.json" gt;
Зберігаємо. Бачимо, що там у нас згадується якийсь файл маніфесту - manifest.json. Треба його створити 🙂 У тому ж нотепаде створюємо новий файл і копіюємо-вставляємо наступне:
Файл зберігаємо з ім'ям manifest.json і переходимо до наступного кроку. Тепер нам необхідно створити власне самі іконки, згадані як в header.php. так і в manifest.json. Зверніть увагу, всі використовувані файли у нас мають розширення png. а не ico. Ну, з favicon-16 × 16.png - найпростіше: зберігаємо наш facicin.ico в форматі png і з ім'ям favicon-16 × 16. Для інших фавіконок - шукаємо наш файл, з якого ми колись робили нашу фавіконки (ну, якщо ми робили її спочатку великий, а потім зменшували до 16 * 16). У мене того файлу не знайшлося, але дуже близький за формою / кольором був. Відповідно - зменшуємо його дозвіл до зазначеного і зберігаємо з необхідним ім'ям. Відповідно, повинно вийти 10 файлів з різними розмірами і різними, але відповідними розмірами назвами:
favicon-16 × 16.png
favicon-32 × 32.png
favicon-96 × 96.png
favicon-192 × 192.png
android-chrome-36 × 36.png
android-chrome-48 × 48.png
android-chrome-72 × 72.png
android-chrome-96 × 96.png
android-chrome-144 × 144.png
android-chrome-192 × 192.png
Тепер нам необхідно все це добро переправити собі назад на сайт.
Файли іконок (всі 10 штук), і файл manifest.json - копіюємо в кореневу директорію сайту. А файл header.php - копіюємо назад в директорію теми. Дивимося, що у нас вийшло. У мене - все вийшло чудово:
Ну і в порівнянні з тим, що було:
Майже як ЯПлакаль', навіть красивіше 🙂
Ну, а для того, щоб все правильно відображалося ще й на Safari на iPhone, і на Windows Phone, (ну або якщо не вийшло скопіювати рядки / скопіювати неправильно з мого сайту) - дуже рекомендую зайти на сайт, де я почерпнув цю інструкцію, і зробити те ж саме для iPhone - все таки їм користуються не менше, ніж 1/4 відвідувачів, принаймні за моєю статистикою. Я зробив, шкода перевірити зараз нема на чому 🙂 А, ще - як бонус там написано, як в новій версії Android Lollipop перефарбовувати інтерфейс браузера в кольори сайту.
Краса врятує світ 🙂