如何在Laravel中链接网站图标

Question

我们知道如何根据下面的代码链接HTML图像和CSS文件。

{{ HTML::image('images/example.jpeg', 'Example Image') }}
{{ HTML::style('css/main.css') }}

在Laravel中如何链接网站图标（favicon icon），因为我们不能像静态HTML文件那样操作？

- Ahmad Sharif

Answer 1

对于 Laravel 5.xx

我们可以按照以下方式链接 favicon 图标和 css 文件。在 Laravel 应用程序中，将您的favicon图标和css文件放置在 public 文件夹下。在我的情况下，我将它们放在public/css文件夹下。

<link rel="shortcut icon" href="{{ asset('img/favicon.png') }}">
<link href="{{ asset('css/style.css') }}" rel="stylesheet">

适用于 Laravel 6.00

<link rel="icon" href="{{ URL::asset('/css/favicon.jpg') }}" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="{{ URL::asset('/css/app.css')  }}">

适用于 Laravel 8.00

<link rel="icon" href="{{ url('css/favicon.jpg') }}">
<link rel="stylesheet" type="text/css" href="{{ url('css/style.css') }}">

- Ahmad Sharif

---

很抱歉，Laravel 5 中已经移除了 Html 构建器。不过，laravelcollective.com 把它带回来了。通过检查其源代码，我发现有一个 favicon 方法可以这样使用： {!! Html::favicon('favicon') !!}。请注意，我只翻译了原文，没有做任何解释或添加其他内容。 - Charles Yapp

不确定为什么这个例子中要使用三重大括号 {{{ ... }}}，应该改为使用双重大括号 {{ .. }}。 - DrewT

@DrewT现在已经修复。 - Kenny Horna

问题在于你不能在配置文件中使用这些方法：https://github.com/laravel/framework/issues/32167 - Pathros

Answer 2

在 Laravel 5 中，网站图标 favicon.ico 存储在 public/favicon.ico。要更改网站图标，只需将 public/favicon.ico 替换为您自己的即可。

- s-hunter

---

只有当我使用 laravel new 进行全新安装时，favicon.ico 才没有被正确添加。我的意思是，该文件大小为零字节。这是我第一次检查，所以不确定是否是偶然事件。无论如何，您可以用自己的 favicon.co 替换它。当您重新启动浏览器时，您将看到它。 - rhand

你好，我知道我没有发帖，但这在我的本地主机上有效，我需要做什么才能在域名上运行？附注：对我的英语表示抱歉。 - Mau España

Answer 3

<link rel="shortcut icon" href="{{ asset('img/favicon.ico') }}">

在 Blade 模板中，我们可以使用 asset('img/favicon.ico') 的形式来使用资源文件，但是这些资源文件应该放在 {{...}} 中而不是 {{{...}}} 中。

- Kushagra Saxena

Answer 4

如果您正在使用LaravelCollective，

{{ Html::favicon( '/assets/images/favicon.ico' ) }}

您可以在/vendor/laravelcollective/html/src/HtmlBuilder中查看整个Html方法。

编辑：安装指南在这里。

- vozaldi

Answer 5

还有其他方法来展示它。

    <link rel="shortcut icon" type="image/x-icon" href="{{ URL::to('fav icon link') }}"/>

希望这能有所帮助。

- Koushik Das

Answer 6

我认为更好的方法是在您的公共文件夹中添加一个manifest.json文件，并在该文件夹中添加不同大小的网站图标。Laravel会自动识别它。

manifest.json的示例：

{
    "name": "Your app name",
    "short_name": "",
    "icons": [
        {
             "src": "favicon.ico",
             "sizes": "64x64 32x32 24x24 16x16",
             "type": "image/x-icon"
        },
        {
            "src": "android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

- Gabor Juhasz

Answer 7

默认的 .ico 网站图标和适用于现代浏览器的最佳质量的 .png 网站图标位于 /public/ 目录下。

<link rel="shortcut icon" href="{{ asset('favicon.ico') }}">
<link rel="icon" type="image/png" href="{{ asset('favicon.png') }}">

- Boss COTIGA

Answer 8

对于公共使用的图片：

标题标签为您的标题

接着是：

链接 rel='shortcut icon' href='public/favicon.ico' type='image/x-icon'

对于位于公共文件夹中其他位置的图片：

标题标签为您的标题

接着是：

链接 rel='shortcut icon' href='public/pathtoicon/favicon.ico' type='image/x-icon'

希望这对您有所帮助。

- sainath kishore

Answer 9

如果你正在使用 laravelcollective/html

{!! Html::favicon('public/images/favicon.ico') !!}

- ViShU