favicon 不会显示,除非它的名称是 "favicon.ico" - 本地 Apache2 服务器
favicon doesn't show up unless its name is "favicon.ico" - Local Apache2 Server
我正在尝试将 favicon
添加到我的网页。
如果图标名称是 favicon.ico
就可以正常工作。 但是如果我不希望它被这样命名呢?
如果我想添加更多不同大小的图标怎么办?就像 Android Chrome 的 192x192 ?
我的网站未上线。这是本地的。它在 Apache2 上。我在 Raspberry Pi 和我的 Linux PC 上都有它。两台服务器具有相同的 settings/configurations。
它在两台服务器上的行为完全相同。
所有文件(html、php、png、ico 等)都在一个目录中:/var/www/mysite
。我已经将 DocumentRoot
更改为 DocumentRoot /var/www/mysite
inside etc/apache2/sites-enabled/000-default.conf
我正在使用 Chrome。我清除了缓存。我正在使用 SHIFT + F5
、CTRL + F5
或 F5
刷新页面;所有结果都相似。
注意是index.php
不是index.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>
我已经阅读了在 SO 和 Google 上可以找到的所有内容。
唯一接近回答我的问题的是 this SO question。但是,这个问题已经 8 年了,我真的希望从那以后有所改变。
修复:
我发现的修复实际上是包含一个 favicon.ico
。
此外,感谢 @Punit Gajjar I was able to find one of the best favicon tools online: Real Favicon Generator。
我向所有尝试制作网站图标的人推荐它。
使用 Favicon Generator 后,我将生成的所有文件(png、ico)添加到 index.php
所在的位置以及 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">
为了使用 .png
文件,您必须使用 type="image/png"
属性,如下所示。
<link rel="icon" type="image/png" href="http://example.com/image.png" />
确保您提供的路径是绝对路径。
我正在尝试将 favicon
添加到我的网页。
如果图标名称是 favicon.ico
就可以正常工作。 但是如果我不希望它被这样命名呢?
如果我想添加更多不同大小的图标怎么办?就像 Android Chrome 的 192x192 ?
我的网站未上线。这是本地的。它在 Apache2 上。我在 Raspberry Pi 和我的 Linux PC 上都有它。两台服务器具有相同的 settings/configurations。 它在两台服务器上的行为完全相同。
所有文件(html、php、png、ico 等)都在一个目录中:/var/www/mysite
。我已经将 DocumentRoot
更改为 DocumentRoot /var/www/mysite
inside etc/apache2/sites-enabled/000-default.conf
我正在使用 Chrome。我清除了缓存。我正在使用 SHIFT + F5
、CTRL + F5
或 F5
刷新页面;所有结果都相似。
注意是index.php
不是index.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>
我已经阅读了在 SO 和 Google 上可以找到的所有内容。 唯一接近回答我的问题的是 this SO question。但是,这个问题已经 8 年了,我真的希望从那以后有所改变。
修复:
我发现的修复实际上是包含一个 favicon.ico
。
此外,感谢 @Punit Gajjar I was able to find one of the best favicon tools online: Real Favicon Generator。
我向所有尝试制作网站图标的人推荐它。
使用 Favicon Generator 后,我将生成的所有文件(png、ico)添加到 index.php
所在的位置以及 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">
为了使用 .png
文件,您必须使用 type="image/png"
属性,如下所示。
<link rel="icon" type="image/png" href="http://example.com/image.png" />
确保您提供的路径是绝对路径。