Generator for creating an optimal set of favicons

Instruction

In the past, you had to create dozens of website icons for different browsers and their versions. But in modern website building a lot has changed. Now all we need to create a beautiful website icon is one svg file, one favicon, three png and one json. You can read more in this article.

HTML:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- 180x180 - first for 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 file:

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

Yandex Browser Tableau

Only Yandex Browser with its tableau added some problems. If you want your site to look good on the tableau (when opening a new tab) - you need to create a manifest file and one png image with transparent background and aspect ratio: 1:3.

This line will be added to the head: 

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

And create a manifest file for Yandex in the root:

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

In the color column specify the background colour you want to see in the Yandex Browser Tableau.
logo - is the path to the picture.
More details in this article.

Generator

Use the form below to upload your website logo file in any of the formats (jpg, png, svg) and get a set of five icons! Maximum size: 5мб

Drag and drop the square logo file here or click.

Attach a square logo file with small indents around the edges (~10%).
You can have a transparent or coloured background.
Icons in png format are accepted;
Icons in svg format are accepted;
Icons in jpg format are accepted;

The icon generator will create: