Html 如何使用html在标题栏中添加图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20900670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add an image in the title bar using html?
提问by pro_2911
<DOCTYPE! HTML>
<html>
<head>
<title>Login</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
some text
</body>
</html>
This is the code I wrote to add an image in the new tab bar of the browser. But this is not working. I am also using wamp server, if wamp might be causing problems.
这是我为在浏览器的新标签栏中添加图像而编写的代码。但这是行不通的。我也在使用 wamp 服务器，如果 wamp 可能会导致问题。
回答by David-SkyMesh
According to wikipedia, the most browser-compatible incantation is:
根据wikipedia，与浏览器最兼容的咒语是：
<link rel="shortcut icon" href="favicon.ico" />
After that, you just need to worry about whether your browser is actually downloading the icon. What do the server logs say? Have you checked your browsers network debugging console?
之后，您只需要担心您的浏览器是否真的在下载图标。服务器日志说什么？您是否检查过浏览器的网络调试控制台？
回答by Mirco
W3C says:
W3C 说：
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
[…]
</head>
[…]
</html>
See http://www.w3.org/2005/10/howto-favicon
见http://www.w3.org/2005/10/howto-favicon
But keep in mind: Some browser need a while to recognize that there is a favicon - try to delete the cookies and reopen your site! (And be sure the icon is at the path :) )
但请记住：某些浏览器需要一段时间才能识别出有收藏夹图标 - 尝试删除 cookie 并重新打开您的网站！（并确保图标在路径上:)）
回答by Priscilla
Try the following:
请尝试以下操作：
<link rel="icon" type="image/png" href="img/iconimg.png" />
NB: The hrefis the directory to your image example. Your image is in a folder called "img" and your image name is "iconimg" and if it is a png use .png, if it is a jpg then .jpg. Remember to do this in the head of your file and not in the body.
注意：这href是您的图像示例的目录。您的图像位于名为“img”的文件夹中，您的图像名称为“iconimg”，如果它是 png 使用.png，如果它是 jpg 则.jpg. 请记住在文件的头部而不是在正文中执行此操作。
回答by Basil Mohammed
I tried in my angular7 project by writing these lines and worked.
我通过编写这些行并在我的 angular7 项目中进行了尝试。
<link rel="icon" type="image/x-icon" href="filepath/filename.ico">
please be noted that the image file should be in icon format (.ico)
请注意，图像文件应为图标格式（.ico）
回答by ent3r_
I just tried with this code, and it worked for me: <link rel="icon" type="image/jpg" href="C:\Users\nrm05\Pictures\logo.jpg" />Be sure to type type="image/jpg"for jpg files, and type="image/png"for PNG files. If you haven't downloaded the image, but you know the image URL, then you can type it in like this: href="image_url"
我刚刚尝试使用此代码，它对我有用：<link rel="icon" type="image/jpg" href="C:\Users\nrm05\Pictures\logo.jpg" />请务必输入type="image/jpg"jpg 文件和type="image/png"PNG 文件。如果您尚未下载图像，但知道图像 URL，则可以像这样输入：href="image_url"
Hope this answered your question :-)
希望这能回答你的问题:-)
回答by Matt
in your you have capital letters for html.you wrote it as THIS IS NOT CORRECT!!! your browser will not understand it as html5.
在你的 html 中，你有大写字母。你写的因为这不正确！！！您的浏览器不会将其理解为 html5。
回答by Jyotsna Singh
Use the following
使用以下
1.) Choose the image you want to set in your title bar.
2.) Convert it to ".ico" format. (You can use the following link online)
http://image.online-convert.com/convert-to-ico
3.) Save the file as "favicon.ico" in the same folder as your .html file
4.) Add this inside your head tag <link rel="shortcut icon" href="favicon.ico"/>
1.) 在标题栏中选择要设置的图像。
2.) 将其转换为“.ico”格式。（您可以在线使用以下链接）
http://image.online-convert.com/convert-to-ico
3.) 在与 .html 文件相同的文件夹中将文件另存为“favicon.ico”
4.)将此添加到您的 head 标签中<link rel="shortcut icon" href="favicon.ico"/>
回答by NARGIS PARWEEN
Showing image in title bar is easy. please follow the steps :
在标题栏中显示图像很容易。请按照以下步骤操作：
a) first save you image some where in the folder and name like favicon. b) then use below line inside head tag of the html view
a）首先将您的图像保存在文件夹中的某个位置，并命名为 favicon。b) 然后在 html 视图的 head 标签内使用下面的行
<link rel="icon" type="image/png" href="image_url" />
c) Here you must know the path of your file, where you have saved the image d) save your image url in place of image_urle) save your working.
c) 在这里你必须知道你的文件的路径，你保存图像的位置 d) 保存你的图像 url 代替image_urle) 保存你的工作。
回答by sam bhola
it works
有用
Add this inside your head tag
将此添加到您的 head 标签中
<link rel="shortcut icon" href="http://example.com/myicon.png" />
