Комментарии 33
Шаг 3: Создание png изображений
…
Или вы можете сделать то же самое в Inkscape:
inkscape ./icon.svg --export-width=512 --export-filename="./icon-512.png"
inkscape ./icon.svg --export-width=192 --export-filename="./icon-192.png"
Можно использовать для этих целей и утилиту convert из пакета imagemagick:
$convert -geometry 512 icon.svg icon-512.png
$convert -geometry 192 icon.svg icon-192.png
Ох я уже и не вспомню сколько лет я пользуюсь https://realfavicongenerator.net/ и не нужно никаких танцев с бубнами, а только квадратная версия вашего фавикона на входе
Статья как раз объясняет почему выдача realfavicongenerator.net сильно устарела
Теперь перейдём к тому минимальному набору, который я вывел из своих исследований и экскрементов.
Зачетная опечатка )
А есть ли смысл делать precomposed для Apple?
Зависит от дизайна логотипа. Но я бы сначала сделал обычную favicon и делал precomposed, только если дизайнер просит (у него есть какая-то хитрая идея).
Вроде бы, все современные iOS умеют сами скруглять иконки. Соотвественно, нужна ли поддержка старых систем через precomposed
С самой первой версии, вроде, iOS сама скругляла (поэтому у precomposed и более длинное имя).
precomposed нужен если тебе не подходит то скругление, что сама делает iOS.
Так другое скругление не сработает – iOS не скругляет иконки, а делает Squircle
Итого: шлем хотелки Apple и Google и сокращаем список с 4-х до 2-х (ico и svg), с перспективой до 1-го (svg).
Без этих «хотелок» на телефоне сайт будет некрасиво выглядеть.
Например, большие иконки используются не только для PWA, но и для списка часто посещаемых сайтов.
Кто-то нам запрещает запихнуть в ICO несколько вариантов, вплоть до 256x256 в TrueColor?
Размер. Браузер скачает все размеры в одной файле, даже если браузер знает, что ему нужен какой-то один размер.
ICO-формат был разработан для десктопа, а не для браузера.
На фоне "веса" всей страницы этот размер будет ниочем. И потом, нас же никто не заставляет запихивать в ICO все поддерживаемые им форматы.
А смысл качать больше, если есть есть SVG и PNG?
SVG не всеми поддерживается, а что по размеру окажется больше - ICO или PNG - еще бабка надвое сказала, зависит от палитры.
Про размер — речь про другое. Если у тебя один ICO-файл с несколькими размерами, то он будет весить, чем отдельные файлы под конкретный размер.
А какие картинки лучше сжимаются в ICO и хуже в PNG со словарём?
ЕМНИП если цветов мало и мало деталей, то выгоднее ICO.
Почему?
PNG умеет в ту же систему сжатия через словарь. Но у него ещё есть и более совершенные алгоритмы определения закономерностей.
Мне кажется это старое заблуждение от людей, которые не использовали программы сжатия PNG, которые как раз включали режим словаря.
Возможно, мой опыт сжатия PNG ограничивается функцией Save for Web Photoshop с ее настройками. Вот там PNG давал зачастую худший вариант, чем, скажем, GIF.
Да, Save for Web Photoshop как раз не умеет обычно в словарь.
Используйте https://squoosh.app/
Почему?
PNG умеет в ту же систему сжатия через словарь. Но у него ещё есть и более совершенные алгоритмы определения закономерностей.
Мне кажется это старое заблуждение от людей, которые не использовали программы сжатия PNG, которые как раз включали режим словаря.
Размер. Браузер скачает все размеры в одной файле, даже если браузер знает, что ему нужен какой-то один размер.
ICO-формат был разработан для десктопа, а не для браузера.
Мы кого-то забыли?
Конечно, есть и другие варианты favicon. Дальше я объясняю, почему они устарели. Возможно, пришло время попрощаться с некоторыми менее успешными форматами.
Ага, формат фактического отображения вы забыли. А раз забыли его, то и все прочее как-то немного мимо кассы.
А png для статьи кто оптимизировать будет..)
Зачем что-то рисовать, когда есть emoji?
Можно просто создать пустую SVG-картинку. Нашинковать туда разных эмодзи в разных ракурсах - fav-икона готова.
На сколько же мы усложнили такую простую вещь за много лет эволюции...
Предполагается, что у вас уже есть svg - если залить png, то создаст только png)
Процесс векторизации довольно сложная штука. Недавно запустили ai, который неплохо с этим справляется (https://vectorizer.ai). Возможно, со временем подключусь к их апи и тоже добавлю такой функционал. Но апи платное, так что это не точно)
Как создавать иконки сайтов в 2022 году — всё о favicon