Я хочу отобразить значок избранного на вкладке браузера для моего приложения реагирования. Ниже приведены шаги, которые я выполнил, чтобы сделать это:
1. Сгенерировал пакет favicon, скачал и скопировал все значки favicon в папку public / static / images.
2. Мой файл index.html находится за пределами общей папки. но и public, и index.html находятся в одной папке. Я добавил строки ниже в разделе head файла index.html.
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-
icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-
32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-
16x16.png">
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg"
color="#5bbad5">
<meta name="theme-color" content="#ffffff">
Я запускаю приложение в браузере с этим URL localhost: 3000, и консоль выдает мне ошибку «URIError: Не удалось декодировать параметр '/%PUBLIC_URL%/favicon-32x32.png'", и на вкладке браузера я вижу это это http://localhost:3000/%PUBLIC_URL%/favicon-32x32.png, когда я нажимаю на ошибку консоли для получения дополнительной информации.
Я пропускаю некоторые шаги здесь. Может ли кто-нибудь помочь мне решить это. Я понятия не имею, как действовать дальше. Спасибо.
Отредактировано: также с помощью веб-пакета. поэтому мне нужно внести некоторые изменения в файл webpack-config.js? Если так, то кто-нибудь может дать некоторое представление об этом. Спасибо.