我正在尝试使用flutter进行web开发，但找不到有关如何配置图标的信息。
这应该是可行的，因为taphero_web已经实现了。我查看了他们的源代码，但没有找到他们网站上使用的图片：
6个回答
98
很高兴你问！作为该项目的所有者，我可以告诉你我的做法：
更新：支持PWA和Flutter 3
1- 在您的/web文件夹中（将被推送到服务器上），添加一个/icons文件夹（如果您没有它）。
2- 一旦到达那里，您需要使用像这个网站上传您的一组图像。
3- 它看起来会像这样：
4- 您应该有一个manifest.json，它看起来会像这样:
{
"name": "Tap Hero",
"short_name": "Tap Hero",
"start_url": ".",
"display": "standalone",
"background_color": "#000000", // any HEX color works
"theme_color": "#000000", // any HEX color works
"description": "anything you want here",
"orientation": "portrait" // or changed as you wish
"prefer_related_application": false,
"icons": [
{
"src": "\/icons/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/icons/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/icons/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/icons/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/icons/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/icons/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
5- 完成上述步骤后，在你的index.html文件中添加其余的图标：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tap Hero</title>
<meta name="description" content="Tap Hero">
<meta name="keywords" content="Flutter, Tap, Hero, Game">
<meta name="author" content="Mariano Zorrilla">
<meta name="theme-color" content="#6200EA" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<!-- Main Favicon -->
<link rel="icon" type="image/pg" href="favicon/png"/>
<!-- ALTERNATIVE <link rel="icon" type="image/x-icon" href="favicon.ico" /> -->
<link rel="manifest" href="icons/manifest.json">
<meta name="msapplication-TileColor" content="#6200EA">
<meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png">
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>
- 如果（万一）你的
/web和/或manifest.json文件损坏/破碎等，你可以删除整个文件并运行“flutter create .”，这将重新生成所有内容，并且你每次都可以进行新尝试。
- Mariano Zorrilla
3
谢谢。我使用Codemagic进行托管。因此，我认为“要推送到服务器的文件夹”是“Web”。 - polina-c
3是的，我使用了我在这里发布的资产链接（“这个”）：https://www.favicon-generator.org/“要推送到服务器的文件夹”是包含您的index.html等文件的文件夹，在进行webdev构建后生成。 - Mariano Zorrilla
在 manifest.json 中，密度（density）是什么意思？它是否类似于移动设备上的 1.0x、2.0x 资源？ - Maxgmer
41
我开始按照Mariano Zorilla的答案操作，但是如果你只想为Flutter Web应用程序设置Favicon，那么这会更加简单。
- 在像Mariano建议的网站上传你的图片，并生成icon。
选择"仅生成16x16 favicon.ico"选项并下载图标文件。
在
web/文件夹中使用你新生成的favicon.ico文件替换默认的Flutterfavicon.png文件在
web/index.html文件中，
替换：
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
随着：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
- Andres
3
3通过这种解决方案，'将图标保存到主屏幕'会起作用吗？还是仅在URL栏上显示一个小图标而已？ - Damandroid
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel - Ruble
注意：
shortcut链接类型通常在icon之前出现，但这种链接类型是不符合规范的，会被忽略，网页作者不应再使用它。 - Ruble32
要为Flutter Web配置网站图标，只需将位于路径./web/favicon.png的文件替换为自己的图标，然后运行flutter build web即可。
- BananaNeil
4
4强调一下 Banana 所说的。请确保重新构建 Flutter 应用程序，如果它当前正在运行。我之前已经运行了应用程序并进行了更改，但只有刷新并没有发生任何变化。 - Josh Pachner
自从我做了这个以后，我遇到了以下错误：“预期找到(MaterialIcons, packages/cupertino_icons/CupertinoIcons)的字体，但找到了(MaterialIcons)。这通常意味着您在IconData类中引用了字体系列，但没有在pubspec.yaml的assets部分中包含它们，缺少包含它们的软件包，或者缺少"uses-material-design: true"。” - undefined
字体资源“MaterialIcons-Regular.otf”已经进行了树摇优化，从1645184字节减少到7588字节（减少了99.5%）。如果您在构建应用程序时提供了--no-tree-shake-icons标志，可以禁用树摇优化。 - undefined
我一直在寻找解决方案，但还没有找到一个。``flutter doctor -v
[√] Flutter（稳定频道，3.13.0，运行在Microsoft Windows [Version 10.0.19042.1889]，地区为en-ZA）
• Flutter版本3.13.0，稳定频道，位于C:\src\flutter
• 上游仓库https://github.com/flutter/flutter.git
• 框架修订efbf63d9c6（6周前），2023-08-15 21:05:06 -0500
• 引擎修订1ac611c64e
• Dart版本3.1.0 - undefined
1
在您的项目中，转到项目的根目录并替换以下内容：
这也适用于
/web/favicon.png使用32*32像素的图像替换/web/icons/Icon-192.png使用192*192像素的图像替换/web/icons/Icon-512.png使用512*512像素的图像替换/web/icons/Icon-maskable-192.png使用192*192像素的图像替换/web/icons/Icon-maskable-512.png使用512*512像素的图像替换
flutter build web命令时都会包括这些文件。这也适用于
安装应用功能。- luckyhandler
1
此外，您还可以使用此软件包来管理Flutter应用程序平台上的所有图标flutter_launcher_icons。
只需指定图标配置并运行命令
只需指定图标配置并运行命令
flutter pub run flutter_launcher_icons:main或dart run flutter_launcher_icons:main，它将为您完成所有需要的工作。- Никита Михайлов
1
只需使用相同的尺寸和图标名称，尊重大小，并添加您自己的图标并覆盖生成的图标。
我已经使用了https://romannurik.github.io/，对我来说非常满意，因为我从Android开始，然后转向Flutter来生成图标，还有Android图标...
我已经使用了https://romannurik.github.io/，对我来说非常满意，因为我从Android开始，然后转向Flutter来生成图标，还有Android图标...
- Waged
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接