Фавиконка сайта
Готовит иконку сайта во всех нужных размерах — от 16 до 512 пикселей — и складывает в архив вместе с готовым кодом для вставки.
Что делает
Готовит из одной картинки иконку сайта во всех размерах, которые сегодня спрашивают браузеры и телефоны, — от 16 до 512 пикселей, — и складывает их в архив вместе с готовыми строчками кода для вставки в шапку страницы. Вся работа идёт прямо в браузере: файл никуда не отправляется и не сохраняется на сервере.
Когда пригодится
Сайт готов, а во вкладке вместо иконки серый лист бумаги. Логотип обновили, и надо переделать весь набор иконок разом. Страницу добавляют на домашний экран телефона, а там оказывается пустой квадрат. Не хочется разбираться, какие именно размеры нужны и как их подключают.
Что подготовить
Одну картинку — лучше квадратную. Годится логотип, монограмма, знак, простая эмблема. Формат подойдёт любой, который открывает браузер. Берите изображение с запасом по размеру: если исходник меньше 512 пикселей по стороне, крупные иконки в наборе получатся мягкими. Прозрачный фон сохранится, и на тёмной панели браузера иконка не окажется в белом прямоугольнике. Главное — простота рисунка. В шестнадцати пикселях мелкие детали, тонкие линии и надписи превращаются в мазок. Если у логотипа есть короткий знак без текста, для иконки берите именно его.
Как заполнить
Картинка Выберите файл с логотипом или знаком. Лучше квадратный: неквадратное изображение обрежут по центру, и то, что было у краёв, в иконку не попадёт. Хотите оставить всё — подготовьте квадрат заранее с полями по бокам, это умеет «Обрезать под формат». Оставьте вокруг рисунка немного воздуха. Знак, упирающийся в самый край, выглядит тесно во вкладке и обрезается на закруглённых плитках телефона.
Что получится
Архив с полным набором иконок и фрагментом кода, который вставляется в шапку сайта как есть. Распакуйте архив в корень сайта, а строчки скопируйте в <head> каждой страницы или в общий шаблон. Новая иконка появляется во вкладке не сразу: браузер держит прежнюю в кеше. Проверяйте в окне без истории или после принудительного обновления страницы.
Частые ошибки
Сложный логотип целиком. С текстом и мелкими элементами в маленьком размере получится пятно. Берите один знак. Мелкий исходник. Картинка в 64 пикселя не станет чёткой в 512 — крупные иконки будут мыльными. Неквадратная картинка. Её обрежут по центру, и боковые части исчезнут. Забыли про код. Файлы в корне сайта сами по себе не подключаются; без строчек в шапке телефон иконку не найдёт.
