Getting Started
Use high-quality PNG files for good results. I recommend the minimum size is 512x512 px.
We need PHP imagick extension or PHP GD extension for generating images. By default, the Imagick extension is loaded, if you cannot install it, you can switch to using GD via command line option if available.
Installation Using Composer
Installation is best done via Composer. Assuming Composer is installed globally, you may use the following command:
composer require officialxviid/ci4favicon
Manual Installation
Should you choose not to use Composer to install, you can clone or download this repo and then enable it by editing app/Config/Autoload.php and adding the OfficialXVIID\CI4Favicon namespace to the $psr4 array. For example, if you copied it into app/ThirdParty/:
$psr4 = [
'Config' => APPPATH . 'Config',
APP_NAMESPACE => APPPATH,
'App' => APPPATH,
'OfficialXVIID\CI4Favicon' => APPPATH . 'ThirdParty/ci4favicon-1.0.0/src',
];
To copy files within a project using robust detection and error checking, run the following command:
php spark ci4favicon:publish
This will generate App\Config\CI4Favicon.php
Configure your App\Config\CI4Favicon.php
-
$input: Path to the input image files, which is required -
$output: Path to the folder which contains output files. If this folder does not exist, the package will try to create it. This argument is optional, default value is current folder. -
$appName: Set the application name in the manifest.json file. Default is an empty string. -
$tileColor: The background of live tile when this site is pinned. Fill in a HEX color for your Tile Color. -
$browserConfigFile: The path to browser config XML file if you have it. By default, it is set to an empty string to prevent IE from auto looking browserconfig.xml file. If you have a browser configuration, put the file in the public folder. -
$ico64: Include the 64x64 image inside the output ICO file (which contains only 16x16 and 32x32 images by default) -
$ico48: Include the 48x48 image inside the output ICO file (which contains only 16x16 and 32x32 images by default). -
$noOldApple: Exclude pngs files that used by old Apple touch devices. -
$noAndroid: Exclude manifest.json files and PNG files for Android devices -
$noMs: Exclude images for Windows tile
Once you have configured it, run this command to generate the favicon:
php spark ci4favicon:generate
This will output the resulting favicon in your $output.
To produce HTML Tag output, there are 2 ways you can do it.
-
Send variables from Controllers to Views.
open your app\Controllers\Home.php
<?php namespace App\Controllers; use OfficialXVIID\CI4Favicon\CI4Favicon; class Home extends BaseController{ public function index(){ $favicon = new CI4Favicon(); $favicon->output(); $data['favicon'] = $favicon; return view('welcome_message', $data); }}
open your app\Views\welcome_message.php
<head> ... <?= $favicon; ?> ... </head>
-
Using helpers.
open your app\Views\welcome_message.php
<head> ... <?php helper('ci4favicon'); echo ci4favicon(); ?> ... </head>
HTML Tag Result:
<meta name="msapplication-config" content="/IEConfig.xml" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="manifest" href="/manifest.json" />
<meta name="application-name" content="CI4Favicon App" />
<meta name="msapplication-TileColor" content="#F0F0F0" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="/mstile-310x310.png" />
