本地Apache2服务器非favicon.ico图标不显示，如何添加多尺寸图标？

最近我在本地Apache2服务器（分别部署在树莓派和Linux电脑，配置完全一致）上遇到了favicon的适配问题：想使用自定义名称的图标，同时添加多尺寸图标（比如适配Android Chrome的192x192版本），但发现只有命名为favicon.ico时才能正常显示。网站文件都放在/var/www/mysite，Apache的DocumentRoot也已配置正确，用Chrome测试时多次清除缓存、尝试各种刷新方式都没解决，页面是index.php而非静态html。

最初我在index.php的<head>里写的代码是：

<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#e11422">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#e11422">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#e11422">
<link rel="shortcut icon" href="/favicon16x16.ico?v=3" type="image/x-icon">
<link rel="icon" sizes="192x192" href="favicon-192x192.png">
<link rel = "stylesheet" type = "text/css" href = "master.css">
<title>Home Page</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<!-- <script> $(document).ready( function(){ $('.text-box').load('events_placeholder.html'); refresh(); }); function refresh(){ setTimeout( function() { $('.text-box').load('events_placeholder.html'); refresh(); }, 1000); } </script> -->
<script> /* When the user clicks on the button,toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } /* Close the dropdown menu if the user clicks outside of it */ window.onclick = function(event) { if (!event.target.matches('.dropbtn') && !event.target.matches("#text-input") && !event.target.matches("#button")) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } </script>
<script> $(document).ready(function() { $('.URR').change(function() { var n = $('.URR').val(); if (n < 1) $('.URR').val(1); if (n > 10) $('.URR').val(10); }); $('.Brightness').change(function() { var m = $('.Brightness').val(); if (m < 2) $('.Brightness').val(2); if (m > 99) $('.Brightness').val(99); }); }); </script>
</head>

后来查了资料并尝试后，找到了解决方案：

解决步骤 #

1. 保留根目录下的favicon.ico文件：浏览器会默认向服务器根目录请求这个文件，哪怕你指定了其他图标，保留它能避免这个默认请求失败，确保基础图标正常显示。
2. 使用专业工具生成全平台适配图标：推荐使用Real Favicon Generator工具，它能生成适配所有主流平台（iOS、Android、Windows等）的各种尺寸图标，以及对应的引用代码。生成所有文件后，把它们放到/var/www/mysite目录下，然后在<head>中添加以下完整的引用代码：

<!-- iOS App Icon-->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=476mA4zprB">
<!-- Chrome, Firefox OS and Opera -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=476mA4zprB">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=476mA4zprB">
<link rel="manifest" href="/site.webmanifest?v=476mA4zprB">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=476mA4zprB" color="#e11422">
<link rel="shortcut icon" href="/favicon.ico?v=476mA4zprB">
<!-- Tab Color iOS Safari -->
<meta name="apple-mobile-web-app-title" content="#e11422">
<meta name="application-name" content="#e11422">
<!-- Tile Color Microsoft Windows Shortcut -->
<meta name="msapplication-TileColor" content="#b91d47">
<!-- Tab Color Android Chrome -->
<meta name="theme-color" content="#e11422">

这样设置后，自定义名称的多尺寸图标就能正常显示，同时覆盖了各个平台的适配需求。

内容的提问来源于stack exchange，提问作者bleah1