без значков разделы сливаются, посетитель дольше ищет контакты
- Один стиль
- общая сетка и штрих
- Форматы
- SVG, PNG и иконочный шрифт
- Ретина
- мелкие размеры прорисовываем отдельно
- Исходники в Figma
Бриф по вашим страницам занимает 1 день. В комплект входят значки интерфейса, контактов, кнопок, фавикон для вкладки браузера и главного экрана телефона, а стоимость называем после брифа, когда список знаков по разделам уже собран. Файлы для верстки и исходники передаем, а их состав фиксируем в договоре.
Зачем сайту свои иконки и что теряет сайт без них
Свои иконки или бесплатные библиотеки
Вывод
для прототипа и внутренних сервисов можно скачивать одну бесплатную библиотеку целиком, продающей странице нужен свой комплект
| Критерий | Библиотека | Отрисовка под проект |
|---|---|---|
| Стоимость | скачать бесплатно или по подписке | работа дизайнера |
| Повторяемость | те же знаки у многих | комплект только ваш |
| Стиль сайта | подгонка частичная | по макету |
| Лицензия | использовать в коммерции можно не всегда | права по договору |
| Недостающие знаки | под редкую услугу нет | дорисовываем |
| Правки | сами в редакторе | по согласованному стилю |
| Сетка | своя у каждого каталога | одна на комплект |
Что входит в разработку иконок для сайта
Анализ макета
веб-страницы проекта, сетка, штрих
Эскизы стиля
на пробных знаках
Отрисовка
всего комплекта в векторе
Состояния иконки
обычное, наведение, активное, неактивное
Размеры 16, 24, 32 и 48 пикселей
Фавикон
для вкладки и ярлыка
Экспорт
в SVG и PNG
Спрайт или иконочный шрифт
Инструкция по подключению
Файлы и права
по договору
Иконки интерфейса, кнопок и контактов
Контакты
телефон, почта, мессенджеры, адрес в шапке
Кнопки
заказать, скачать, отправить, позвонить
Корзина и заказ
карточка товара, оплата
Навигация
меню, поиск, фильтры
Преимущества и этапы
на посадочных
Соцсети
в подвале
Форматы файлов
в документах
Личный кабинет
вход (sign in), загрузка файлов (drag and drop), для экранов приложения есть дизайн интерфейса
Линейные, плоские, объемные и анимированные стили иконок
Линейные (outline)
контур настраиваемой толщины
Залитые (solid)
читаются в мелком размере
Плоские цветные (flat)
для лендингов
Двухцветные (duotone)
второй цвет выделяет деталь
Объемные и 3D
сложнее в отрисовке
Рисованные
для авторских брендов
Анимированные SVG
наведение и загрузка, про анимацию
Правило выбора
штрих берем от шрифта, радиусы от кнопок, поэтому к тонкому шрифту подходят линейные иконки
Форматы иконок для сайта в SVG, PNG и иконочном шрифте
Что в архиве
изображения SVG и PNG («пнг»), спрайт, фавикон, исходник Figma
| Формат | Вес и масштаб | Цвет и анимация | Где уместен |
|---|---|---|---|
| SVG | векторный, легкий | CSS | основной формат |
| PNG | копии 1x и 2x | нет | иконки приложения |
| Иконочный шрифт | один файл | один цвет | старая верстка |
| SVG-спрайт | один запрос | CSS | каталоги |
| base64 | раздувает CSS | нет | пара знаков |
Фавикон как иконка сайта во вкладке браузера
Картинка во вкладке называется фавикон (favicon). Браузер показывает ее рядом с названием страницы во вкладке, в закладках и истории, Яндекс ставит ее у заголовка в выдаче, а телефон выводит ее как плитку, когда страницу добавляют на главный экран. По этому знаку человек среди десятка открытых вкладок и в истории просмотров быстро понимает, какому сайту принадлежит каждая.
ICO
размер 16 на 16, а также 32 и 48 пикселей
PNG 192 и 512 пикселей
плитка Android, список icons в манифесте (Web App Manifest)
SVG
для Chrome и Firefox
Apple touch icon 180 пикселей
ярлык iPhone
HTML
строка `<link rel="icon" href="/favicon.ico">` в head, где браузер ищет файл
Как сделать иконку сайта по этапам
Бриф
список знаков
Сетка и стиль
пробные эскизы
Отрисовка
в векторе
Правки
в пределах стиля
Экспорт
форматов и спрайта
Передача
файлов
От заказчика
ссылка или макет в Figma, список разделов, при редизайне старый комплект
Сделать самому
букву логотипа на цветном квадрате можно выгрузить из Figma в PNG, для фавикона этого хватает, а комплект без общей сетки расползается по толщине
СТОИМОСТЬ
Сколько стоит дизайн иконок для сайта
Состав работ и стоимость согласуем после обсуждения задачи.
Примеры иконок, которые мы нарисовали
Бесплатный разбор
смотрим сайт и нишу без обязательств и оплаты
Сроки и гарантии
Работаем по договору от ИП без НДС: выставляем счет, закрываем работу актом, доступы к макетам и материалы передаем тоже по акту, поэтому каждое движение файлов видно в документах. Все гарантии записаны в подписанных бумагах. Состав работ и показатели входят в приложение к договору. При расхождении с ним разбираем причины, а работы продолжаем без повышения цены.
Срок
в договоре после брифа
Правки
число кругов там же
Права и исходники
по договору
Дорисовка
по отдельной договоренности
FAQ
Вопросы про иконки для сайта
Почему иконка сайта не отображается во вкладке
Чаще браузер держит старую картинку в кеше, помогает очистка кеша или новое имя файла. Реже виноваты неверный путь в теге link, файл не того размера или формат, который браузер не читает.
Можно ли сделать иконку сайта онлайн через генератор
Можно, если картинка уже есть: онлайн-генератор нарежет ее на ICO, PNG нужных размеров и добавит манифест. Нарисовать знак с нуля или целый набор иконок он не умеет, исходник готовят в редакторе.
Подключаете ли вы значки на сайт или только отдаете файлы
Подключение обсуждаем на брифе. В группе есть разработчик, и если нужна установка в верстку или CMS, вносим эту работу в договор, а без нее передаем файлы с описанием подключения для вашего программиста.
Можно ли дорисовать значки к имеющемуся набору
Да, если у набора есть исходники или хотя бы SVG. Сначала снимаем сетку, толщину штриха, радиусы, потом рисуем новые знаки и проверяем выравнивание по сетке рядом со старыми.
В каком формате отдадите исходники
Исходники готовим в Figma со всеми состояниями значков, для Illustrator можем выгрузить AI. Набор файлов выбираем на брифе, а итоговый список вносим в договор, чтобы спорных позиций не осталось.
Сколько значков нужно среднему сайту
Число зависит от разделов. Лендингу хватает знаков для преимуществ, контактов, этапов, а магазину нужны навигация, корзина, фильтры и личный кабинет. Точный список собираем на брифе по страницам.
Делаете ли анимированные иконки
Да, анимируем значки для наведения, нажатия и загрузки, а смену состояния кнопки показываем плавным переходом. Анимацию собираем в SVG или CSS, поэтому она работает без тяжелых GIF и видео.
Можно ли заказать только фавикон
Да, фавикон заказывают без набора значков. Проверяем, читается ли знак логотипа при 16 пикселях, при необходимости упрощаем рисунок и готовим файлы для браузеров, iPhone, Android.
Кому принадлежат права на набор
Объем прав на комплект и исходники зависит от задачи, поэтому условия их передачи прописываем в тексте договора. Логотип и фирменные элементы, которые вы даете для работы, остаются вашими.
Кейсы по этой услуге
1 кейс
Заказать дизайн иконок
Для нового проекта без макета в нашей группе работают дизайнер, копирайтер, разработчик, поэтому значки удобно заказать вместе с полным веб-дизайном и разработкой сайтов. Если нужен только фавикон, отметьте это отдельной галочкой в форме. Оставьте заявку со ссылкой на действующую страницу и перечнем разделов, с этого перечня начнется бриф по вашему комплекту.