在<head>中，favicon引用的合适位置是什么？
在<head>中，favicon引用的合适位置是在<head>标签内的最顶部位置。
Favicon是网站的图标，通常显示在浏览器标签页和书签栏上，用于标识网站。为了引用favicon，可以使用HTML的<link>标签，并将rel属性设置为"icon"或"shortcut icon"，href属性指向favicon文件的URL。
合适的位置是在<head>标签的最顶部，这样可以确保浏览器尽早加载并显示网站的图标。在<head>标签中，通常会有其他的元数据和链接标签，如<title>、<meta>等，而将favicon引用放在最顶部可以使其尽早加载，提升用户体验。
以下是一个示例代码：
<head>
<link rel="icon" type="image/png" href="favicon.png">
<title>网站标题</title>
<meta charset="UTF-8">
<!-- 其他元数据和链接标签 -->
</head>在这个示例中，favicon.png是网站的图标文件，通过设置rel属性为"icon"，type属性为"image/png"，href属性指向图标文件的URL来引用favicon。请注意，这里的URL应该是一个有效的图标文件的URL。
腾讯云提供了一系列的云服务产品，包括云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。具体的腾讯云产品介绍和相关链接可以在腾讯云官方网站上找到。
相关·内容
2回答
我只是在我的head of my _Layout.cshtml中添加这个。
<head>
<link rel="shortcut icon" type="image/ico" href="~/Images/favicon.ico">
</head>`
这个图标只显示在主页上，原因是什么？
浏览 1提问于2016-05-31得票数 6
回答已采纳
3回答
我无法在网页上显示收藏夹图标。我正在使用IE8。我在.aspx页面中使用了以下标记：
<head runat="server">
<link rel="shortcut icon" href="Images/favicon.ico" />
</head>
我在Images中保存了favicon.ico文件。
它可以在其他浏览器上显示，比如Firefox和Chrome，但我想让它在IE上显示。IE中的设置是什么？
浏览 1提问于2012-11-23得票数 3
回答已采纳
这是我的_document.js中的代码： import Document, { Head, Main, NextScript } from 'next/document';
<html lang="id">
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
浏览 81提问于2021-02-01得票数 1
回答已采纳
1回答
我有一个页面，它通过javascript改变了这个图标。这在chrome和firefox上很好，但在Safari上却不起作用。我甚至添加了<link rel="apple-touch-icon" href="favicon-1.png">部件并通过javascript对其进行了更改，但这也不起作用。
该页面如下所示：
<html lang="en">
<head>
<meta charset="utf-8">
<title>Foo</title>
浏览 0提问于2020-09-07得票数 6
回答已采纳
下面是我的Heroku应用程序的Hello world代码。另外，在我的项目的根文件夹中，我有一个favicon.ico。
import os
from flask import Flask
app = Flask(__name__)
html = '''
<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="/favicon.ico">
<title>Hello world!</t
浏览 0提问于2012-02-14得票数 12
我使用的是：
<link rel="shortcut icon" href="../Images/favicon.ico" />
向浏览器选项卡添加一个小图标，但现在无法将其从浏览器中删除。我从head部分删除了它，但它不起作用。我还清除了缓存、cookie和会话，但仍然是一样的。.ico图标仍在浏览器选项卡中。
浏览 3提问于2014-05-03得票数 2
我对编码很陌生，目前在HS课程中。我一直在非常努力地争取一些:悬停标记工作，利用我从这门课上学到的知识。问题是，无论表单是什么，我的悬停标记都不能工作。
这是我的遗骨代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
two {
display: none;
}
one {
浏览 10提问于2022-11-29得票数 0
在我的index.html中，head标记中包含以下内容：
<link rel="apple-touch-icon" sizes="60x60" href="./assets/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/icons/favicon-32x32.png">
<link rel="icon"
浏览 1提问于2018-08-13得票数 1
回答已采纳
在HTML文档的<link rel="icon">中引用<head>时，是否必须使用属性type="[MIME TYPE HERE]"声明图标图像的MIME类型
还是type属性是可选的？
，例如
是否必须写：
<link rel="icon" href="/path/to/my/favicon.png" sizes="57x57" type="image/png">
<link rel="icon" href="/path/to/m
浏览 4提问于2020-09-12得票数 0
回答已采纳
5回答
由于某些原因，我的收藏图标不能工作。
我将favicon保存为/public目录中的favicon.ico，并在我的页面的<Head> (位于/pages目录中)中引用它，但无济于事。
有人能帮上忙吗？
-
下面是我的index.js代码：
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
dir/pages/index.js
dir/public/favicon.ic
浏览 0提问于2020-05-16得票数 8
我有一个简单的图像预览，点击后，您将看到一个完整大小的图像：
<html>
<head>
<meta name="referrer" content="origin">
</head>
<body>
<a href="/myimage.jpg">
<img src="/myimage.jpg" title="my image" border="0" />
</a&
浏览 0提问于2018-12-05得票数 1
回答已采纳
我是新的节点表示，并希望得到一些帮助，以获得以下解决。
下面是我的Node express应用程序的项目结构
文件夹结构：
下面是我的app.js代码
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
浏览 0提问于2017-03-02得票数 0
回答已采纳
2回答
我做了各种尺码的我喜欢的东西。它在我的Retina MacBook Pro上的地址栏上看起来很棒，但是中的图标是像素化的。我当时的印象是，它使用的是32 on版本，但在Retina显示器上是64 on。我最喜欢的图标包含这个决议，但图标仍然模糊。
在Retina上创建和链接这个图标看起来很棒的正确方法是什么？
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="images/favicon-152.png">
<link rel="apple-to
浏览 2提问于2013-12-26得票数 2
回答已采纳
1回答
我们的应用程序中有一个自定义会话机制，允许用户在每个浏览器选项卡中有不同的会话(例如，不同的凭据)，即使URL是相同的。这种机制在包括IE (v11)在内的所有主要浏览器中都非常有效。
问题
我们希望为每个浏览器选项卡提供不同的图标(不同的颜色)，以指示哪个选项卡属于哪个会话。为此，我们根据会话设置不同的偏好URL。
<link rel='icon' href='url_to_favicon_session_id' type='image/ico'/>
它在Firefox和Chrome中运行得很好，但是IE似乎在指向同一个URL的所有
浏览 2提问于2014-12-11得票数 12
我的Sinatra应用程序有典型的文件层次结构: root包含：
文件"hc.rb“文件"endpoints.yml”dir视图“dir”public
“视图”包含.erb文件
公共dir包括：
文件"style.css“dir”图像“
在dir图像中，我有偏爱图标和404张图片。
下面是代码的一部分：
not_found.erb
<center><img src="images/404.png" alt="404 Not Found"></center>
hc.rb
not_found do
er
浏览 0提问于2015-07-28得票数 1
回答已采纳
使用h:outputStylesheet，我可以在HTML部分嵌入CSS资源，但是如何为呈现<link>的图像资源构建一个，如本例所示：
HTML输出：
<head>
...
<link rel="icon" type="image/png" href="favicon.png" />
...
</head>
图像资源位于<web>/resources/images中。
如果我在像href="/resources/images/favicon.png"这样的JSF模板中
浏览 0提问于2011-06-16得票数 7
回答已采纳
1回答
需要从html文件中删除所有web内容，只保留HTML标记。
它能用正则表达式或JavaScript来完成吗？
以前:
<html>
<head>
<title>Ask a Question - Stack Overflow</title>
<link rel="shortcut icon" href="//cdn.sstatic.net/stackoverflow/img/favicon.ico">
<script type="text/javascript">
docum
浏览 6提问于2014-02-12得票数 0
1回答
很长时间的听众，第一次打电话。
我有一些令人沮丧，似乎莫名其妙的问题谷歌应用程序引擎，Jinja2，和CSS。
我的模板正在工作，我的应用程序的功能可以工作(用户、博客帖子等等)，但是CSS文件在我的Chrome调试工具和我的Google日志中显示了一个很大的404。为什么我的/样式表/main.css没有加载？
亲爱的互联网，我很想听你说这只是一个错误。我肯定我只是个白痴。
这是我的文件目录：
stylesheets
main.css
templates
base.html
blog.html
front.html
login.html
newpost.html
浏览 3提问于2014-02-15得票数 2
回答已采纳
当我使用'Icon Composer‘在Mac上创建一个ICO文件时，它允许指定五个图像(16x16，24x24，32x32，48x48,256x256)。如果我指定16x16和32x32的Google Chrome (Mac OS X)，使用32x32图像作为图标出现在标签页和收藏夹下的名称旁边(它的大小调整为16x16)。这会导致图标看起来模糊。
我是否正确创建了favicon.ico？要让浏览器使用16x16图像，还需要执行其他操作吗？我目前有：
<head>
<link rel="shortcut icon" href="/favi
浏览 2提问于2011-02-25得票数 22
回答已采纳
我正在尝试将Carousel示例模板集成到我的项目中：
这是我的HTML。CSS和JS文件加载良好。为了让你更好地了解到底遗漏了什么，下面是我的页面：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="../../favicon.ico">
<script src="{{ STATIC_URL }}js/jquery.min.js"></script>
&l
浏览 1提问于2014-08-12得票数 0
2回答
红鼠狼使用放置在/usr/share/redmine/public/favicon.ico上的图标
我发现了很多使用cd /usr/share/redmine/; grep -HR favicon app/的代码片段
app/helpers/application_helper.rb: def favicon
app/helpers/application_helper.rb: "<link rel='shortcut icon' href='#{favicon_path}' />".html_safe
app/helpers
浏览 2提问于2014-12-11得票数 4
回答已采纳
我已经在phpbb论坛添加了一个收藏图标。
我可以在视图源代码中清楚地看到它，但选项卡仍然显示hostgator的收藏夹图标，我也尝试了硬刷新。它没有起作用。
同样的favicon在另一款应用程序上运行良好。
favicon消失的原因是什么？
我直接点击查看源码中的链接，我可以看到图标。
浏览 0提问于2017-06-30得票数 0
尝试学习html并尝试执行包含header.html，从保存header.html文件的_includes文件夹中提取信息，但它不显示在本地服务器上。使用prepros作为我的服务器。
这是我得到的结果- {% include header.html %}
---
---
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewpo
浏览 96提问于2019-08-14得票数 2
我正在处理一个模板，一切都进行得很顺利，直到我尝试用style.css文件中的另一个图像更改主横幅图像。但是，如果我直接将样式设置为index.php中的横幅类，它就能工作。
而且，如果我删除style.css中的整个横幅部分，它仍然工作得很完美，就好像我没有删除任何东西一样。我不再确定我在这里缺少了什么，在链接CSS文件时从未遇到过任何问题。
不工作：
index.php
<?php
session_start();
include('includes/config.php');
error_reporting(0);
?>
<!DOCTYPE HTM
浏览 1提问于2021-11-16得票数 1
回答已采纳
我已经将favicon.ico保存在根文件夹中，并将以下代码添加到我的主页的head部分。我已经尝试过清除缓存，并为页面添加书签，然后重新加载它。图标仍然不显示。
<link rel="shortcut icon" href="/favicon.ico" >
<link rel="icon" href="/favicon.ico" >
有什么建议吗？
浏览 4提问于2013-02-02得票数 1
我没有在head标签中包含下面这行代码，但是我的收藏夹图标仍然出现在我的浏览器中：
<link rel="icon" href="favicon.ico" type="image/x-icon" />
包含它的目的是什么？
浏览 0提问于2011-07-11得票数 241
回答已采纳
我观察到，Internet Explorer (7或8，无关紧要)在短时间内显示我们的网页()而不应用CSS的情况非常罕见。布局看起来完全不完整，所有内容都按从上到下的顺序显示。当页面加载完成后，所有内容最终都会正确显示。
我们的网页没有使用任何花哨的脚本，只有两个QuantCast和谷歌分析的javascript包含，在页面的末尾完成。顺便说一下，在添加QuantCast脚本之前，我们已经有了这个问题。CSS链接在<head>部分：
<head>
<title>Crésus Comptabilité</title>
<link r
浏览 2提问于2010-03-08得票数 2
回答已采纳
在HtmlWebpackPlugin中，我应该如何以及在哪里添加指向css或js等文件的引用链接？
以下是我的webpack配置文件：
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
})
我想要补充的是
<html>
<head>
<!-- App Favicon -->
浏览 3提问于2018-03-16得票数 2
当A在Facebook上发布一个链接，然后B在Chrome浏览器中点击该链接(不是在火狐浏览器中，也没有测试过其他浏览器)，B会在链接页面的标签页上看到脸书上蓝色背景上的白色"f“图标(favicon.ico)。有时，当页面有自己的收藏图标时，刷新该选项卡会用正确的图标替换该图标；但大多数情况下，Facebook的收藏图标会保留下来。起初，我认为Facebook是在以某种棘手的方式使用框架，但使用View Source时，情况似乎并非如此。如何编写href或重定向程序，以便像Facebook那样将自己的收藏图标预加载到链接页面上？
这是我尝试过但没有成功的方法，我的图标被什么
浏览 0提问于2012-04-17得票数 4
回答已采纳
我有一堆HTML页面，它们几乎相等，除了一些次要的细节，比如第二个CSS文件，一个唯一的标题和一个自定义的图标。我不喜欢单独维护所有这些页面的想法。要实现我想要的目标，一种天真的方法是使用GET或POST参数来区分这样的细节：
$customization = array( "favicon" => "favicon_dummy.ico", "title" => "My Page");
if ($_GET["id"] == "my-first-page")
$customiza
浏览 3提问于2014-07-06得票数 0
回答已采纳
如果我为图标PNG指定不同的图像大小，如下所示：
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" />
<link rel="icon" type="image/png" sizes="24x24" href="/favicon-24px.png" />
<link rel="icon" type="image/png"
浏览 9提问于2011-11-19得票数 9
我的超文本标记语言页面中的favicon.ico有一个可怕的问题。下面是我的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<title>Games
浏览 0提问于2013-08-29得票数 1
1回答
我希望我的网站的徽标显示在标题的图标区域，而不是默认的白色文档。我使用：
<head> <LINK REL="SHORTCUT ICON" HREF="/~image/favicon.ico"> </head>
但是什么都没有显示出来
使用的浏览器是:百度浏览器。
浏览 36提问于2018-07-05得票数 1
回答已采纳
在新版本中，删除了get_favicon方法，如文档的部分所示。
当我尝试$item->get_favicon()时，我只得到Call to undefined method SimplePie_Item::get_favicon()
我怎样才能从RSS提要中获得这些图标？
浏览 0提问于2012-10-02得票数 3
4回答
我花了一个半小时阅读关于这个问题的其他帖子，但至今仍未解决。我相信文件在正确的位置，文件路径引用是合适的。我正在本地测试我的web应用程序，尝试对它进行一些样式化，chrome dev工具表示无法找到CSS文件。我正在使用Python、和Jinja2。如果你愿意的话，是你自己的。提前感谢您的时间和专业知识！
这是我的HTML文件。第二项继承自第一项。
base.html
<!DOCTYPE html>
<html>
<head>
<title>Chores</title>
<link rel="styleshe
浏览 2提问于2015-03-02得票数 1
回答已采纳
1回答
我在html和css中有这段代码。问题是背景图像没有出现。首先，我认为问题在于图像的大小，并使其变小。但没有改变。有人能帮我找出问题吗？
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<style>
{background-image:url('background.png');}
</style&
浏览 2提问于2013-12-12得票数 1
回答已采纳
我有一个由两个不同的favicons引用组成的超文本标记语言页面，我想用第一个来覆盖第二个favicons (favicon2)。即：
<head>
<link rel="shortcut icon" href="/assets/images/favicon1.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/assets/images/favicon2.ico" type="ima
浏览 0提问于2012-12-14得票数 2
2回答
我的收藏图标不再显示在我的Vue.js项目中(它工作了一段时间)。据我所知，我没有更改任何与收藏夹图标相关的代码，也没有移动文件。在我的index.html document的<head>标记中，我使用以下(自动生成的)代码行链接到我的收藏夹图标： <link rel="icon" href="<%= BASE_URL %>favicon.png"> 我的收藏夹图标位于public目录中，如下所示 ? 我尝试用以下所有代码替换上面自动生成的代码行，但都无济于事： <link rel="icon"
浏览 9提问于2020-01-27得票数 0
2回答
在XHTML中让网站有一个收藏图标的正确方式是什么？
1.它是必须是.ico还是可以是.gif或.png？
2.这是嵌入和REL值的正确代码吗：
<link rel="shortcut icon" href="http://yoursitedotcom.here/favicon.ico"/>
3. favicon文件是否必须驻留在站点的根目录中，或者它可以在link href属性中正确指定的任何位置？
4.还有别的事吗？
谢谢。
浏览 0提问于2010-09-27得票数 2
回答已采纳
2回答
我已经更改了我的asp.net网站收藏图标，它在浏览网站页面时工作得很好。
我已经将favicon.png放到了Views/Shared/_Layout.cshtml文件中
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-widt
浏览 0提问于2017-02-17得票数 0
<head>
<meta(charset='utf-8')>
<link rel="shortcut icon" type="image/x-icon" href="http://viewwit.com/image/favicon.ico" />
</head>
我的站点的标题是这样开始的，但是这个图标仍然不会出现在我的任何一个页面的标题栏中。
如果你想自己检查一下，这个网站是的(我知道它很糟糕，我只是为了好玩)。
我不明白为什么它不能工作。任何帮助都是很棒的。
浏览 3提问于2016-08-25得票数 0
回答已采纳
2回答
我是JS框架的新手，我可能把函数语法搞错了。这就是我所拥有的，它的想法是，在点击按钮后，它将播放一个快速音频文件，该文件在音频标签中的按钮下面指定。你知道我怎么才能让它工作吗？
import Head from 'next/head'
export default function Home() {
function play() {
var audio = document.getElementById('a1');
audio.play();
}
return (
<div className='home
浏览 51提问于2020-05-19得票数 0
我们的图标在调试时不会出现，尽管它在部署到服务器时会显示出来。是什么导致了这种行为？
我们使用的代码是：
<head>
<title>Our Application Name</title>
<link rel="icon"
type="image/x-icon"
href="favicon.ico"/>
</head>
图像位于我们的根，所以它应该没有问题找到它。
编辑
这只是当在IE9中调试时，在chrome或firefox中调试
浏览 2提问于2013-04-19得票数 0
回答已采纳
6回答
无法更改默认的nuxt偏好图标
、、、、
我是新手，在我的项目中尝试改变默认的偏袒。
我在我的favicon.png文件夹中更改了favicon.ico和static。=> 没有工作。
更改了我的favicon.png文件夹中的favicon.ico和dist文件夹。=> 没有工作。
在我的dist/_nuxt/icons文件夹中替换了由偏袒生成器网站生成的正确文件。=> 没有工作。
这是我的nuxt.config.js
head: {
title: "my first nuxt proj - main page",
meta: [
{ charset: 'utf-
浏览 10提问于2020-04-20得票数 16
回答已采纳
1回答
我正在试着改变Quasar中的图标。我试着按照他们在here中的建议去做，但是没有结果。我试着用Icon Genie清理缓存..。什么都没用。这是我的文件夹结构： .
├── project_name
├── src
├── index.template.html
├── statics
├──icons
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png 在index.t
浏览 26提问于2021-11-19得票数 0
我有两个问题：
a)我如何访问网站中Joomla模板的文件夹，以便我可以看到一些图像放置的位置并替换它。
b)如何更改模板的网站收藏夹图标？网站头像是这样的：
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link
浏览 0提问于2011-07-26得票数 0
1回答
我知道，这不是一个新的技术，这个问题已经问了几次不同的变化。但它们(或谷歌搜索)都不能帮助我解决我的问题。
我使用以下链接：
<link rel="shortcut icon" type="image/x-icon" href="http://example.com/wp-content/themes/scott-odlo/images/favicon/favicon.ico" />
<link rel="apple-touch-icon-precomposed" sizes="144x144"
浏览 2提问于2014-03-04得票数 0
回答已采纳
这些HEAD@{0}和HEAD@{1}是什么意思？HEAD不是应该是指向单个提交的标记吗？为什么这两者都会显示呢？
git reflog
97df263 HEAD@{0}: commit: I just made my first change to this file. Yay!
4333289 HEAD@{1}: clone: from https://github.com/tswicegood/mysite
浏览 3提问于2013-08-07得票数 2
回答已采纳
12回答
我正在尝试做一个非常简单的初步练习来建立一个网站，这是创建一个收藏图标。
这是我使用的代码：
<!DOCTYPE html >
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
</html>
但它不起作
浏览 3提问于2013-08-19得票数 77
我正在使用react来构建我的网页。我把我的favicon.ico放在我的公共/img文件夹中。而favicon.ico的href已设置为/img/ to ic.ico。但偏袒不能加载。在我检查了Chrome中的favicon.ico请求url之后，它仍然是。我希望请求url是
这是我的图标链接代码
<head>
...
<link ref="icon" href="/img/favicon.icon" type="image/x-icon">
...
</head>
非常感谢
浏览 5提问于2022-10-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
