Очень стремный с виду сайт в результате дает очень много различных плюшек, которые облегчат Вам жизнь. Речь сегодня пойдет о ресурсе, на котором вы сможете сгенерировать favicon для вашего сайта, который будет идеально отображаться во всех браузерах и операционных системах. Другими словами, представляю генератор favicon для всех устройств.
Ресурс называется RealFaviconGenerator, ссылка будет ниже, который предлагает массу настроек по визуализации вашей иконки.
Инструкция по созданию Favicon
Для начала нужно подготовить картинку размером минимум 500×500 пикселей, чтоб наверняка. Да, она сейчас весьма большая, но не пугайтесь, сервис нам сам все обрежет. Я же буду показывать на примере своего сайта. Картинку в идеале делать с прозрачным фоном в формате png, однако я создам с черной заливкой и пропорциями 1:1 (квадрат).
После чего давим на большую кнопку с надписью «Select your Favicon picture» и загружаем свое подготовленное изображение.
Настройка под мобильные устройства
iOS — Тут все просто, я обычно оставляю все по умолчанию, а вот с Android нужно немного потыкать кнопки.
- Здесь показаны варианты отображения вашего favicon в системе Android. Нужно будет переключаться, чтобы посмотреть все внесенные изменения.
- Три радиокнопки отвечающие за формирование иконки, если человек добавил ваш сайт, как закладку: По умолчанию, добавить фон и добавить тень. Я люблю использовать первый вариант, хотя, как до приходилось добавлять фон и даже тень. Однако все по ситуации, поэтому смотрите сами что и как тут лучше будет.
- Название закладки
- Это цвет темы. То, как будет в списке открытых приложений, а также в браузере chrome (цвет вкладки).
Там же можно перейти и в другие настройки и задать, как будет генерироваться favicon (можно сделать уникальный для каждой системы), ссылку, которая будет добавляться в закладки и т.д. однако там уж сами. Я все оставляю по умолчанию.
Настройка для Windows
Параметры для системы Windows предельно просты. Задаете фоновый цвет, варианты размеров ну и можете поменять иконку, к примеру, с прозрачным фоном. Я, опять же, пойлу по ленивому пути и оставлю все как есть.
Параметры для macOS Safari
Для текущего положения я всегда меняю на иконку с прозрачностью, чтоб она корректно отображалась, как в закладках, так и на это ужасном баре сверху над клавиатурой в макбуках. Ну а так же выставляю свой акцентный цвет, чтоб бросалось в глаза, так сказать.
Опции генератора
По идее также настраиваем под себя, однако загляните во вкладку «Компрессия». Выставляйте значение от 60 до 75 процентов. Так картинка будет весить поменьше, а разницы в качестве почти не видно.
Мои настройки
Небольшое видео с моими параметрами, чтоб наглядно увидели, что и как тут у меня настроено
Загрузка Favicon на сайт
Нажимаем на кнопку генерации favicon и получаем на выходе архив для загрузки на сайт со всеми исходниками + код для вставки примерно такой, который помещаем между <head>:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f7a613"> <meta name="msapplication-TileColor" content="#000000"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#000000">
Архив распаковываем в корневой каталог сайта (это туда, где index.php/html лежит и прочие каталоги). Однако я рекомендую создать отдельную папку favicon и закинуть все туда, кроме favicon.ico, его все-таки положить в корень сайта и прописать следующую: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Однако помните, что если вы закинули все в папку, то нужно поменять и сами пути с href="/apple-touch-icon.png" на href="favicon/apple-touch-icon.png". Ну и так же не обосритесь со слешами при указании пути. В моем случае при заливке в коневой каталог их ставить не нужно, пример: href="apple-touch-icon.png".
На этом собственно и можно заканчивать небольшое повествование и разбор данного сервиса. Я им пользуюсь постоянно, однако некоторые моменты я убираю, а иногда добавляю что-нибудь от себя. Тут уж смотрите сами, как вам действовать. Можете просто картинки только оставить, а дополнительные файлы не подключать.
Однако помните одно, как минимум у вас должно быть:
favicon.ico в корне сайта и, так же, <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">, что как раз и подключает первый файл
