Как добавить иконку сайта на экран смартфона

Как добавить иконку сайта на экран смартфона

Статья от Анны Себовой, занимающейся вышивкой и программированием. И то и другое она совмещает в своем блоге, попутно рассказывая нам об интересных фишках. 🙂

У меня есть блог “Мадам Стороженко” о рукоделии. Он совсем юный, но тем не менее я часто на него захожу с мобильного, думаю что бы еще написать, как его улучшить. Но хранить его в открытых вкладках браузера на мобильном не очень удобно, закладки тоже мне не очень удобны в мобильном браузере. Поэтому я решила закрепить иконку-ссылку (ярлык) на блог на рабочем столе мобильного телефона. Делается это достаточно просто: в настройках нужно выбрать пункт “Добавить на главный экран“.
Но когда я это сделала, то иконка совсем не напоминала мне мой сайт, скорее даже вызывала недоумение — что это вообще такое на моем экране. Только кликнув или прочитав подпись я понимала, что это. Но это же совсем неудобно.
Тогда я поискала в интернете, как сделать иконку (или ярлычок, кому как удобнее) более узнаваемой.
И вот что я поняла. Нужно сделать всего несколько легких действий:

Действие первое

Взять исходное изображение логотипа сайта или фавикон и обрезать его до стандартных для разных устройств размеров. В моем случае логотип и фавикон — это одно и тоже изображение.
Я выбрала следующие размеры, удобные для мобильных и планшетов:

– для iOS два файла: apple-touch-icon.png и apple-touch-icon-precomposed.png – размером 57 на 57 пикселей:
Ярлык сайта для Apple

– для Windows Phone файл windows-icon-70-70.png
Ярлык сайта для Windows

Android же подхватывает одну из них и не требует дополнительных изображений и ссылок.

Создайте в корне сайта папку с названием, например, mobile-icons, и залейте картинки в нее.

Действие второе

Прописать ссылки в шапке сайта:

Вывести ссылку на сайт на рабочий стол мобильного. Для этого открываем в браузере наш сайт:
Добавление ярлыка сайта на рабочий стол смартфона

Потом открываем меню браузера (жмем на три вертикальные точки в правом верхнем углу браузера) и выбираем выделенный на скриншоте пункт:
Добавление ярлыка сайта на рабочий стол смартфона

У нас появится окошко:
Добавление ярлыка сайта на рабочий стол смартфона

Выбираем “Добавить“.
Затем сворачиваем окно браузера и смотрим на рабочий стол смартфона:
Добавление ярлыка сайта на рабочий стол смартфона

Вуаля! Наш сайт с красивой и узнаваемой иконкой у вас на столе и доступен в 1 тач.
Удобнее не бывает. 🙂

З.Ы. Еще статья от Анны Себовой о том, как вылечить вирус на сайте.

З.З.Ы. Вышеописанный способ работаем и на данном блоге. Можете добавить его иконку на ваше мобильное устройство. 🙂


Оценить статью:
1 звезда2 звезды3 звезды4 звезды5 звезд (5 голосов, оценка: 4,80 из 5)
Загрузка...
Подписка на обновления блога