Nibbleblog plugin: Custom Favicons

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.


  • 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:
    1. Open your web browser and point it at your nibblelog admin web site. (ie: http://localhost/admin.php)
    2. Login with your admin username/password
    3. Click 'Plugins' (left-hand side)
    4. Click 'Install' icon next to the 'Favicons' plugin
    5. 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).
    6. Click Generate button to create required favicon files.
            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
    7. 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 -->