包简介

Kirby plugin to meet all favicon needs

README 文档

README

This plugin will solve all your favicon worries :)

Installation

composer require moritzebeling/kirby-favicon

Or download/clone this repo into site/plugins of your Kirby project.

🙃 Minimal setup

Inside assets/favicon add favicon.png

The icon should be square, min 180x180px, but why don’t you just do 1024x1024px :)

😎 Recommended setup

Also add a favicon.svg
Inside your HTML <head> element, include the favicon snippet:

<?php snippet('favicon') ?>

If you want to use transparency in your favicon, you should additionally add an app icon. The mask icon will be used in the MacBook Pro Touch Bar, so it should be simple and with transparent background.

If your website has a changing background color, you should set color to false, otherwise I recommend to set it to you primary background color.

🤓 Full configuration

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

You can add other values according to the specification.

🤨 What will it do?

It will automatically serve the following routes:

favicon.ico
apple-touch-icon.png and all its versions like
- apple-touch-icon-precomposed.png
- apple-touch-icon-167.png
- apple-touch-icon-167-precomposed.png
- and whatever Safari feels like requesting
manifest.json
browserconfig.xml

Per default, the favicon snippet will print the following 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">

All sizes can be adjusted through the plugin settings. When minimalist is set to true, all sizes are removed:

<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">

When extended option is true, the following is added:

<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">

Panel Favicon

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

Research

This solution is an intersection of what many existing Favion generators provide. You can have a look on my research in the repo wiki: https://github.com/moritzebeling/kirby-favicon/wiki

Development

Install a fresh Kirby StarterKit
cd site/plugins
git clone this repo

Roadmap

Make favicon changable from panel

☕️ Support

If you like this plugin, I would be glad if you would invite me for a coffee via PayPal If you have any ideas for further development or stumble upon any problems, please open an issue or PR. Thank you!

Warranty

This plugin is work in progress and comes without any warranty. Use at your own risk.

moritzebeling/kirby-favicon 适用场景与选型建议

moritzebeling/kirby-favicon 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 5.06k 次下载、GitHub Stars 达 14，最近一次更新时间为 2023 年 02 月 19 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「php」「plugin」「seo」「meta」「icon」「kirby」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 moritzebeling/kirby-favicon 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 moritzebeling/kirby-favicon 我们能提供哪些服务？

定制开发 / 二次开发

基于 moritzebeling/kirby-favicon 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 moritzebeling/kirby-favicon 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

maiconpinto/cakephp-adminlte-theme 171

CakePHP 4.x AdminLTE Theme.

novius/laravel-meta 0

Help to manage meta data on Laravel Eloquent model

ali-awwad/fine-seo 5

Statamic Fine Seo addon

laemmi/laemmi-yourls-default-tools 0

Plugin for YOURLS. Default tools to use in some laemmi plugins

foxtes/alfabank-rest 1

Alfabank REST API integration

aurmil/magento-force-store-code 4

Magento - Force store code extension

moritzebeling/kirby-favicon

包简介

关键字：