Как создать фавикон.

Откройте «Генератор фавиконов / ICO» и выберите «Изображение». Загрузите PNG, JPG, JPEG, WebP или GIF, или выберите «Попробовать образец». В примере используется favicon-orbit.png, фиолетовый орбитальный знак размером 512 × 512 пикселей с прозрачными углами. Входной файл весит 202,491 байт.

Для бренда без готового логотипа выберите «Текст» на странице инструмента. Введите одну или две буквы и выберите «Продолжить». Редактор предлагает шрифты Modern sans, Classic serif и Monospace, а также отдельные цвета текста и фона. Допускается до трех символов, но дополнительные символы могут стать трудноразличимыми при малых размерах.

Сохраните исходное изображение. Генератор создает новые файлы иконок и не перезаписывает исходник. Входной файл GIF станет статичной иконкой, а не анимированным фавиконом.

Для монограммы меню «Шрифт» начинается с трех встроенных стилей. Выберите «Использовать системные шрифты» в поддерживаемом браузере на компьютере и разрешите доступ, чтобы добавить шрифты, установленные на вашем устройстве. Используйте стрелки «назад» и «вперед», чтобы сравнить соседние шрифты, или выберите семейство и изучите живой предпросмотр, особенно при 16 пикселях. Шрифты остаются на вашем устройстве; встроенные стили работают без разрешений.

Редактор отображает светлые и темные вкладки браузера, а также превью в распространенных размерах иконок. Сначала проверьте пример размером 16 пикселей; это самый строгий тест на то, останется ли знак узнаваемым. Превью Apple Touch представляет экспорт размером 180 пикселей и отображается в рабочей области меньше.

На телефоне откройте «Настройки». Оставьте «Создать из» установленным на «Загруженное изображение», а «Подгонка изображения» — на «Показать все изображение». Для этого образца установите «Отступ вокруг контента» на 0 и включите «Прозрачный фон». Исходник уже содержит свою собственную закругленную фиолетовую форму и чистые поля, поэтому ему не нужен дополнительный цветной фон.

С другим исходником «Показать все изображение» сохраняет края, в то время как «Заполнить иконку» может их обрезать. «Закругленный квадрат», «Квадрат» и «Круг» определяют внешнюю форму. «Прозрачный фон» сохраняет прозрачные области, но не может удалить непрозрачный фон, уже нарисованный на фотографии. Проверяйте самое маленькое превью после каждого изменения кадрирования.

В разделе Download выберите Website icon package (ZIP) для этого примера. Оставьте Website name как My website для образца или замените его на реальное название бренда для вашего проекта. Это имя используется в site.webmanifest; оно не добавляется как текст поверх изображения.

Выберите Start. Браузер создаст семикадровый favicon.ico с квадратными изображениями размером 16, 24, 32, 48, 64, 128 и 256 пикселей. Он также создаст PNG иконки размером 16, 32, 48, 180, 192 и 512 пикселей, манифест и инструкции по установке. Результатом будет один ZIP-файл, а не отдельная кнопка загрузки для каждой иконки.

Если вам нужен только классический favicon.ico, выберите вместо этого Multi-size ICO. Это полезно, когда платформа веб-сайта принимает загрузку ICO и не требует отдельного пакета.

При нажатии Download сохраняется website-icons.zip. Реальный рабочий пример содержит девять файлов и имеет размер 304,351 байт. Сравнение выше показывает исходный файл размером 512 пикселей рядом с подлинным кадром размером 256 пикселей, извлеченным из экспортированного ICO, а не имитацию скриншота браузера.

Распакуйте ZIP, загрузите файлы иконок в корневую папку вашего сайта и прочитайте INSTALL.txt. Он включает HTML теги ссылок для ICO, PNG иконки, Apple Touch иконки и веб-манифеста. Если вы размещаете файлы в подпапке, обновите как пути HTML, так и пути к иконкам внутри site.webmanifest.

Проверьте свой сайт в новой вкладке браузера и на устройствах, которые вас интересуют. Браузеры могут кэшировать фавиконки, поэтому старая иконка не является доказательством того, что установка не удалась. Сохраните исходное изображение и скачанный пакет перед обновлением редактора, так как обновление возвращает на главную страницу инструмента.