Генератор favicon

Где иконка влияет на впечатление

Первое и самое заметное место — вкладка браузера. Когда открыты десять вкладок, различать их помогает именно значок, а не заголовок, который обрезается. Второе — список закладок и панель закладок, где иконки стоят в ряд и глаз сравнивает их за секунду. Третье — история браузера, где страницы одного сайта выглядят одинаково, если иконки нет. Четвёртое — список приложений на телефоне и экран установки: там иконка увеличена во много раз, и видно все её детали. Пятое — поисковая выдача: Google и Яндекс подставляют иконку сайта рядом с результатом.

Отдельная история — мобильные экраны. Когда пользователь iPhone добавляет сайт на домашний экран, система берёт apple-touch-icon и сама рисует скругление и подложку. Если картинка с прозрачностью, по краям получится тёмная кайма, и это заметно. Поэтому для apple-touch-icon берут ту же монограмму, но на сплошном фоне, без альфа-канала. И ещё одна деталь, о которой забывают: система масштабирует иконку под нужный размер, и маленький логотип с тонкими линиями превращается в кашу. Монограмма из одной-двух букв переживает масштабирование лучше всего.

• Вкладка браузера: значок читается быстрее заголовка
• Панель закладок: иконки стоят рядом и сравниваются за секунду
• История браузера: страницы одного сайта должны отличаться
• Домашний экран телефона: иконка увеличена в разы
• Экран установки приложения: видны все детали иконки
• Поисковая выдача: значок стоит рядом с заголовком

Частые ошибки с иконками

Первая ошибка — положить файл не в корень, а в папку с картинками. Браузер ищет /favicon.ico, не находит и молча остаётся без иконки. Вторая — забыть про кэш: файл заменили, а браузер продолжает показывать старую версию из своего кэша. Третья — выбрать сложную картинку с мелкими деталями: в размере 16 пикселей от логотипа остаются цветные пятна, и иконка выглядит сломанной. Лишнее заранее убирает обрезка изображения. Четвёртая — взять прозрачный фон для apple-touch-icon, и iPhone обводит его тёмной каймой.

Пятая ошибка — сделать картинку вытянутой по вертикали и не подумать, что вкладка показывает квадрат. Шестая — подключить иконку ссылкой на файл, которого нет: путь с опечаткой даёт тихую 404-ошибку без следа. Седьмая — поставить слишком много размеров и потом запутаться, какой файл обновлялся: проще держать один favicon.ico с несколькими размерами внутри и один набор PNG для современных клиентов. Восьмая — использовать в favicon.ico картинку с прозрачностью, которую старые версии Windows показывают как чёрный прямоугольник.

• Файл лежит в папке, а не в корне сайта
• Иконка не обновляется из-за кэша браузера
• Сложная картинка превращается в пятна в размере 16 пикселей
• Прозрачный фон у apple-touch-icon даёт тёмную кайму
• Иконка вытянута по вертикали и не помещается в квадрат
• Ссылка в head ведёт на несуществующий файл

Разбор примера по шагам

Возьмём небольшой блог на домене example.com, который ещё не обзавёлся логотипом. Задача: сделать узнаваемую иконку без дизайнера и разложить её по всем нужным файлам. Шаг первый — источник: выбираем монограмму, пишем Toolbox Pro, и генератор берёт первые буквы двух слов — T и P. Шаг второй — форма: скруглённый квадрат с радиусом примерно пятая часть стороны, это хорошо читается и в маленьком размере, и в большом. Шаг третий — цвета: тёмно-синий фон и белый текст, контраст получается высоким, буквы не сливаются.

Дальше отмечаем размеры: 16, 32 и 48 уходят внутрь favicon.ico, 180 — в apple-touch-icon, 192 и 512 — в манифест. В превью сразу видно, читается ли монограмма в шестнадцати пикселях: если буквы сливаются, стоит взять покрупнее шрифт или упростить текст до одной буквы. После этого скачиваем файлы и копируем HTML-код: в нём уже есть готовые теги link для каждого файла и отдельная строка для манифеста. Остаётся положить файлы в корень сайта и вставить код в head.

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

Favicon, манифест, иконки приложения и другие картинки сайта

Сайт всегда набирается из нескольких наборов графики, и их легко перепутать. Favicon — это значок в браузере, маленький и всегда на виду. Фавиконка приложения — то же самое, но на экране телефона. Иконка приложения для установки — часть набора PWA, который описывается манифестом. А логотип и баннеры — это контент сайта, который показывают внутри страниц. С генератором favicon связаны первые три; если вам нужны картинки внутри страницы, посмотрите конвертер SVG в PNG и просмотрщик SVG — они помогают привести готовую векторную графику к нужным размерам.

Второй ряд инструментов касается цветов. Фон иконки и цвет букв подбираются вручную, но проверить контраст стоит отдельно: белый текст на светло-жёлтом фоне в размере 16 пикселей превращается в кашу, и помогает тут проверка контраста. Третий ряд — служебные файлы: если на сервере нужно положить готовые файлы с правильными именами, помогает генератор .htaccess, а если сайт отдаётся не с того адреса, пригодится разбор URL на части.

• Favicon живёт в браузере, логотип — на странице
• Иконки 192 и 512 нужны для установки сайта как приложения
• Контраст фона и текста проверяется отдельно от макета
• Мелкие размеры прощают простые формы и не прощают детали
• Файлы иконок кладут в корень, а не в папку ассетов
• Минимальный набор — ico, два PNG и apple-touch-icon