Фавикон и веб-манифест

Одна картинка на входе — весь комплект на выходе: настоящий ICO с несколькими размерами, иконка Apple, сведённая так, как того требует Apple, PNG для манифеста, сам веб-манифест и блок HTML, который остаётся вставить. Ещё он показывает обрезку maskable в Android до того, как она укусит, — именно там большинство иконок незаметно теряет края.

Перетащите изображение сюда или нажмите, чтобы выбрать
Лучше всего квадратная, не меньше 512 пикселей. Прозрачный PNG даёт самый чистый результат.
То, что помещается под иконкой на домашнем экране.
Заполняет прозрачность там, где она не разрешена, и служит полями для maskable-иконки.
ФайлРазмерЧто его использует
 

    


    

    

      
Почему .ico всё ещё нужен

      
Одного PNG хватает большинству браузеров, и если бы вам нужна была только иконка вкладки, на этом можно было бы остановиться. ICO своё место оправдывает тем, что держит несколько разрешений в одном файле, а нужное выбирает операционная система: вкладке идёт 16, закреплённому ярлыку или ссылке на рабочем столе — 32 или 48, и каждое рисуется из растра, сделанного под этот размер, а не сжимается на лету из большого. Файл, который получается здесь, — контейнер из PNG с небольшим заголовком, и именно это читает любой браузер, вышедший в этом веке.

      
Безопасная зона maskable

      
Android не обещает показывать вашу иконку квадратом. В зависимости от лаунчера он может обрезать её в круг, в сквиркл или в квадрат со скруглением, а гарантирован вам только внутренний круг — восемьдесят процентов ширины, по центру. Графика, доходящая до краёв, — ровно та графика, которая эти края и теряет. Лечится это полями: иконки манифеста вписываются в безопасную зону, а превью здесь рисует обрезку, чтобы вы увидели её раньше пользователя.

      
Почему у иконки Apple нет прозрачности

      
iOS накладывает иконку домашнего экрана на собственную скруглённую форму и с альфа-каналом обходится не так, как хотелось бы: прозрачные участки выходят чёрными. Поэтому именно этот файл перед кодированием сводится на ваш цвет фона, а PNG для манифеста сохраняют альфу — там с ней обращаются как надо.

      
Что делать с файлами

      
Кладите их в корень сайта, а не в папку с ресурсами: браузеры и поисковые роботы угадывают путь к фавикону и некоторые запрашивают его независимо от того, ссылаетесь вы на него или нет. Затем вставьте блок HTML в head страницы. Путь к манифесту — единственная строка, которая должна совпасть с тем местом, куда вы файл действительно положили.


      
Часто задаваемые вопросы

      

        
Нужен ли favicon.ico, если есть PNG?
Строго говоря — нет. На практике — да: множество роботов, читалок лент и старых программ запрашивают фавикон по пути и в вашу разметку не заглядывают вовсе. Стоит это пару килобайт.

        
Моя иконка мылится на 16 пикселях. Что делать?
Здесь это не чинится: попросту не хватает места. На таком размере у знака остаётся около десяти читаемых пикселей в ширину, и логотип с буквами всегда превратится в кашу. Отдавайте на вход упрощённую версию — одна форма, одна буква, — а полный лаконичный блок оставьте для всего остального.

        
Стоит ли отключать поля maskable?
Только если у вашей графики и так есть щедрые собственные поля. Если она занимает весь кадр — оставьте включённым, иначе Android врежется в неё.

        
Моя картинка куда-нибудь загружается?
Нет. Каждый размер рисуется на холсте прямо в этой странице, а архив собирается в памяти. Ничего не отправляется.

      

      
Сделано командой GO AI. Генератор иконок приложения · Пакетное изменение размера · Все бесплатные инструменты