Комментарии 11
Лучше требовать от дизайнера весь набор иконок. Потому, что какой бы векторной ни была иконка, сжав с 512х512 до 16х16, получится каша.
Согласен с выводом. Я б сказал так, что векторность тут значения не имеет, а имеет значение сам дизайн. Дизайнер мог столько мелких деталей в лого забабахать, что при уменьшении до 16x16 действительно выйдет непонятная муть. Дизайнера работа сделать такую иконку, чтобы она была понятной и различимой при уменьшении до 16х16.
Кстати, из личного опыта, даже современные браузеры, при наличии всех крутых svg и png иконок, по умолчанию, при наличии ico иконки, грузят именно ico иконку. Я когда настраивал иконку у себя на сайте, заметив это, нехило удивился.
В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого.
Что значит «контейнер динамический»? В контейнере (файле) .ico могут быть несколько картинок (даже разных). Обычно, вроде бы, в favicon включают просто несколько размеров картинки, чтобы браузер выбрал подходящую. Там могут быть как малые разрешения, так и большие.
Не раскрыт вопрос переключения светлой/темной темы в ОС - фавиконка должна реагировать. На сегодняшний день эта фича уже необходимость. И там есть свои нюансы.
любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.
Только сервер ничего не ищет. Это различные веб-клиенты (в том числе и браузеры) по необходимости делают запрос на адрес '/favicon.ico'.
Как следствие, не нужно вслепую следовать правилу:
Фавиконку в формате ico обязательно нужно класть в корень проекта
Нужно, чтобы веб-сервер отдавал иконку по адресу '/favicon.ico'
Почему ни кто не говорит про избыточность ? Ведь если вы предоставляете возможность браузеру клиента, скажем под Mac OS взять 512х512 он обязательно её возьмет (наверное... авторы статьи забыли уточнить устройства на которых это можно проверить, ну да вы не первые и не последние), а вот кому от этого станет лучше ? Каждый пользователь зашедший с такого устройства будет тянуть лишние байты, ради чего...? что бы браузер сделал лишнюю оптимизацию ужав 512х512 до 40х40 ? Вектор это конечно хорошо, но опять же не всегда.... надо смотреть по размерам файла.
Немного автоматизации для этого всего:
- Сгенерировать набор иконок и файлы манифестов - https://realfavicongenerator.net/
- Скрипт для nodejs - https://www.npmjs.com/package/favicons
- Плагин к webpack - https://www.npmjs.com/package/favicons-webpack-plugin
Используйте фавиконки правильно