Html 如何让我的页面标题有一个图标?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1417480/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 00:51:00  来源:igfitidea点击:

How do I get my page title to have an icon?

htmlicons

提问by littlechris

I would like to have my site's logo shown in the icon area of the title rather than the default white document. Exactly as Stack Overflow has it.

我希望在标题的图标区域而不是默认的白色文档中显示我网站的徽标。就像 Stack Overflow 一样。

回答by NiklasMM

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

add this to your HTML Head. Of course the file "favicon.ico" has to exist. I think 16x16 or 32x32 pixel files are best.

将此添加到您的 HTML Head。当然,文件“favicon.ico”必须存在。我认为 16x16 或 32x32 像素文件最好。

回答by littlechris

this is an interesting question so let check it if you have a image for use as a website-icon then

这是一个有趣的问题,如果您有用作网站图标的图像,请检查一下

Add this to your script

将此添加到您的脚本中

   <link rel="icon" type="image/gif" href="animated_favicon1.gif" />

otherwise if you have a icon for your website icon then you chose

否则,如果您的网站图标有图标,那么您选择了

 <link rel="shortcut icon" href="favicon.ico" />

I always use http://www.iconspedia.com/for more icons

我总是使用http://www.iconspedia.com/获取更多图标

if my answer solved your problem then give me vote ok

如果我的回答解决了你的问题,那么给我投票

回答by devXen

Apparently you can use this trick.

显然你可以使用这个技巧。

<title> My title</title>

That icon-alike is actually a text.

那个类似图标实际上是一个文本。

回答by Paul McLean

They're called favicons, and are quite easy to make/use. Have a read of http://www.favicon.com/for help.

它们被称为收藏夹图标,并且很容易制作/使用。阅读http://www.favicon.com/以获得帮助。

回答by Amir A. Shabani

The accepted answerworks perfectly fine. I just want to mention a minor problem with the answer devXen has given.

接受的答案工作完全正常。我只想提一下devXen 给出答案的一个小问题。

If you set the icon like this:

如果你这样设置图标:

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

The icon will work as expected:

该图标将按预期工作:

enter image description here

在此处输入图片说明

However, if you set it like devXenhas suggested:

但是,如果您按照 devXen 的建议进行设置:

<title> Amir A. Shabani</title>

The title of the page moves upon refresh:

页面标题在刷新时移动:

enter image description here

在此处输入图片说明

So I would advise using <link>instead.

所以我建议<link>改用。

回答by MD SHAYON

This code will defiantly work. In a comment I saw they are using ejs syntex that is not for everyone only for those who are working with express.js

这段代码可以正常工作。在评论中,我看到他们正在使用 ejs 语法,这并不适合所有人,仅适用于使用 express.js 的人

<link rel="icon" href="demo_icon.gif" sizes="16x16">
<title> Reddit</title>

you can also add png and jpg

您还可以添加 png 和 jpg

回答by C.A. Gavin Lee

According to w3school:

根据 w3school

<link rel="icon" href="your_icon"/>

回答by Remember Why You Started

If using in ruby rails use the below code.

如果在 ruby​​ rails 中使用,请使用以下代码。

For calculating the path of the file, asset_path function is used to find the image that we are using inside of the rails code embedded in <%= code %>

为了计算文件的路径,asset_path 函数用于找到我们在嵌入的 rails 代码中使用的图像 <%= code %>

<link rel="icon" type="image/png" href="<%= asset_path('icon_name.jpg')%>">