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

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

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

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

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

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

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

Добавьте сайт на экран «Домой» через меню «Поделиться» в Safari. Способ работает с любым сайтом, даже с чужим. Никаких настроек и профилей не требуется.

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

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

По теме: Как вынести ярлык сайта на рабочий стол: Chrome, Яндекс, Edge, Safari

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

В Chrome откройте меню с тремя точками → «Установить и создать ярлык» и выберите «Установить» для веб-приложения в своём окне или «Создать ярлык» для обычной закладки. Формулировки пунктов у Google меняются от версии к версии, поэтому ориентируйтесь на смысл.

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

Чтобы удалить установленное веб-приложение, откройте «Настройки» → «Приложения» → «Показать все приложения», выберите приложение и нажмите «Удалить».

Chrome позволяет вручную установить любой сайт, даже без манифеста. У подготовленного сайта браузер возьмёт из манифеста название и иконку, а также может сам предложить установку.

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

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

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

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

По критериям Chrome поле display должно содержать fullscreen, standalone, minimal-ui или window-controls-overlay; значение browser не подходит. Прежде чем предложить установку, Chrome также ждёт, что посетитель хотя бы раз нажмёт на страницу и проведёт на ней не меньше 30 секунд, а само приложение ещё не будет установлено.

Сервис-воркер для самой установки не нужен, вопреки старым инструкциям: он отвечает за работу офлайн и за пуши. У 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">

Для иконки на экране «Домой» укажите apple-touch-icon отдельной строкой в разметке; стандартный rel="icon" для этого не используется. С iOS 15.4 Safari берёт иконку из icons манифеста, но только если apple-touch-icon не задан, а у иконки нет purpose или он равен any. Если apple-touch-icon есть, он важнее, поэтому это самый надёжный способ задать иконку для iPhone.

Достаточно одного 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 они разные.

По теме: Как сделать закладку сайта в браузере: Chrome, Edge, Safari

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

Проверьте вид иконки на телефоне и настройте отдельно работу без интернета и уведомления, если они нужны: добавление сайта на экран этих возможностей не даёт.

• На iPhone нет автоматического предложения установки: браузер не покажет всплывающую подсказку, поэтому путь через «Поделиться» описывают текстом прямо на странице.
• Иконку и название система кэширует при добавлении. На iPhone и у простых ярлыков после смены логотипа удалите иконку и добавьте сайт заново. Установленный в Chrome на Android WebAPK обновляет name, short_name и icons из манифеста автоматически: при запуске приложения Chrome проверяет изменения не чаще раза в 24 часа, а за новой версией обращается, когда все окна приложения закрыты, телефон на зарядке и подключён к Wi-Fi.
• Без интернета такое приложение по умолчанию не откроется: офлайн-режим появляется только с сервис-воркером. Его настройка будет отдельной задачей.
• Добавление на домашний экран не публикует сайт в App Store или Google Play. Для магазинов PWA упаковывают отдельно; до этого ссылку на сайт вы распространяете сами.
• Уведомления настраиваются отдельно и требуют разрешения человека, способы описаны в статье про уведомления на сайте.
• Если нужна программа из магазина, выберите обёртку или полноценное приложение по руководству «Как сделать приложение из сайта».

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

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

Да. Вы добавляете сайт через браузер, разрешение владельца не требуется. На iPhone с iOS 26 любой сайт по умолчанию открывается как веб-приложение; для обычной закладки выключите переключатель «Открыть как веб-приложение». В Chrome на Android любой сайт можно установить вручную. У подготовленного сайта браузер возьмёт название и иконку из манифеста и может сам предложить установку; обычный ярлык вы выбираете отдельно.

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

Значит, браузер не нашёл подходящую картинку. На iPhone задайте apple-touch-icon или, начиная с iOS 15.4, иконки в манифесте без purpose либо со значением any: приоритет остаётся у apple-touch-icon. На Android нужны иконки 192 и 512 пикселей в манифесте. После добавления файлов на iPhone и у простых ярлыков удалите старую иконку и создайте её заново. Установленный в Chrome на Android WebAPK обновляет иконку сам, но не сразу: новая версия приходит, когда все окна приложения закрыты, телефон на зарядке и подключён к Wi-Fi.

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

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

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

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

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

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