题
方法1
将名为favicon.ico的文件放在主目录中是一种方法。浏览器始终请求该文件。您可以在apache日志文件中看到它。
方法2
<head>部分中的HTML标记：
<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
有几种方法可以创建图标。最好的方法取决于各种因素：
如果你想快速完成工作，你可以使用favicon generator。这个为所有主要的桌面和移动浏览器创建图片和HTML代码。完全披露：我是这个网站的作者。
此解决方案的优点：它很快，所有兼容性考虑因素已经为您解决。
如你所知，你可以创建一个包含16x16和32x32图片的favicon.ico文件（请注意Microsoft recommends 16x16, 32x32 and 48x48）。
然后，在HTML代码中声明它：
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
此方法适用于所有桌面浏览器，无论新旧。但大多数移动浏览器都会忽略图标。
关于你将favicon.ico文件放在root中而不是声明它的建议：注意，尽管这种技术适用于大多数浏览器，但它并非100％可靠。例如，Windows Safari无法找到它（被授予：此浏览器在Windows上以某种方式被弃用，但您明白了这一点）。与PNG图标（适用于现代浏览器）结合使用时，此技术非常有用。
在您的问题中，您没有提到移动浏览器。他们中的大多数将忽略favicon.ico文件。虽然您的网站可能专用于桌面浏览器，但您可能不希望完全忽略移动浏览器。
您可以实现与以下的良好兼容性：
favicon.ico，见上文。用它们声明它们
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">
这不是完整的故事，但在大多数情况下它已经足够好了。
我使用https://iconifier.net我上传了我的图像，下载了图像zip文件，添加了图像到我的服务器，按照网站上的说明，包括添加到我的index.html的链接，它工作。 “添加到主屏幕”时，我的图标现在在我的iPhone上显示在Safari中
我认为所以最重要的事情已经说过了。我只想补充一点，这个声明允许你将一个可移动的GIF放在favicon的位置：
<link rel="shortcut icon" href="img/icon.gif" />
这发生在some pages上。移动图标的效果使得该网站的卡片从其他卡片中脱颖而出。不幸的是，任何浏览器都无法保证此行为和此属性。即使是Firefox，我在第二天观察到它，在第二天显示了一个标准的空图标代替同一页面的GIF。