How to add hash content to favicons and splash screens images in nextjs-CodePudding

I am setting the favicon for PWA as

<link rel="shortcut icon" href="assets/icons/favicon.ico" />
<link rel="icon" sizes="16x16 32x32 64x64" href="assets/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="196x196" href="assets/icons/favicon-192.png" />
<link rel="icon" type="image/png" sizes="160x160" href="assets/icons/favicon-160.png" />
<link rel="icon" type="image/png" sizes="96x96" href="assets/icons/favicon-96.png" />
<link rel="icon" type="image/png" sizes="64x64" href="assets/icons/favicon-64.png" />
<link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16.png" />
<link rel="apple-touch-icon" href="assets/icons/favicon-57.png" />
<link rel="apple-touch-icon" sizes="114x114" href="assets/icons/favicon-114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="assets/icons/favicon-72.png" />
<link rel="apple-touch-icon" sizes="144x144" href="assets/icons/favicon-144.png" />
<link rel="apple-touch-icon" sizes="60x60" href="assets/icons/favicon-60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="assets/icons/favicon-120.png" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/icons/favicon-76.png" />
<link rel="apple-touch-icon" sizes="152x152" href="assets/icons/favicon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/favicon-180.png" />
<meta name="msapplication-TileImage" content="assets/icons/favicon-144.png" />
<meta name="msapplication-config" content="assets/icons/browserconfig.xml" />

and splash screen as

<link href="assets/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="assets/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

in _app.tsx within <Head></Head>

Is there any way to generate the hash and append them to the images automatically during the build and export process?

CodePudding user response：

I Solved this by importing the asset and referencing as below

import favicon from "../assets/icons/favicon.ico";
import favicon192 from "../assets/icons/favicon-192.png";
import favicon160 from "../assets/icons/favicon-160.png";

<link rel="shortcut icon" href={`${favicon.src}`} />
<link rel="icon" sizes="16x16 32x32 64x64" href={`${favicon.src}`} />
<link rel="icon" type="image/png" sizes="196x196" href={`${favicon192.src}`} />
<link rel="icon" type="image/png" sizes="160x160" href={`${favicon160.src}`} />

This generates the below output in next.js 11.1.2

<link rel="shortcut icon" href="/_next/static/image/assets/icons/favicon.9d65c888a8d0c46f02cbb1675d6f364b.ico" />
<link rel="icon" sizes="16x16 32x32 64x64" href="/_next/static/image/assets/icons/favicon.9d65c888a8d0c46f02cbb1675d6f364b.ico" />
<link rel="icon" type="image/png" sizes="196x196" href="/_next/static/image/assets/icons/favicon-192.1ba37756f0a50e1d229945eb24d0a422.png" />
<link rel="icon" type="image/png" sizes="160x160" href="/_next/static/image/assets/icons/favicon-160.eccd41c5bab333411f98563c4da6e7fb.png" />