Nibbleblog plugin: Custom Favicons

Updated 01 Jun 2016 Read time 1 min 55 sec(s) (369 views). Misc

With so many platforms and icons, it's hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need?

Each platform comes with its own design requirements. You can't just use the same picture everywhere. This Nibbleblog plugin lets you craft your icons per platform.

Installation

Download the plugin from here
Copy the download file into the Nibbleblog /plugins directory on your web server.
Unpack the tar image (tar -x -f nb-plugin-favicons.tar)
Set correct file permissions (if required)

Enable plugin from within your Nibbleblog admin portal:

Open your web browser and point it at your nibblelog admin web site. (ie: http://localhost/admin.php)
Login with your admin username/password
Click 'Plugins' (left-hand side)
Click 'Install' icon next to the 'Favicons' plugin
Click Upload Image button to add your favicon image (ideally minimum size of 260x260px and in PNG format, but any size over 100x100 will work).

Click Generate button to create required favicon files.

Generating....
    img apple-touch-icon-57x57.png
    img apple-touch-icon-60x60.png
    img apple-touch-icon-72x72.png
    img apple-touch-icon-76x76.png
    img apple-touch-icon-114x114.png
    img apple-touch-icon-120x120.png
    img apple-touch-icon-142x142.png
    img apple-touch-icon-144x144.png
    img apple-touch-icon-152x152.png
    img apple-touch-icon-180x180.png
    link apple-touch-icon.png -> apple-touch-icon-57x57.png

    img favicon-16x16.png
    img favicon-32x32.png
    img favicon-96x96.png
    img favicon-192x192.png
    link favicon.ico -> favicon-32x32.png

    img android-chrome-96x96.png
    img mstile-150x150.png
    img safari-pinned-tab.svg

    file browserconfig.xml
    file site.webmanifest
Finished!

Click Save to enable plugin.

Your 'favicon' image is now available for all platforms.

Access a post on your Nibbleblog website, and inspect the source. You'll see something similar to the following:

    :
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/plugins/favicons/img/apple-touch-icon-180x180.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="/plugins/favicons/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/plugins/favicons/img/favicon-16x16.png">
<link rel="manifest" href="/plugins/favicons/site.webmanifest">
<link rel="mask-icon" href="/plugins/favicons/img/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- /favicons -->
    :

Nibbleblog