修复：

Question

我正在尝试向我的网页添加favicon。

如果图标名称为favicon.ico，则效果很好。 但是，如果我不希望这样命名怎么办？

如果我想添加更多不同大小的图标怎么办。就像适用于Android Chrome的192x192一样？

我的网站未启用。它是本地的。在Apache2上。我在Raspberry Pi和Linux PC上都有它。两台服务器具有相同的设置/配置。两台服务器上的行为完全相同。

所有文件（html，php，png，ico等）都位于一个目录内：/var/www/mysite。我已将DocumentRoot内的DocumentRoot /var/www/mysite更改为etc/apache2/sites-enabled/000-default.conf

我正在使用Chrome。我清除了缓存。我正在使用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。

此外，感谢this SO question，我得以在线找到最好的网站图标工具之一：@Punit Gajjar。

我向所有尝试制作收藏图标的人推荐。使用 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">

Answer 1

要使用。png文件，必须使用type="image/png"属性，如下所示。

<link rel="icon" type="image/png" href="http://example.com/image.png" />

确保给出的路径是绝对路径。

除非其名称为“ favicon.ico”，否则不会显示favicon-本地Apache2服务器

修复：

1 个答案: