Фавикон, страница 404 и страница спасибо - три мелких элемента, по которым посетитель судит, доведён ли лендинг до конца. Серый квадрат вместо иконки, стандартная ошибка сервера вместо человеческой 404 и голая надпись "заявка отправлена" выглядят как недоделанный сайт. На все три уходит полтора-два часа: иконку собирают из знака или буквы, на 404 дают ссылку на главную и контакт, на странице спасибо подтверждают заявку и называют срок.
Что выдаёт сырой лендинг за первые секунды
Посетитель не видит код и не знает, сколько часов ушло на вёрстку. Зато он видит favicon во вкладке браузера, страницу 404 при опечатке в адресе и экран после отправки заявки. На все три элемента уходит около часа работы, но именно они показывают, доведён сайт до конца или брошен на предпоследнем шаге.
Серый квадрат вместо иконки для сайта заметен во вкладке раньше заголовка. Стандартная ошибка сервера вместо человеческой страницы 404 выглядит как поломка. Посетитель не формулирует претензию словами, просто у него остаётся ощущение сырости. С таким ощущением заявку оставляют реже.
Разберём все три элемента: зачем они нужны, как создать иконку без дизайнера и что написать на служебных страницах.
Фавикон: квадрат, который видно везде
Фавикон - это маленькая картинка рядом с названием вкладки. Название сложилось из favorite icon, иконка для избранного. Базовый размер 16 на 16 пикселей, поэтому элемент кажется ерундой. Но список мест, где он показывается, длиннее, чем принято думать:
- вкладки, закладки и история браузера;
- выдача Яндекса: иконка стоит рядом с адресом каждого сайта;
- ярлык на экране телефона, если посетитель сохранил сайт;
- список открытых вкладок на мобильном.
Пункт про выдачу самый весомый. Сайт стоит в списке из десяти результатов, и у большинства конкурентов иконка есть. Пустой квадрат в этом ряду работает против вас ещё до первого клика.
На телефоне это заметнее, чем на компьютере: в мобильной выдаче Яндекса фавикон стоит крупно, слева от названия сайта. Для лендинга, который живёт на рекламном трафике с телефонов, это первая картинка, которую видит будущий посетитель.
Как создать иконку для сайта без дизайнера?
Фавикон не обязан повторять логотип целиком. В маленьком квадрате не читаются мелкие детали и надписи. Читается одна форма и один-два цвета.
Если логотип есть
Возьмите узнаваемую часть: знак без текста или первую букву. Подложите фон фирменного цвета и проверьте, как иконка выглядит в тёмной теме браузера. Белый знак на прозрачном фоне в тёмной теме просто исчезает.
Если логотипа нет
Первая буква названия на цветном фоне закрывает вопрос за 10 минут. Сервис favicon.io собирает такую иконку прямо в браузере: выбираете букву, шрифт, цвет фона и скачиваете готовый набор файлов всех нужных размеров. Для лендинга услуги этого достаточно. Если нужен полный контроль, та же иконка рисуется в бесплатной Figma за полчаса.
Проверка
Уменьшите картинку до 16 на 16 пикселей и посмотрите без увеличения. Если форма превратилась в кашу, упрощайте дальше: убирайте детали, утолщайте линии.
Как подключить фавикон
Рабочий минимум - два файла в корне сайта и пара строк в разделе head:
favicon.icoв корне. Браузеры запрашивают его по этому адресу сами, даже если тега в HTML нет;- PNG размером 32 на 32:
<link rel="icon" type="image/png" href="/favicon-32.png">; - картинка 180 на 180 для ярлыка на айфоне:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">.
Формат ICO остался от старых браузеров, но выбрасывать его рано: раз браузер сам стучится по адресу /favicon.ico, пусть там лежит настоящий файл, а не ошибка 404.
В конструкторах файлы руками класть не нужно: иконка загружается одним полем в настройках сайта. Там же обычно живёт и заголовок вкладки.
В выдаче Яндекса иконка появится не сразу. Робот забирает фавиконы отдельным обходом, по моему опыту обновление занимает от нескольких дней до пары недель. Это нормально, чинить ничего не нужно.
Страница 404: откуда битые адреса у одностраничника
Кажется, что лендингу из одной страницы ошибка 404 не грозит. На практике битые адреса появляются регулярно:
- опечатка при наборе адреса руками;
- в объявлении осталась ссылка на страницу акции, которую вы удалили;
- мессенджер склеил ссылку со знаком препинания при пересылке;
- в письме полугодовой давности живёт старый адрес.
Без своей страницы ошибки посетитель увидит стандартный экран хостинга: белый фон, надпись Not Found, иногда реклама самого хостера. Для человека это выглядит как мёртвый сайт. Он закроет вкладку, а рекламный клик, за который вы заплатили, пропадёт.
Чем дольше живёт сайт, тем больше у него таких хвостов: старые ссылки копятся в чатах, письмах и закладках. Свою страницу 404 достаточно сделать один раз, дальше она работает без обслуживания.
Что разместить на странице 404?
Задача страницы - вернуть человека на маршрут. Хватит четырёх элементов.
- Объяснение по-русски: "Такой страницы нет. Возможно, в адресе опечатка".
- Ссылка на главную.
- Телефон или кнопка мессенджера: вдруг человек шёл оставить заявку.
- Оформление в стиле сайта: те же цвета, шрифт, логотип.
Шутки и мемы на странице ошибки не обязательны. Смешная картинка не вредит, но и не возвращает посетителя. Возвращает ссылка. Если очень хочется, добавьте лёгкую фразу в тоне сайта, но после ссылки, а не вместо неё.
На обычном хостинге страница подключается одной строкой в файле .htaccess: ErrorDocument 404 /404.html. В конструкторах страница ошибки назначается в настройках. Проверка занимает секунды: допишите к адресу сайта любую ерунду после слеша и посмотрите, что откроется.
Страница спасибо: её видят самые ценные посетители
Экран после отправки формы видит человек, который только что оставил вам телефон. Самый тёплый посетитель за весь день. Показывать ему голую надпись "Заявка отправлена" - значит упустить момент.
Что стоит разместить на этом экране:
- подтверждение, что заявка дошла;
- что будет дальше и когда: "Перезвоню в течение часа в рабочее время";
- запасной канал: ссылка на Telegram, если звонок неудобен;
- полезное действие на выбор: посмотреть кейсы, скачать прайс, подписаться на канал.
Конкретные формулировки для этого экрана разобраны в статье Тексты для страницы благодарности.
У страницы спасибо есть и техническая роль. Отдельный адрес вида /thanks/ - самый надёжный способ настроить цель в Метрике: цель на JavaScript-событии ломается при первой же правке формы, а адрес страницы живёт годами. Настройте цель на визит этой страницы в первый же день, пока трафика мало.
Час работы против впечатления о сайте
Сведём затраты и отдачу в одну таблицу.
| Элемент | Время | Кто видит | Что даёт |
|---|---|---|---|
| Фавикон | 15-20 минут | все посетители и поиск | узнаваемость во вкладках и выдаче |
| Страница 404 | 20-30 минут | переходы по битым ссылкам | возврат на сайт вместо закрытой вкладки |
| Страница спасибо | 20-30 минут | каждый, кто оставил заявку | подтверждение, ожидания, цель в Метрике |
| Заголовок вкладки | 5 минут | все посетители и поиск | сайт находят среди открытых вкладок |
| Превью для репостов | 30 минут | получатели ссылки в мессенджерах | карточка с картинкой вместо голой строки |
Суммарно полтора-два часа на всё. Для сравнения: блок отзывов собирается дольше, а видит его только тот, кто долистал до середины страницы.
Посетитель не видит вашу вёрстку. Он видит вкладку, страницу ошибки и экран после заявки. По ним и судит.
Ещё две мелочи из той же серии
Заголовок вкладки. Если в title написано "Главная" или "Сайт", среди двадцати открытых вкладок ваш лендинг не найти. Напишите услугу и город: "Кухни на заказ в Твери". Длину держите в пределах 50-60 знаков, иначе хвост обрежется. Тот же текст увидит поисковик в выдаче.
Превью при репосте. Ссылку на лендинг пересылают в Telegram и WhatsApp: клиент отправляет жене, подрядчик заказчику. Без разметки вместо карточки с картинкой уходит голая строка адреса. Как настроить карточку, разобрано в статье OG-превью и фавикон.
Как проверить свой сайт за десять минут
- Откройте сайт и посмотрите на вкладку: иконка на месте, заголовок читается.
- Допишите к адресу любую ерунду вроде /test и оцените, что открылось.
- Отправьте тестовую заявку и посмотрите на экран после неё.
- Перешлите ссылку самому себе в Telegram и проверьте превью.
Если лендинг делает исполнитель, включите эти пункты в приёмку. Полный список проверок есть в статье Как проверить готовый лендинг перед приёмкой.
Частые вопросы
Можно ли использовать разные фавиконы для светлой и тёмной темы браузера?
Технически можно через media-query в теге link, но для лендинга это лишняя сложность. Проще один раз проверить, как иконка выглядит в обеих темах, и подобрать вариант, который не теряется ни в одной из них.
Что делать, если хостинг не даёт настроить свою страницу 404?
Такое встречается на самых простых тарифах. Тогда подключите страницу через настройки конструктора, если он это позволяет, либо смените тариф: одностраничник без нормальной 404 теряет рекламные клики на битых ссылках.
Можно ли отследить, сколько людей попадает на страницу 404?
Да, заведите отдельную цель на посещение этого адреса в Метрике или посмотрите отчёт по посещённым страницам в общем интерфейсе. Если счётчик визитов на 404 растёт, ищите источник битых ссылок: рекламу, старые посты, письма.
Нужно ли менять фавикон, если у сайта поменялся логотип?
Да, и сразу. Старая иконка во вкладке и в выдаче будет спорить с новым фирменным стилем. Обновление занимает те же 15-20 минут, что и первая настройка.
Коротко
Фавикон, страница 404 и страница спасибо вместе делаются за полтора-два часа. Иконку соберите из знака или первой буквы, проверьте в размере 16 на 16 и в тёмной теме. На странице 404 дайте объяснение, ссылку на главную и контакт. На странице спасибо подтвердите заявку и скажите, когда перезвоните.
Эти элементы не поднимут конверсию на проценты, которые видно в отчёте. Они работают тише: убирают поводы усомниться в сайте у человека, который уже почти решился. Час-полтора работы за такой эффект - недорого.
