hieu-le / favicon
A configurable PHP solution to auto generate favicons and HTML meta tags from a original PNG file.
Requires
- php: >=5.3.3
- imagine/imagine: ~0.1
- symfony/console: ~2.0
Requires (Dev)
- phpunit/phpunit: ~4.0
Suggests
- ext-imagick: To use the binary and generate favicon images
This package is auto-updated.
Last update: 2024-11-05 20:30:59 UTC
README
A configurable PHP solution to auto generate favicons and HTML tags from a original PNG file.
What does this package do?
In short, it will help you display correct favicon for your website with just one original PNG image.
In more details, 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
andlink
tags for desktop web browsers as well as mobile touch devices to properly display favicon.
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.
You will need (Composer)[] to use this package. After install Composer, add this dependency into your composer.json
file.
"hieu-le/favicon" : "~1.0"
Run composer update
and start using.
Generate images
To use the command line to to generate favicon files:
$ vendor/bin/favicon generate [--ico-64] [--ico-48] [--no-old-apple] [--no-android] [--no-ms] [--app-name="..."] input [output]
Arguments:
input
: path to the input image files, which is requiredoutput
: 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.
Options:
The Imagick ext is used by default. GD library is used if cannot load Imagick ext.--use-gd
: use GD extension instead of Imagick extension--ico-64
: include the 64x64 image inside the output ICO file (which contains only 16x16 and 32x32 images by default)--ico-48
: include the 48x48 image inside the output ICO file (which contains only 16x16 and 32x32 images by default). Both--ico-48
and--ico-64
options make the output icon file larger a lot.--no-old-apple
: exclude pngs files that used by old Apple touch devices--no-android
: excludemanifest.json
files and PNG files for Android devices--no-ms
: exclude images for Windows tile--app-name="..."
set the application name in themanifest.json
file. Default is an empty string.
Output HTML tags
Call the favicon
function inside your HTML template as follow:
echo favicon($option = FAVICON_ENABLE_ALL, array $msOptions = array())
The $option
argument is a bitmask with following bit:
FAVICON_NO_OLD_APPLE
: do not include old apple touchlink
tagsFAVICON_NO_ANDROID
: do not include Androidmanifest.xml
link tagFAVICON_NO_MS
: do not include Windows and IEmeta
tags
The default value is FAVICON_ENABLE_ALL
turns of all these three bit and include everything in the final output. Here are some examples:
- To exclude old apple touch
link
tags:FAVICON_NO_OLD_APPLE
- To exclude Android manifest file and IE
meta
tags:FAVICON_NO_ANDROID | FAVICON_NO_MS
- To exclude all these additional tags:
FAVICON_NO_OLD_APPLE | FAVICON_NO_ANDROID | FAVICON_NO_MS
The $msOptions
argument is an array contains information for Windows and IE. It can has these fields:
tile_color
: the background of live tile when this site is pinned, default is white (#ffffff
)browser_config_file
: 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 lookingbrowserconfig.xml
fileapplication_name
: the default application name displayed when user pinned this site
The result of
echo favicon(FAVICON_ENABLE_ALL, array( 'tile_color' => '#F0F0F0', 'browser_config_file' => 'IEConfig.xml', 'application_name' => 'Hieu Le Favicon' ));
is a HTML segment link this:
<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="Hieu Le Favicon" /> <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
The package is released under MIT license. See the LICENSE
file for more detail.