Favicon remake

[AlexTr]

Instead of uploading 1 file, remake Designer > Site Icon section to accept 5 different files

• favicon.ico
  • accept only ico file here
  • set it in the following meta tag: <link rel="icon" href="/favicon.ico" sizes="any">
  • add description for this icon: single 32×32 ico image file is recommended
• SVG icon
  • accept only svg file here
  • set it in the following meta tag: <link rel="icon" href="/icon.svg" type="image/svg+xml">
  • add description for this icon: svg image with dark and light styles embedded is recommended
• Apple devices icon
  • accept any image and resize it to 180×180 square image preserving original file format
  • set it in the following meta tag: <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  • add description: adding padding and background color is recommended for this image
• Android devices icon
  • accept any image and resize it to 192×192 square image preserving original file format
  • add description: for Android home screen
• Android devices splash
  • accept any image and resize it to 512×512 square image preserving original file format
  • add description: for Android splash screen

For last two Android images add the following meta tag: <link rel="manifest" href="/manifest.webmanifest">
With the following contents:

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

---

Source - https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs