Инструменты › Дизайн

Студия favicon и иконок приложения

Превратите один логотип в favicon.ico, apple-touch-icon, адаптивные и maskable-иконки для Android, набор AppIcon для iOS и site.webmanifest.

Что внутри

favicon.ico (16, 32, 48), PNG-фавиконки, apple-touch-icon, иконки Android Chrome и maskable, site.webmanifest, набор AppIcon для iOS в Xcode, mipmap для Android с адаптивной иконкой и этот фрагмент HTML:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#F39A3D">

Как это работает

  1. Логотип рисуется на canvas в каждом размере, с безопасными зонами для maskable- и адаптивных иконок.
  2. favicon.ico содержит PNG размером 16, 32 и 48 px, которые читает любой современный браузер.

Вопросы

Какой исходник подходит лучше всего?

SVG или квадратный PNG от 512×512 с небольшими полями вокруг знака.