https://github.com/dyonmulya/codeigniter4-favicons
🖼️ Auto generate favicons for CodeIgniter 4
https://github.com/dyonmulya/codeigniter4-favicons
ci ci4 codeigniter codeigniter4 favicons favicons-generator gd imagick php
Last synced: about 1 month ago
JSON representation
🖼️ Auto generate favicons for CodeIgniter 4
- Host: GitHub
- URL: https://github.com/dyonmulya/codeigniter4-favicons
- Owner: dyonmulya
- License: mit
- Created: 2025-11-04T15:28:39.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-11-05T02:47:42.000Z (about 1 month ago)
- Last Synced: 2025-11-05T04:20:21.768Z (about 1 month ago)
- Topics: ci, ci4, codeigniter, codeigniter4, favicons, favicons-generator, gd, imagick, php
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
CodeIgniter 4 Favicons
A codeigniter 4 library to auto generate favicons to your main application.
Getting Started ·
Generate Favicons ·
Generate Tags
Getting Started
Requirements
- PHP version 8.1 or higher
- CodeIgniter version 4.1 or higher
-
Image Processing Extension, like:
- Imagick
- Gd
Installation
Packagist (Composer)
```bash
composer require dyonmulya/codeigniter4-favicons
```
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 DyonMulya\Codeigniter4Favicons namespace to the $psr4 array. For example, if you copied it into app/ThirdParty/:
```php
$psr4 = [
'Config' => APPPATH . 'Config',
APP_NAMESPACE => APPPATH,
'App' => APPPATH,
'DyonMulya\CodeIgniter4Favicons' => APPPATH . 'ThirdParty/codeigniter4-favicons/src',
];
```
Publish
After installation, run the following command to publish to your main application.
```bash
php spark publish
```
Configuration
app/Config/App.php
```php
class App extends BaseConfig {
...
/**
* ---------------------------------------------------
* Name
* ---------------------------------------------------
*
* Used to specify the full name of your application as it's usually displayed to users, such as in application lists or as a label for your application's icon.
*
* @link https://w3c.github.io/manifest/#name-member
*
* @var string
*/
public string $name = 'SET_YOUR_APPLICATION_NAME';
/**
* ---------------------------------------------------
* Short Name
* ---------------------------------------------------
*
* Used to specify a short name for your application, which may be used when the full name (`$name`) is too long for the available space.
*
* @link https://w3c.github.io/manifest/#short_name-member
*
* @var string
*/
public string $short_name = 'SET_YOUR_APPLICATION_SHORT_NAME';
/**
* ---------------------------------------------------
* Description
* ---------------------------------------------------
*
* Used to explain the core features or functionality of your application.
*
* @link https://w3c.github.io/manifest-app-info/#description-member
*
* @var string
*/
public string $description = 'SET_YOUR_APPLICATION_DESCRIPTION';
/**
* @var string
*/
public string $logo = 'SET_YOUR_FILEPATH_APPLICATION_LOGO';
/**
* ---------------------------------------------------
* Categories
* ---------------------------------------------------
*
* Specify one or more classifications for your application. These categories help users discover your app in app stores.
*
* @link https://w3c.github.io/manifest-app-info/#categories-member
*
* @var array
*/
public array $categories = ['SET_YOUR_APPLICATION_CATEGORY'];
/**
* ---------------------------------------------------
* Display
* ---------------------------------------------------
*
* Used to specify your preferred display mode for the application. The display mode determines how much of the browser UI is shown to the user when the app is launched within the context of an operating system. You can choose to show the full browser interface or hide it to provide a more app-like experience.
*
* A string with keyword values. If not specified, the default value browser is used. The keyword values include:
*
* 'fullscreen' : Opens the app with browser UI elements hidden and uses the entirety of the available display area. Use this value for apps where fullscreen engagement is crucial and desired. For example, use it for a game app that can take up the entire screen without any browser controls visible, providing a fully immersive gaming experience.
* 'standalone' : Opens the app to look and feel like a standalone native app. This can include the app having a different window and its own icon in the app launcher. The browser will exclude UI elements such as a URL bar but can still include other UI elements such as the status bar. For example, use it for a task manager app that opens in its own window without the browser's URL bar, while still displaying the device's status bar for battery and notifications, thereby providing an integrated experience.
* 'minimal-ui' : Opens the app to look and feel like a standalone app but with a minimal set of UI elements for navigation. The specific elements can vary by browser but typically include navigation controls like back, forward, reload, and possibly a way to view the app's URL. Additionally, the browser may include platform-specific UI elements that provide functionality for sharing and printing content. Use this value for apps where displaying a minimal browser interface is beneficial. For example, use it for a news reading or other general reading apps that show only the essential browser controls like back and reload buttons, providing a cleaner and less distracting interface.
* 'browser' : Opens the app in a conventional browser tab or new window, using the platform-specific convention for opening links. Use this value for apps that are designed to be used within a browser context, where full browser functionality is needed. This is the default value if no `display` mode is specified.
*
* @link https://w3c.github.io/manifest/#display-member
*
* @var \DyonMulya\CodeIgniter4Favicons\Enumerations\WebApplicationManifestDisplay | string
*/
public $display = 'SET_YOUR_APPLICATION_DISPLAY';
/**
* ---------------------------------------------------
* Orientation
* ---------------------------------------------------
*
* Used to specify the default orientation for your application. It defines how the app should be displayed when launched and during use, in relation to the device's screen orientation, particularly on devices that support multiple orientations.
*
* The orientation value must be one of the following keywords:
* 'any' : Displays the web app in any orientation allowed by the device's operating system or user settings. It allows the app to rotate freely to match the orientation of the device when it is rotated.
* 'natural' : Displays the web app in the orientation considered most natural for the device, as determined by the browser, operating system, user settings, or the screen itself.
* 'portrait' : Displays the web app with height greater than width. It allows the app to switch between portrait-primary and portrait-secondary orientations when the device is rotated.
* 'portrait-primary' : Displays the web app in portrait mode, typically with the device held upright. This is usually the default app orientation on devices that are naturally portrait. Depending on the device and browser implementation, the app will typically maintain this orientation even when the device is rotated.
* 'portrait-secondary' : Displays the web app in inverted portrait mode, which is portrait-primary rotated 180 degrees. Depending on the device and browser implementation, the app will typically maintain this orientation even when the device is rotated.
* 'landscape' : Displays the web app with width greater than height. It allows the app to switch between landscape-primary and landscape-secondary orientations when the device is rotated.
* 'landscape-primary' : Displays the web app in landscape mode, typically with the device held in its standard horizontal position. This is usually the default app orientation on devices that are naturally landscape. Depending on the device and browser implementation, the app will typically maintain this orientation even when the device is rotated.
* 'landscape-secondary' : Displays the web app in inverted landscape mode, which is landscape-primary rotated 180 degrees. Depending on the device and browser implementation, the app will typically maintain this orientation even when the device is rotated.
*
* @link https://w3c.github.io/manifest/#orientation-member
*
* @var \DyonMulya\CodeIgniter4Favicons\Enumerations\WebApplicationManifestOrientation | string
*/
public $orientation = 'SET_YOUR_APPLICATION_ORIENTATION';
/**
* ---------------------------------------------------
* Background Color
* ---------------------------------------------------
*
* Used to specify an initial background color for your application. This color appears in the application window before your application's stylesheets have loaded.
*
* @link https://w3c.github.io/manifest/#background_color-member
*
* @var string #hexcolor | rgb()
*/
public string $backgroundColor = 'SET_YOUR_APPLICATION_BACKGROUND_COLOR';
/**
* ---------------------------------------------------
* Theme Color
* ---------------------------------------------------
*
* Used to specify the default color for your application's user interface. This color may be applied to various browser UI elements, such as the toolbar, address bar, and status bar. It can be particularly noticeable in contexts like the task switcher or when the app is added to the home screen.
*
* @link https://w3c.github.io/manifest/#theme_color-member
*
* @var string #hexcolor | rgb()
*/
public string $themeColor = 'SET_YOUR_APPLICATION_THEME_COLOR';
/**
* ---------------------------------------------------
* Tile Color
* ---------------------------------------------------
*
* Used to specifies the RGB background color of the tile for the Original Equipment Manufacturer (OEM) or organization on the Help and Support home page.
*
* @link https://learn.microsoft.com/en-us/windows-hardware/customize/desktop/unattend/microsoft-windows-helpandsupport-helpandsupport-tilecolor
*
* @var string #hexcolor | rgb()
*/
public string $tileColor = 'SET_YOUR_APPLICATION_TILE_COLOR';
...
}
```
app/Config/Favicons.php
```php
class Favicons extends BaseConfig {
/**
* ---------------------------------------------------
* Type
* ---------------------------------------------------
*
* 'image' : Create a favicon from the application logo that has been set in `$logo` in "app/Config/App.php"
* 'digit' : Create a letter avatar to serve as a favicon.
*
* Default is 'image'.
*
* @var string
*/
public string $type = 'SET_FAVICON_GENERATOR_TYPE';
/**
* ---------------------------------------------------
* Output
* ---------------------------------------------------
*
* Favicons URI base, relative to baseURL.
* If this is empty, then a favicon will be generated in the public folder (FCPATH).
*
* @var string
*/
public string $output = 'SET_FAVICONS_OUTPUT';
/**
* ---------------------------------------------------
* Font Family
* ---------------------------------------------------
*
* If you choose the "digit" type, you can choose the font type to later generate the character style for your avatar.
*
* @var string
*/
public string $fontFamily = 'SET_FAVICON_FONT_FAMILY_FILEPATH';
/**
* ---------------------------------------------------
* Icon Color
* ---------------------------------------------------
*
* If you choose the "digit" type, set the base color of your avatar.
*
* @var string #hexcolor | rgb()
*/
public string $iconColor = 'SET_ICON_COLOR_FOR_FAVICON_DIGIT';
/**
* ---------------------------------------------------
* Color
* ---------------------------------------------------
*
* If you choose the "digit" type, set the character color for your avatar.
* If you leave this configuration blank, the system will automatically adjust the character contrast according to the `$iconColor` you have set.
*
* @var string #hexcolor | rgb()
*/
public string $color = 'SET_CHARACTER_COLOR_FOR_FAVICON_DIGIT';
/**
* ---------------------------------------------------
* Background Color
* ---------------------------------------------------
*
* @var string #hexcolor | rgb()
*/
public string $backgroundColor = 'SET_BACKGROUND_COLOR_FOR_FAVICON_DIGIT';
}
```
Generate Favicons
To create a favicon, you simply run a few spark commands to generate favicons from image or digit.
From Image
```bash
php spark favicons:image
```
Generate favicons based on the configuration set in the $logo property in app/Config/App.php
Arguments
No arguments required
Options
--force- Force overwrite existing file.
-
Type: bool
From Digit
```bash
php spark favicons:digit
```
Arguments
No arguments required
Options
--force- Force overwrite existing file.
-
Type: bool
Generate Tags
With Filter
```php
class Filters extends BaseFilters {
...
/**
* Configures aliases for Filter classes to
* make reading things nicer and simpler.
*
* @var array>
*
* [filter_name => classname]
* or [filter_name => [classname1, classname2, ...]]
*/
public array $aliases = [
'csrf' => CSRF::class,
'toolbar' => DebugToolbar::class,
'honeypot' => Honeypot::class,
'invalidchars' => InvalidChars::class,
'secureheaders' => SecureHeaders::class,
'cors' => Cors::class,
'forcehttps' => ForceHTTPS::class,
'pagecache' => PageCache::class,
'performance' => PerformanceMetrics::class,
'favicons' => \DyonMulya\CodeIgniter4Favicons\Filters\FaviconsFilter,
];
/**
* List of filter aliases that are always
* applied before and after every request.
*
* @var array{
* before: array|string}>|list,
* after: array|string}>|list
* }
*/
public array $globals = [
'before' => [
// 'honeypot',
// 'csrf',
// 'invalidchars',
],
'after' => [
// 'honeypot',
// 'secureheaders',
'favicons',
],
];
...
}
```
With Helper
```php
...
= faviconTags(); ?>
...
```