Сделал так, чтобы на новой странице мобильного google chrome выводилась иконка сайта, а не первая буква в квадратике

Сделал так, чтобы на новой странице мобильного google chrome выводилась иконка сайта, а не первая буква в квадратикеПопытался в заголовок уместить смысл произошедшего, но похоже — все равно не понятно, что же я такое сделал. Попробую рассказать более развернуто, а также пояснить, как это сделать.

Вот у меня смартфон на андроиде. На нем — стоит мобильный гугл хром. Когда мы открываем новую страницу — первую, стартовую (она же страница быстрого доступа?) — то поверху у нас идет строка поиска/адреса, а под ней — то-ли иконки самых посещаемых сайтов, то-ли иконки последних посещенных сайтов, то-ли иконки быстрого доступа к сайту, или вообще закладки. Короче, не совсем я понимаю, что это такое, но не важно. Но выглядит это примерно так:

Страница быстрого доступа, как она была

Как можно легко заметить — некоторые иконки выглядят просто как квадратик с первой буквой сайта (на приведенном скриншоте — сайт Экслера, Мобайл-ревью, ну и мой собственный, разумеется), а некоторые — как нормальные favicon, которые выводятся и в обычной строке url — ЯПлакаль, Яндекс, Ф-Центр. И меня эта ситуация очень сильно раздражала, души прекрасные порывы, понимаете-ли — а тут такое. Начал искать, как поставить в панель быстрого доступа на стартовой странице гугл хрома нормальную иконку / фавиконку. Перелопатил все, нигде нет.

Наконец — нашел сайт, на котором подробно рассказывалось, как сделать favicon для мобильных сайтов и мобильных устройств. Причем очень доходчиво, специально для таких как я (т.е. максимум умеющих по инструкции «делай раз — делай два»). Инструкцию воспроизвел на своем примере, и с разрешения автора и некоторыми своими дополнениями, касаемых именно wordpress, и хрома — хочу поделиться, что у меня получилось, и как это делать для вордпресса.

Итак, в строке, где мы вводим url, у нас фавиконка берется из корневой директории: современные браузеры не требуют явного указания на необходимый файл, а просто ищут favicon.ico и выводят ее куда надо. Однако в случае отсутствия /favicon.ico можно использовать для каждой страницы свой значок, явно указав его положение в HTML-коде (внутри элемента <head>).

Поэтому первое, что нам необходимо сделать, это найти у себя файл , в котором есть элемент head. Причем файл не абы какой, а лежащий в папке с вашей темой, у меня это например что-то типа 0:/public_html/wp-content/themes/coffeedesk/. У меня таким файлом оказался файл header.php — он выводится и на страницах, и в постах, и на главной странице (в смысле — к нему идет обращение). Копируем его куда-нибудь к себе на компьютер (очень желательно сделать его копию еще где-нибудь, чтобы откатить все обратно если что), открываем в Notepad++, и ищем там с самого верху что-то типа:

И сразу после этого — вставляем туда следующие строки:

Сохраняем. Видим, что там у нас упоминается какой-то файл манифеста — 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 перекрашивать интерфейс браузера в цвета сайта.

Красота спасет мир 🙂

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Subscribe without commenting

QR Code Business Card