README

此插件将解决您所有的favicon烦恼 :)

安装

composer require moritzebeling/kirby-favicon

或者将此仓库下载/克隆到您的Kirby项目的site/plugins目录。

🙃 最小化设置

在assets/favicon目录中添加favicon.png

图标应为正方形，最小尺寸180x180px，但为什么不直接使用1024x1024px呢？ :)

😎 推荐设置

还可以添加一个favicon.svg
在HTML的<head>元素中包含favicon代码片段

<?php snippet('favicon') ?>

如果您想在favicon中使用透明度，还需要添加一个应用图标。遮罩图标将在MacBook Pro触摸条中使用，因此它应该是简单的并且有透明背景。

如果您的网站有可变背景颜色，应将color设置为false，否则我建议将其设置为您的首选背景颜色。

🤓 完整配置

return [
    'moritzebeling.kirby-favicon' => [
        'favicon' => [
            'png' => 'assets/favicon/favicon.png', // required
            'ico' => 'assets/favicon/favicon.ico', // fallback to favicon.png
            'svg' => 'assets/favicon/favicon.svg',
            'sizes' => [ 32, 96, 16, 180 ],
        ],
        'app' => [
            'icon' => 'assets/favicon/app-icon.png', // fallback to favicon.png
            'sizes' => [ 180, 167, 152 ]
        ],
        'mask' => 'assets/favicon/mask.svg', // fallback to favicon.svg
        'color' => '#ffffff',
        
        // for minimal html output
        'minimalist' => false,
        
        // the following will ony be show when 'extended' is set to true
        'extended' => false,

        'manifest' => [
            'icon' => 'assets/favicon/android-icon.png', // fallback to favicon.png
            'background_color' => '#ffffff',
            'sizes' => [
                36 => 0.75,
                48 => 1.0,
                72 => 1.5,
                96 => 2.0,
                144 => 3.0,
                192 => 4.0,
                512 => false
            ],
            // other entries can be added here
        ],
        'browserconfig' => [
            'icon' => 'assets/favicon/ms-tile.png', // fallback to favicon.png
            'sizes' => [ 70, 150, 310 ]
        ],
    ]
];

manifest.json

您可以添加其他值，根据规范。

🤨 它会做什么？

它将自动提供以下路由

favicon.ico
apple-touch-icon.png及其所有版本，如
- apple-touch-icon-precomposed.png
- apple-touch-icon-167.png
- apple-touch-icon-167-precomposed.png
- 以及Safari可能请求的任何内容
manifest.json
browserconfig.xml

默认情况下，favicon代码片段将打印以下HTML

<link rel="icon" type="image/svg+xml" href="/media/.../favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/media/.../favicon-32x.png">
<link rel="icon" type="image/png" sizes="96x96" href="/media/.../favicon-96x.png">
<link rel="icon" type="image/png" sizes="16x16" href="/media/.../favicon-16x.png">
<link rel="alternate icon" type="image/png" href="/media/.../favicon-180x.png">
<link rel="apple-touch-icon" type="image/png" href="/media/.../favicon-180x.png">
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="/media/.../favicon-167x.png">
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="/media/.../favicon-152x.png">
<meta name="theme-color" content="#0000ff">
<link rel="mask-icon" href="/media/.../favicon.svg" color="#0000ff">

所有尺寸都可以通过插件设置进行调整。当minimalist设置为true时，所有尺寸都将被移除

<link rel="icon" type="image/svg+xml" href="/media/.../favicon.svg">
<link rel="alternate icon" type="image/png" href="/media/.../favicon-180x.png">
<link rel="apple-touch-icon" type="image/png" href="/media/.../favicon-180x.png">
<meta name="theme-color" content="#0000ff">
<link rel="mask-icon" href="/media/.../favicon.svg" color="#0000ff">

当extended选项为true时，将添加以下内容

<link rel="manifest" href="/manifest.json">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="msapplication-TileColor" content="#0000ff">
<meta name="msapplication-TileImage" content="/media/.../favicon-144x.png">

面板favicon

https://getkirby.com/docs/reference/system/options/panel#custom-panel-favicon

研究

此解决方案是许多现有favicon生成器提供的解决方案的交集。您可以在仓库Wiki中查看我的研究：https://github.com/moritzebeling/kirby-favicon/wiki

开发

安装一个新的Kirby StarterKit
cd site/plugins
git clone此仓库

路线图

使favicon可以从面板更改

☕️ 支持

如果您喜欢这个插件，我将很高兴如果您通过PayPal邀请我喝杯咖啡。如果您有任何关于进一步开发的想法或遇到任何问题，请打开一个问题或PR。谢谢！

保修

此插件仍在开发中，并且没有任何保修。自行承担风险使用。

moritzebeling / kirby-favicon

维护者

详细信息