Размеры favicon, которые на самом деле нужны браузерам и устройствам

Favicon раньше означал одно маленькое изображение 16×16. Теперь вкладка браузера, ярлык на главном экране телефона, панель закладок и сенсорная иконка Apple — каждый ожидает свой размер, и предоставление только одного оставляет некоторые из этих контекстов либо размытыми, либо показывающими общую резервную иконку вместо вашей.

Почему одного размера недостаточно

Иконка 16×16, увеличенная, чтобы заполнить слот иконки главного экрана 180×180, выглядит точно так же пиксельно, как любое маленькое изображение, растянутое до большого размера — нет способа добавить деталь, которой не было в источнике. У каждого контекста, где появляется favicon, есть своё ожидаемое разрешение, и современная практика — предоставлять набор размеров, а не полагаться на то, что браузер плохо увеличит один маленький файл.

Размеры, которые стоит покрыть

• 16×16 и 32×32 — классические размеры favicon, используемые во вкладках браузера и списках закладок в большинстве настольных браузеров.
• 180×180 — размер, ожидаемый Apple для иконки главного экрана, когда страница добавляется на главный экран iPhone или iPad.
• 192×192 и 512×512 — используются Android и манифестами веб-приложений для иконок главного экрана и экранов загрузки в устанавливаемых веб-приложениях.

Сохранение читаемости дизайна при 16px

Генератор favicon берёт исходное изображение и создаёт сразу весь набор стандартных размеров, полностью в вашем браузере — но никакой генератор не может исправить дизайн, который изначально не работает при малых размерах. Мелкая деталь, тонкие линии и мелкий текст полностью исчезают при 16×16; простая, жирная форма или буква, остающаяся узнаваемой при уменьшении, — вот что действительно читается чётко во вкладке браузера, независимо от того, сколько размеров из неё создано.