Формирует favicon для всех устройств: от мобильных устройств до закладки в Windows и выдает готовый код для вставки на сайт.
-------------------------------------------
Очень стремный с виду сайт в результате дает очень много различных плюшек, которые облегчат Вам жизнь. Речь сегодня пойдет о ресурсе, на котором вы сможете сгенерировать favicon для вашего сайта, который будет идеально отображаться во всех браузерах и операционных системах.
Ресурс называется RealFaviconGenerator, ссылка будет ниже, который предлагает массу настроек по визуализации вашей иконки.
Инструкция по созданию Favicon
Для начала нужно подготовить картинку размером минимум 500x500 пикселей, чтоб наверняка. Да, она сейчас весьма большая, но не пугайтесь, сервис нам сам все обрежет. Я же буду показывать на примере своего сайта. Картинку в идеале делать с прозрачным фоном в формате png, однако я создам с черной заливкой и пропорциями 1:1 (квадрат).
После чего давим на большую кнопку с надписью "Select your Favicon picture" и загружаем свое подготовленное изображение.
Настройка под мобильные устройства
iOS — Тут все просто, я обычно оставляю все по умолчанию, а вот с Androidнужно немного потыкать кнопки.
- Здесь показаны варианты отображения вашего favicon в системе Android. Нужно будет переключаться, чтобы посмотреть все внесенные изменения.
- Три радио кнопки отвечающие за формирование иконки, если человек добавил ваш сайт, как закладку: По умолчанию, добавить фон и добавить тень. Я люблю использовать первый вариант, хотя, как до приходилось добавлять фон и даже тень. Однако все по ситуации, поэтому смотрите сами что и как тут лучше будет.
- Название закладки
- Это цвет темы. То, как будет в списке открытых приложений, а также в браузере chrome (цвет вкладки).
Там же можно перейти и в другие настройки и задать, как будет генерироваться favicon (можно сделать уникальный для каждой системы), ссылку, которая будет добавляться в закладки и т.д. однако там уж сами. Я все оставляю по умолчанию.
Настройка для Windows
Параметры для системы Windows предельно просты. Задаете фоновый цвет, варианты размеров ну и можете поменять иконку, к примеру, с прозрачным фоном. Я, опять же, пойлу по ленивому пути и оставлю все как есть.
Параметры для macOS Safari
Для текущего положения я всегда меняю на иконку с прозрачностью, чтоб она корректно отображалась, как в закладках, так и на это ужасном баре сверху над клавиатурой в макбуках. Ну а так же выставляю свой акцентный цвет, чтоб бросалось в глаза, так сказать.
Опции генератора
По идее также настраиваем под себя, однако загляните во вкладку "Компрессия". Выставляйте значение от 60 до 75 процентов. Так картинка будет весить поменьше, а разницы в качестве почти не видно.