Из чего состоит набор фавиконок
Одной картинки давно недостаточно: браузеры на вкладке, iPhone на «домашнем экране», Android и PWA-приложения
запрашивают иконку разных размеров и в разных форматах. Инструмент рисует квадратную иконку сразу в шести
размерах — 16, 32, 48, 180, 192 и 512 пикселей — из одной картинки или из текста на цветном фоне, и добавляет
классический favicon.ico.
Два способа сделать иконку
Загрузите картинку — она обрежется по центру до квадрата, лишние края по бокам уйдут. Или впишите одну-две буквы либо эмодзи и выберите цвет фона и текста — получится простая плашка без внешнего файла, как логотип многих сервисов и заглушки для проектов на старте.
Формат .ico
Файл favicon.ico — это контейнер ICONDIR, который может хранить несколько картинок разного размера
в одном файле: браузер сам выбирает подходящую. Современный формат допускает хранить в нём обычные PNG-кадры
(так делают со времён Windows Vista), инструмент собирает такой файл из иконок 16×16, 32×32 и 48×48 прямо в
браузере, без сторонних сервисов.
Подключение на сайте
Скачайте ZIP, распакуйте файлы в корень сайта и вставьте строки из блока «HTML для <head>» в тег <head> каждой страницы (или общий layout/шаблон). Порядок строк не важен, но лучше не менять имена файлов — они совпадают со ссылками в сниппете.
Пример
Строка <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> говорит
iOS, какую иконку показать, если посетитель добавит сайт на домашний экран — без неё система обрежет
произвольный скриншот страницы.