Генератор для создания оптимального набора иконок сайта

Инструкция

Раньше нужно было создавать десятки иконок сайтов для разных браузеров и их версий. Но в современном сайтостроении многое изменилось. Теперь всё, что нам нужно для создания красивой иконки сайта - это один svg-файл, один favicon, три png и один json. Подробнее можно прочитать в этой статье.

HTML:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- 180x180 - ставим первым для safari --> 
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32x32 --> 
<link rel="icon" href="/icon.svg" type="image/svg+xml"> 
<link rel="manifest" href="/manifest.webmanifest">

Файл манифеста:

// manifest.webmanifest
{
   "icons": [
      { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
      { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
   ]
}

Табло Яндекс Браузера

Только Яндекс Браузер со своим табло добавил немного проблем. Если вы хотите, чтобы ваш сайт на табло (при открытии новой вкладки) выглядел хорошо - нужно создать ещё файл манифеста и одно png-изображение с прозрачным фоном и соотношением сторон: 1:3.

Эту строку добавим в head: 

<link rel="yandex-tableau-widget" href="/tableau.json">

И создадим файл манифеста для Яндекса в корне:

{
   "version": "1.0",
   "api_version": 3,
   "layout": {
      "logo": "/tableau.png",
      "color": "#003C8C",
   }
}

В графе color укажите цвет фона, который хотите видеть в табло Яндекс Браузера.
logo - это путь к картинке.
Более подробно в этой статье.

Генератор

Воспользуйтесь формой ниже, чтобы залить файл логотипа своего сайта в любом из форматов (jpg, png, svg) и получить набор из пяти иконок! Максимальный размер: 5мб

Перетащите сюда квадратный файл логотипа или кликните.

Прикрепляйте квадратный файл логотипа с небольшими отступами по краям (~10%).
Можно с прозрачным или цветным фоном.
Принимаются иконки в формате png;
Принимаются иконки в формате svg;
Принимаются иконки в формате jpg;

Генератор иконок создаст: