Как вывести сайт на домашний экран телефона в 2026

Любой сайт можно вывести на домашний экран телефона так, что он встанет иконкой рядом с обычными приложениями: на iPhone это делается через меню «Поделиться» в Safari, на Android через меню Chrome. Второй сценарий сложнее и интереснее: сделать так, чтобы ваш собственный сайт ставился именно как приложение, открывался в своём окне без адресной строки и показывал вашу иконку. Ниже разобраны оба: сначала действия на телефоне за минуту, потом файл manifest.webmanifest, иконки и готовый промпт для ИИ-ассистента.

Ярлык и веб-приложение: в чём разница

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

В 2026 году разница особенно заметна на iPhone. В iOS 26 и iPadOS 26 поведение изменили: по умолчанию любой сайт, добавленный на домашний экран, открывается как веб-приложение, а если человеку нужна обычная закладка, он выключает переключатель «Открыть как веб-приложение» при добавлении. Раньше это решал код сайта, теперь решает пользователь, и никаких требований к «устанавливаемости» у Safari больше нет (разбор изменений в блоге WebKit о Safari 26).

• Ярлык: открывается во вкладке браузера, ничего в сайте менять не нужно.
• Веб-приложение: своё окно без адресной строки, своя иконка, отдельная карточка в списке запущенных задач.
• На Android установленное веб-приложение попадает ещё и в общий список приложений, а не только на главный экран.
• На iPhone только у веб-приложения, добавленного на домашний экран, работают веб-пуши (WebKit о Web Push).

Как добавить сайт на экран «Домой» на iPhone

Занимает меньше минуты и работает с любым сайтом, даже с чужим. Никаких настроек и профилей не требуется.

1. Откройте нужный сайт в Safari, дождитесь полной загрузки страницы.
2. Нажмите кнопку «Поделиться» внизу экрана (квадрат со стрелкой вверх).
3. Пролистайте список действий и выберите пункт «На экран «Домой»».
4. Проверьте подпись под иконкой: она короткая, длинное название система обрежет, поэтому оставьте 10-12 знаков.
5. Если нужна обычная закладка в браузере, а не приложение, выключите переключатель «Открыть как веб-приложение».
6. Нажмите «Добавить». Иконка появится на первом свободном месте домашнего экрана.

Safari тут не единственный вариант: начиная с iOS 16.4 пункт добавления на домашний экран есть в меню «Поделиться» также у Chrome, Edge, Firefox и Orion (документация MDN об установке PWA). Удаляется такая иконка как обычное приложение: долгое нажатие и «Удалить».

По теме: Как сделать приложение из сайта в 2026: PWA, обёртки и ИИ

Как добавить сайт на главный экран на Android

Шаги в Chrome почти те же, только меню другое. Формулировки пунктов у Google меняются от версии к версии, поэтому ориентируйтесь на смысл, а не на точное слово.

1. Откройте сайт в Chrome на телефоне.
2. Нажмите на значок с тремя точками справа от адресной строки.
3. Выберите пункт про добавление на главный экран: в свежих версиях он называется «Установить и создать ярлык» (справка Google Chrome).
4. Подтвердите кнопкой «Установить» или «Добавить» и при желании поменяйте подпись.
5. Иконка появится на главном экране, а установленное веб-приложение ещё и в общем списке приложений.

Если сайт подготовлен как веб-приложение, Chrome предложит именно установку, и страница потом откроется без адресной строки. Если нет, получится обычный ярлык на браузер. В Яндекс Браузере и Samsung Internet пункт называется по-своему («Добавить на главный экран», «Add page to»), но находится там же, в меню браузера.

Что нужно вашему сайту, чтобы он ставился как приложение

Технология называется PWA (progressive web app), то есть обычный сайт, у которого есть файл-описание для операционной системы. Chrome, Edge и Samsung Internet предложат установку, если выполнены условия из документации MDN:

• сайт отдаётся по https (для локальной разработки годится localhost);
• есть подключённый манифест с полем name или short_name;
• в icons лежат иконки размером 192 и 512 пикселей;
• заданы start_url и display (или display_override);
• поле prefer_related_applications отсутствует или равно false.

Сервис-воркер для самой установки не нужен, вопреки старым инструкциям: он отвечает за работу офлайн и за пуши. У Safari, как сказано выше, требований нет вообще, но иконки из манифеста он использует, если они там указаны.

Минимальный manifest.webmanifest в корне сайта выглядит так:

