CI4Favicons

Auto generate favicons and HTML tags from a original PNG file

This plugin will help you (CodeIgniter developer) to display the correct favicon for your website with just one original PNG image.

Introductions | Getting Started | Docs | License

Powered by XVIID

Introduction

👁️ Overviews

It supports:

• Create one ICO file and many PNG files with many favicon sizes from just one original PNG image as well as a manifest.json file for Android devices. Both input file path and output folder (which contains images and json files) are configurable via a command line interface.
• Generate suitable meta and link tags for desktop web browsers as well as mobile touch devices to properly display favicon.

Language supports: English (en), Indonesian (id), Japanese (ja), Russian (ru), German (de), Spanish (es), Turkish (tr), Simplified Chinese (zh), Persian (fa)

🧰 Requirements

CI4Favicon has the following requirements:

• PHP 7.4+
• PHP GD
• CodeIgniter Framework

📏 Sizes

CI4Favicon generates the following sizes:

• favicon: 16x16, 32x32, 96x96
• android-icon: 36x36, 48x48, 72x72, 96x96, 144x144, 192x192
• apple-icon: 57x57, 60x60, 72x72, 114x114, 76x76, 120x120, 152x152, 180x180
• apple-startup: 320x460, 640x920, 640x1096, 748x1024, 750x1024, 750x1294, 768x1004, 1182x2208, 1242x2148, 1496x2048, 1536x2008
• msapplication: 144x144, 70x70, 150x150, 310x150, 310x310

💻 Basic Commands

• ci4favicons:publish to start and copy the CI4Favicon Config file to your application.
• ci4favicons:generate to generate favicon.
• ci4favicons:help to show help.

Getting Started

🎁 Preparation

Use high-quality PNG files for good results. I recommend the minimum size is 512x512 px.

📥 Installation

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,
    'XVIID\CI4Favicons' => APPPATH . 'ThirdParty/ci4favicons-1.0.0/src',
];

🚀 Publishing

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

⚙️ Config

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

🪄 Generate

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.

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

License

CI4Favicon is under MIT License. See the LICENSE file for more detail.