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

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

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

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

Делается иконка сайта просто: в настройках мобильного нужно выбрать пункт “Добавить на главный экран“. Но созданная иконка совсем не напоминала мне мой сайт, а вызывала недоумение. Только кликнув на ярлык или прочитав подпись, я понимала, что это вообще такое. Сами понимаете, это неудобно.

Тогда я нашла лёгкий способ сделать иконку (или ярлычок, кому как удобнее) более узнаваемой. Это очень просто, нужно выполнить буквально пару действий.

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

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

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

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

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

Рекомендую создать в корне сайта папку с названием, например, mobile-icons, и залить в неё эти картинки.

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

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

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

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

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

Выбрать пункт “Добавить“.

Затем свернуть окно браузера и… вуаля! Сайт с красивой и узнаваемой иконкой находится на рабочем столе, да ещё и доступен в одно касание.

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

P.S. Статья от Анны Себовой о том, как вылечить вирус на сайте.

P.P.S. Вышеописанный способ работает и с этим блогом. Добавьте его иконку на рабочий стол вашего мобильного устройства :)

Пожалуйста, оцените статью:
1 звезда2 звезды3 звезды4 звезды5 звёзд (3 оценок, среднее: 5,00 из 5)
Загрузка…

Автор блога. SEO-специалист, веб-мастер. Консультирую по вопросам интернет-маркетинга, провожу аудиты сайтов.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: