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

Студія 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 з невеликими полями навколо знака.