{
  "name": "Кофейня Заря",
  "short_name": "Заря",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#d85a30",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

short_name это как раз подпись под иконкой, поэтому делайте её короткой. display со значением standalone убирает адресную строку. Отдельная иконка с purpose равным maskable нужна Android: система обрезает её под форму значков вашей оболочки, и без неё логотип может остаться в белом квадрате (правила полей описаны в справочнике MDN по icons).

Дальше манифест и иконка для iPhone подключаются в <head> каждой страницы:

<link rel="manifest" href="/manifest.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="theme-color" content="#d85a30">

iOS берёт иконку не из стандартного rel="icon", а из нестандартного apple-touch-icon, это отдельная строчка в разметке. Достаточно одного PNG 180 на 180 пикселей, остальные размеры система уменьшит сама (рекомендации по размерам в документации webhint). Прозрачный фон в этой иконке лучше не оставлять: на домашнем экране он станет чёрным.

Как попросить ИИ-ассистента сделать это за вас

Руками тут работы на полчаса, а голосом задачи она формулируется в три строки. Если сайт вы собирали в чате с нейросетью или в редакторе вроде Cursor, дайте ассистенту конкретное задание, а не пожелание «сделай приложение».

1. Опишите задачу целиком: «Сделай сайт устанавливаемым как PWA. Добавь manifest.webmanifest в корень с полями name, short_name, start_url, display standalone, theme_color и иконками 192 и 512 плюс maskable. Подключи манифест и apple-touch-icon 180x180 во все страницы. Иконки сгенерируй из логотипа в папку /icons».
2. Отдельно попросите не ломать существующие адреса страниц: start_url должен вести на главную вашего сайта, а не на служебный путь.
3. Попросите объяснить, какие файлы созданы и куда их залить, если хостинг вы обновляете вручную.
4. Проверьте результат на телефоне: откройте сайт и попробуйте установить его тем способом, что описан выше.

Если сайта пока нет, начинать стоит не с иконки: сначала соберите сам сайт, а PWA добавляется последним штрихом. Порядок шагов от идеи до опубликованной страницы разобран в полном руководстве по сборке сайта с ИИ, а требования к вёрстке под телефоны в статье про мобильную версию сайта: иконка на домашнем экране бессмысленна, если внутри страница не помещается в экран.

Проверяйте установку на живом телефоне, а не в режиме мобильного просмотра на компьютере. Половина проблем с иконками (обрезанный логотип, чёрный фон, «квадрат в квадрате») видна только на реальном домашнем экране, причём на Android и iPhone они разные.

По теме: Как сделать сайт на Android в 2026: с телефона, без компьютера

Что проверить и чего ждать не стоит

Ожидания вокруг PWA часто завышены, поэтому полезно сразу знать границы.

• На iPhone нет автоматического предложения установки: браузер не покажет всплывающую подсказку, поэтому путь через «Поделиться» описывают текстом прямо на странице.
• Иконку и название система кэширует при добавлении. Поменяли логотип, значит человеку придётся удалить иконку и добавить сайт заново.
• Без интернета такое приложение по умолчанию не откроется: офлайн-режим появляется только с сервис-воркером, это отдельная задача.
• В App Store и Google Play такой сайт не попадёт, ссылку на него вы распространяете сами.
• Уведомления настраиваются отдельно и требуют разрешения человека, разбор способов есть в статье про уведомления на сайте.
• Если нужна именно программа из магазина приложений, PWA это не заменит: варианты обёрток и полноценных приложений разобраны в материале о том, как сделать приложение из сайта.

Частые вопросы

Можно ли вывести на экран любой чужой сайт?

Да. Добавление на домашний экран это действие в браузере, разрешение владельца сайта не требуется. Разница только в результате: подготовленный сайт откроется как приложение, обычный как страница в браузере.

Почему на иконке скриншот страницы или серый квадрат с буквой?

Значит, браузер не нашёл подходящую картинку. На iPhone нужен apple-touch-icon, на Android иконки 192 и 512 пикселей в манифесте. После добавления файлов удалите старую иконку и создайте её заново, старая не обновится сама.

Нужен ли программист, чтобы сайт ставился как приложение?

Нет. Это один JSON-файл, две строчки в разметке и пара картинок. Если сайт собран на конструкторе, у многих платформ PWA включается галочкой в настройках; если сайт свой, задачу целиком выполняет ИИ-ассистент по промпту выше.

Иконка пропала после обновления телефона, что делать?

Добавить сайт заново тем же способом. Иконки веб-приложений хранятся не так, как приложения из магазина, и при переносе данных на новый телефон переезжают не всегда. Ссылку на сайт стоит держать в закладках, чтобы восстановление занимало полминуты.

Стоит ли делать PWA для маленького сайта визитки?

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