与特定网站关联的图标。它通常显示在地址栏中的Web浏览器中(通常留在URL中),标签栏或书签中。
我很难找到在iPhone的Safari上找到“ Siri建议的网站”中包含图标的答案。我可以用来实现这一目标吗?
我尝试了: <link rel="mask-icon" href="/favicon.svg" color="#990000"> 在我的标题标签以及清除我的缓存并重新启动我的电话 如果有人一直在寻找解决方案,我就可以找到答案。显然,它从OG Meta标签中拉出,但只有在您的网站重新索引之后。因此,它不会立即出现。这是一个例子:<meta property="og:image:width" content="600"> <meta property="og:image:height" content="400"> <meta property="og:title" content="Your Title"> <meta property="og:url" content="https://www.example.com/"> <meta property="og:image" content="https://www.example.com/featured-image.jpg">
游戏引擎排名20 ... </desc> <question vote="-1"><code><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Game-Engines Ranking 2024/25</title> <link rel="stylesheet" href="style.css"> <link rel="icon" type="image/x-icon" href="image/favicon.ico"> </head> </code><pre> 我已经设置了所有设置,但是HTML似乎没有用,而.ICO在root/image</pre>中。 <p> </p> </question>我发现问题第一行是错误的,我输入了<answer tick="false" vote="0">而不是<p> <doctype = html> </p></answer>
mynuxt.config.ts文件:
有没有办法通过元标记或manifest.json为支持主题颜色的浏览器设置不同的图标?我有一个深黑色的主题栏,但在桌面上使用的图标大部分是黑色的
我正在尝试为我的 ASP.NET Core 项目添加和设置图标。 当我设置 Visual Studio 2017 自动创建的初始项目时,favicon.ico 文件位于 wwwroot 目录中...
用于启动网络应用程序的链接 iOS 主屏幕图标未显示在 iPhone 上
我使用 Apps 脚本创建了一个简单的测试 Web 应用程序。 我想使用自定义图标在 iPhone/iPad 主屏幕上部署 Web 应用程序 URL。 当我使用“添加到主屏幕&
我在 gh-pages 上托管了 React/webpack 应用程序。 网站图标和清单图标未显示。 favicons、manifest 文件夹和 manifest.webmanifest 文件放置在 client/assets 文件夹中。 < favicon s...
我无法将网站图标添加到我的 jsp 页面。将网站图标添加为特定路径的链接对我来说不起作用。 任何帮助将不胜感激。 在这里你可以看到我的 WebContent 文件夹,带有
我有一个在 tomcat 上运行的 Web 应用程序。我想为其设置一个图标。我应该把它放在 tomcat web 应用程序的哪里。
我一直在努力让图标正常工作。 最后,我根据上一个问题的答案使用 Base64 版本让它工作:local (file://) website favicon Works in Firefox, not in
Android 上的 Chrome 更喜欢苹果触摸图标而不是 SVG favicon
我正在本地非 HTTPS vitejs 开发服务器的网页中测试 favicon。 这是与 favicon 相关的部分: 我正在本地非 HTTPS vitejs 开发服务器的网页中测试 favicon。 这是与favicon相关的部分: <link rel="icon" href="/favicon-32x32-light.png" sizes="32x32" media="(prefers-color-scheme: light)" /> <link rel="icon" href="/favicon-32x32-dark.png" sizes="32x32" media="(prefers-color-scheme: dark)" /> <link rel="apple-touch-icon" href="/apple-icon-180x180-light.png" sizes="180x180" media="(prefers-color-scheme: light)" /> <link rel="apple-touch-icon" href="/apple-icon-180x180-dark.png" sizes="180x180" media="(prefers-color-scheme: dark)" /> <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any" /> SVG 有一个像 viewBox="0 0 160 160" 这样的 viewBox,不确定这是否会影响浏览器选择算法。它包含一个 <style> 标签来支持两种配色方案: .inside { fill: green; } @media (prefers-color-scheme: dark) { .inside { fill: red; } } 在 Windows Chrome(以及 Firefox、Edge)中,仅请求并应用 SVG 图标: 在 Android Chrome (v129.0.xxx) 中,同时请求 SVG favicon 和 apple touch 图标,然后应用 apple touch 图标(SVG 具有不同的颜色,以便被发现): 我的理解是Android Chrome支持SVG作为favicon,它的选择算法应该选择SVG。所以我想我的页面设置一定有问题。这是MDN: 如果有多个 ,浏览器将使用它们的媒体、类型和大小属性来选择最合适的图标。如果多个图标同样合适,则使用最后一个。如果后来发现最合适的图标不合适,例如因为它使用了不受支持的格式,则浏览器将继续使用下一个最合适的图标,依此类推。 realfavicongenerator.net 上的 post 解释说,Android Chrome 也依赖于苹果触摸图标,基于宽度/高度计算。但 SVG 可以根据需要缩放,所以我的理解是它应该优先。 我尝试过的事情,但没有运气: 更改<link>标签的顺序 删除 Apple Touch 图标或 SVG 或两者中的 sizes 属性 使用不同的 <link> 属性复制 SVG media,以实现暗/亮方案 使用大于 180x180 的 viewBox 创作放大的 SVG,例如200x200 通过 HTTPS 公开本地站点 让它选择 SVG 的唯一方法是删除两个苹果触摸图标 <link> 标签。此时,在 32x32 PNG 和 SVG 之间,Android Chrome 选择了 SVG。 这是一个显示问题的代码和框,设置也更简单(没有深色/浅色变体):https://s3cnww.csb.app/ 有谁知道如何让 Android Chrome 选择 SVG? TA 当浏览器需要在多个 Favicon 中进行选择时,您无法选择首选 Favicon。每个浏览器都有自己的实现,正如Robert Longso所建议的,您唯一的解决方案是直接联系每个浏览器以检查它是否是预期的行为。 例如,以下是使用 apple-touch-icon 的 Safari 浏览器的规则: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/ uid/TP40002051-CH3-SW4.
如何从 WordPress 主题中删除默认的图标链接?我知道我可以替换图标,但我正在寻找使用remove_action或类似的东西,我可以将其放置在我的功能中...
favicon 可以只接受 png 或 jpg 文件类型吗?
我在 Firefox 控制台中收到错误,提示网站图标未包含在页面中。 favicon 浏览器可以只接受 png 或 jpg 文件类型吗? 更新: 我已按照建议将链接添加到图标: 我...
我想知道是否可以使用 JavaScript 通过 URL 获取网站的图标。 例如,我有 URL http://www.bbc.co.uk/,我想获取 ... 中描述的图标的路径。
我尝试插入网页的图标无法正常工作。有人可以告诉我插入它所需的代码和样式吗? 欢迎来到Cr...</desc> <question vote="23"> <p>我尝试插入网页的图标无法正常工作。有人可以告诉我插入它所需的代码和样式吗?</p> <pre><code><html> <head> <title>Welcome to Crash - Login or Signup</title> <link rel="stylesheet" type="text/css" href="crash_styling.css"></link> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> </head> <body link="#336666" alink="red" vlink="red"> <div id="header_title"> <h1 id="title">crash</h1> <p id="motto">Keep track of all your assignments and projects.</p> </div> <form name="input" action="html_form_action.asp" method="get" id="user_passEntry"> Username:<input type="text" name="username" placeholder="Your Username" /> <br /> Password:<input type="password" name="password" placeholder="Your Password" /> <input type="submit" value="submit"> </form> <p id="description">Crash is a way students can keep track of their projects and assignments on the computer or on their devices. With crash, you can be sure you'll never turn in something late again.</p> <div class="make"><a href="crash_styling" style="text-decoration:none"/>Make a New Assignment</div> <div class="edit"><a href="crash_styling" style="text-decoration:none"/>Edit an Assignment</div> <div class="check"><a href="crash_styling" style="text-decoration:none"/>Check off an Assignment</div> </body> </html> </code></pre> </question> <answer tick="true" vote="36"> <p>要在您的网站上放置网站图标,您可以在 <pre><code><head></code></pre> 标签中使用以下内容 </p> <pre><code><link rel="shortcut icon" href="http://yourwebsitepath/favicon.ico" /> </code></pre> <p>您需要确保图标的路径正确。如果路径不正确,则不会出现。 我还看到了缓存问题,导致图标看起来不起作用。 清除缓存后,请务必尝试重新启动浏览器。 </p> </answer> <answer tick="false" vote="16"> <p>有时<a href="https://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache" rel="nofollow noreferrer">强制重新加载</a>(此链接中的其他维基百科信息)可以解决问题。您需要重新加载浏览器的缓存内存。</p> <ul> <li>Firefox:ctrl + Shift + R</li> <li>Chrome:按住 ctrl 键并右键单击 Chrome 的重新加载按钮</li> <li>Edge:与 Chrome 相同,或 ctrl + F5</li> </ul> <p>其他组合可以在上面提供的链接中找到。</p> </answer> <answer tick="false" vote="5"> <p>很可能您的<em>图标</em>有一条“糟糕的路径”。确认您的<em>文件路径</em>。 尝试使用<em> </em><code>href="favicon.ico" </code></p> <pre>而不是</pre> <p><code>href="/favicon.ico" </code></p> <pre>也许会起作用。或者,如果您在某些</pre>文件夹<p>中有图标,例如在<em>图像</em><em>中 </em><code>href="images/favicon.ico" </code></p> <pre>你做得对,但如果你有</pre>坏路径<p>,<em>图标</em>不会出现。<em> </em>所以你的 </p><code>CSS</code><p> 可以工作,如果你的 <pre>icon</pre> 与 <em><code>CSS</code></em> 文件处于 <em>同一级别</em>,那么删除 <pre><code>/</code></pre> 就可以了。<pre> </pre> </p> </answer>如果使用 Chrome:清除缓存,关闭 Chrome,然后重新启动。这对我有帮助。<answer tick="false" vote="3"> <p> </p> </answer> <answer tick="false" vote="1"><ol>制作PNG文件<li> <p> </p></li>将其设置为index.html页面中的图标,以便覆盖缓存:<li> <p> </p> </li>它有效。</ol> <p> </p> </answer>将 <answer tick="false" vote="0"><code>href="/images/favicon.ico"</code><p> 更改为 <pre><code>href="./images/favicon.ico"</code></pre> 解决了我的问题。<pre> </pre> </p></answer>
Fontawesome 免费图标用作页面图标,例如 Fontawesome 免费图标用作页面图标,例如 <html><head> <link rel='icon' href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/pen-to-square.svg'> </head></html> 出现黑色图标的是 Chrome 选项卡: 如何更改此图标颜色? 还使用了Bootstrap 5。 可以使用 bootstrap text-danger 类更改内部 html 页面颜色,例如 <i class="fa-regular fa-pen-to-square text-danger"></i> 或使用风格: .fa-pen-to-square { color: red; } 如何更改页面图标颜色? 这是使用 FontAwesome 免费 SVG 图标、Bootstrap 5、jquery 和 jquery ui 的 ASP.NET 9 MVC 应用程序。 更新 看起来像颜色属性 fill = "#AB7C94" 应按照如何更改“svg”元素的颜色?中所述注入到 SVG 中 并且内联数据 uri 应用于页面图标。 颜色被指定为 html 颜色名称。如何在 svg 中使用 html 颜色名称或将它们转换为 svg 中所需的颜色十六进制值? 或者 svg 过滤器可以应用于 FontAwesome 图标吗?不确定 FontAwesome 免费图标许可证是否允许图标修改。 不幸的是,无法使用 HTML 中应用的 CSS 类或样式动态更改 favicon 颜色,因为浏览器将 favicon 呈现为独立于 DOM 的独立图像资源。要更改用作网站图标的 FontAwesome 图标的颜色,您需要修改 SVG 文件本身。 大多数 CDN(包括 FontAwesome)以默认黑色或无颜色提供 SVG。他们不提供动态颜色定制。但是,您可以: 搜索允许动态自定义 SVG 颜色的服务(尽管这些服务很少见且通常不是免费的)。 SVGOMG 或类似的 SVG 编辑器等工具可让您上传和编辑 SVG 文件。
我有 2 个网站:abc.domain.com 和 def.domain.com 作为子域,它们共享相同的证书和相同的根文件夹。本质上,他们访问同一网站,但面向不同的客户。 服务器...
公共目录中的资产在 Next.js 应用程序中出现 404 错误
我一直在尝试让我的网站的图标(使用 Next.js)显示出来。在浏览了无数 Stack Overflow 帖子和教程后,我开始感到沮丧。我的项目结构...