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.
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!
- Open your web browser and point it at your nibblelog admin web site. (ie:
: <!-- 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 --> :