Add favicon to wasm app

Former-commit-id: 54c3133e61b3c9edbe9e5ffb878ba232734f8326
This commit is contained in:
Michel Heily 2020-04-30 09:59:13 +03:00
parent 96f3858c96
commit f7719d4183
4 changed files with 2507 additions and 5 deletions

View file

@ -4,6 +4,42 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="1024x1024" href="/assets/apple-touch-icon-1024x1024.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-320x460.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x920.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x1096.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-750x1294.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1182x2208.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1242x2148.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-748x1024.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1496x2048.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-768x1004.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1536x2008.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="228x228" href="/assets/coast-228x228.png">
<link rel="manifest" href="/assets/manifest.json">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="yandex-tableau-widget" href="/assets/yandex-browser-manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title">
<meta name="application-name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-TileColor" content="#fff">
<meta name="msapplication-TileImage" content="/assets/mstile-144x144.png">
<meta name="msapplication-config" content="/assets/browserconfig.xml">
<meta name="theme-color" content="#fff">
<title>RustBoyAdvance</title> <title>RustBoyAdvance</title>
<style> <style>
body { body {
@ -16,7 +52,7 @@
padding: 1em; padding: 1em;
padding-top: 6em; padding-top: 6em;
background-color: #13121d; background-color: #13121d;
background-image: url("icon.svg"); background-image: url("icon.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 400px; background-size: 400px;

File diff suppressed because it is too large Load diff

View file

@ -16,10 +16,11 @@
"rustboyadvance-wasm": "file:../pkg" "rustboyadvance-wasm": "file:../pkg"
}, },
"devDependencies": { "devDependencies": {
"copy-webpack-plugin": "^5.0.0",
"favicons-webpack-plugin": "^3.0.1",
"hello-wasm-pack": "^0.1.0", "hello-wasm-pack": "^0.1.0",
"webpack": "^4.29.3", "webpack": "^4.29.3",
"webpack-cli": "^3.1.0", "webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5", "webpack-dev-server": "^3.1.5"
"copy-webpack-plugin": "^5.0.0"
} }
} }

View file

@ -1,4 +1,6 @@
const CopyWebpackPlugin = require("copy-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin");
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const path = require('path'); const path = require('path');
module.exports = { module.exports = {
@ -9,6 +11,24 @@ module.exports = {
}, },
mode: "development", mode: "development",
plugins: [ plugins: [
new CopyWebpackPlugin(['index.html', '../../../assets/icon.svg']) new CopyWebpackPlugin(['index.html', '../../../assets/icon.png']),
new FaviconsWebpackPlugin({
logo: '../../../assets/icon.png',
cache: true,
mode: 'webapp',
devMode: 'webapp',
favicons: {
appName: 'rustboyadvance',
appDescription: 'Web Demo for rustboyadvance',
developerName: 'michel',
developerURL: null, // prevent retrieving from the nearest package.json
background: '#ddd',
theme_color: '#333',
icons: {
coast: false,
yandex: false,
}
}
})
], ],
}; };