search

Koki-Kazaore / this-is-me

My Portfolio Site
https://www.kaza.ooo
0 stars 0 forks source link

Handling of favicon display errors #86

Open Koki-Kazaore opened 5 months ago

Koki-Kazaore commented 5 months ago

Overview

Handling of favicon display errors

Cause of bugs

Correction policy

<head>
  <!-- iOS Safari -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <!-- Android Chrome -->
  <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
  <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
  <link rel="manifest" href="/manifest.json">
  <!-- Windows 8 and 10 -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <!-- Mac OS X El Capitan Safari -->
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <!-- Classic, Desktop Browsers -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>

browserconfig.xml

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="/mstile-150x150.png"/>
      <TileColor>#da532c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

manifest.json

{
  "name": "My App",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

Additional context / Screen shots

https://github.com/Koki-Kazaore/this-is-me/issues/83