Question

当我开始加载页面时，我看到了我的收藏夹图标，但是当页面完成所有内容加载后，我的收藏夹图标消失了，浏览器显示了默认的收藏夹图标。

您对解决此问题有任何建议吗？

即使使用Edge，其他浏览器也没有遇到任何问题。

我用https://realfavicongenerator.net/生成了收藏夹图标。

<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="./assets/favicons/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="./assets/favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicons/favicon-16x16.png">
<link rel="manifest" href="./assets/favicons/site.webmanifest">
<link rel="mask-icon" href="./assets/favicons/safari-pinned-tab.svg" color="#000000">
<link rel="shortcut icon" href="./assets/favicons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="***MY PROJECT***">
<meta name="application-name" content="***MY PROJECT***">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-config" content="./assets/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

我在根文件夹中添加了经典的图标[favicon.ico]。

这是清单文件。

{
"name": "***MY PROJECT***",
"short_name": "***MY PROJECT***",
"icons": [
    {
        "src": "/android-chrome-36x36.png",
        "sizes": "36x36",
        "type": "image/png"
    },
    {
        "src": "/android-chrome-48x48.png",
        "sizes": "48x48",
        "type": "image/png"
    },
    {
        "src": "/android-chrome-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
    },
    {
        "src": "/android-chrome-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
    },
    {
        "src": "/android-chrome-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
    },
    {
        "src": "/android-chrome-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "/android-chrome-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
    },
    {
        "src": "/android-chrome-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    },
    {
        "src": "/android-chrome-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
],
"theme_color": "#ffffff",
"background_color": "#ffffff"

}

这是browserconfig.xml

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/mstile-70x70.png"/>
            <square150x150logo src="/mstile-150x150.png"/>
            <square310x310logo src="/mstile-310x310.png"/>
            <TileColor>#ffffff</TileColor>
        </tile>
    </msapplication>
</browserconfig>

也许在生成过程中我做了一些设置错误。

谢谢大家。

Answer 1

在您的index.html中更改为：

<link rel="icon" sizes="16x16" href="./assets/favicons/favicon.ico" type="image/x-icon" />

Answer 2

遵循这些步骤

图片名称应为favicon.ico，格式应为ico 将ico放在“ wwwroot”文件夹中 index.html中的ico参考应为

<link rel="icon" type="image/x-icon" href="/favicon.ico">

从本地运行时，Edge不显示图标。在网络服务器中部署并尝试

这对我有用

Answer 3

我遇到了同样的问题，在我的情况下，由于我将应用程序部署在Web服务器根目录下的某个文件夹中（例如，类似www.server.com/app1），因此发生了该问题。我发现使图标正常工作的唯一解决方案是为favicon标记添加两个条目，一个带有角度标签，另一个包含包含应用程序部署位置的文件夹路径。

  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="shortcut icon" type="image/x-icon" href="/app1/favicon.ico">

还请记住，在部署代码后清除IE缓存，如果您将应用程序作为收藏夹，则在更改图标后将其从收藏夹中删除，然后再次添加...

Answer 4

就我而言，问题是由Apache重写规则引起的。我们的应用程序在/domain/app（--base-href /domain/app）上提供服务，因此我们需要Apache重定向到index.html以便在基本URL（例如/domain/app/foo）之外进行页面刷新或导航，否则我们需要有404。

原始.htaccess

RewriteEngine On
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  # If the requested resource doesn't exist, use index.html
  RewriteRule ^ index.html

IE 11不像其他浏览器那样请求favicon.ico。

IE 11对此图标进行了请求（基本href /domain/app）：浏览器网址： /domain/app/foo/123 网站图示要求： /domain/app/foo/favicon.ico

其他浏览器（Chrome ...）：网站图示要求： /domain/app/favicon.ico

所请求的favicon.ico的重写规则返回index.html。

因此，我添加了以下配置代码：

  RewriteCond %{REQUEST_URI} .*/(.*)/favicon\.ico$
  RewriteRule ^(.*) favicon.ico [L]

此外，IE缓存了index.html的收藏夹请求，并且IE不再询问favicon.ico。

我必须使用inetcpl.cpl清除缓存：

我在Angular 5项目中的IE浏览器上的收藏夹图标出现问题

4 个答案: