Favicon не отображается, если его имя не «favicon.ico» — локальный сервер Apache2
Я пытаюсь добавить favicon на свою веб-страницу.
Он отлично работает, если имя значка favicon.ico. Но что, если я не хочу, чтобы он так назывался?
Что делать, если я хочу добавить больше значков разных размеров. Нравится 192x192 для Android Chrome?
Мой сайт не работает. Это местное. Это на Apache2. У меня есть это на Raspberry Pi и на моем ПК с Linux. Оба сервера имеют идентичные настройки/конфигурации. Он ведет себя одинаково на обоих серверах.
Все файлы (html, php, png, ico и т. д.) находятся в одном каталоге: /var/www/mysite. Я изменил DocumentRoot на DocumentRoot /var/www/mysite внутри etc/apache2/sites-enabled/000-default.conf
Я использую Хром. Я очистил кеш. Я обновляю страницу с помощью SHIFT + F5, CTRL + F5 или F5; все с аналогичными результатами.
Обратите внимание, что это index.php не index.html.
Вот что я написал внутри тега head внутри index.php:
<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. Единственное, что приблизилось к ответу на мои вопросы, это этот ТАК вопрос. Но, поскольку вопросу уже 8 лет, я очень надеюсь, что с тех пор что-то изменилось.
Исправить:
Исправление, которое я нашел, заключалось в том, чтобы на самом деле включить favicon.ico.
Кроме того, благодаря @Пунит Гаджар я смог найти один из лучших онлайн-инструментов для создания фавиконов: Генератор настоящих фавиконок.
Рекомендую всем, кто пытается сделать фавикон.
После использования Генератор фавиконок я добавил все сгенерированные файлы (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">
Ответы 1
Чтобы использовать файл .png, вы должны использовать атрибуты type = "image/png", как показано ниже.
<link rel = "icon" type = "image/png" href = "http://example.com/image.png" />
Убедитесь, что указанный вами путь является абсолютным.
@bleah1, проверь это stackoverflow.com/questions/6121725/…
<link rel = "icon" sizes = "192x192" href = "favicon-192x192.png">былоtype = "image/png". Я забыл добавить его обратно. Я просто сделал и ничего не изменилось. А как насчет этого:<link rel = "shortcut icon" href = "/favicon16x16.ico?v=3" type = "image/x-icon">? Почему это не работает? Почему мой путь должен быть абсолютным? Все файлы находятся в том же каталоге, что и index.php. Что еще я делаю?