I had a message from an organisation that I am hosting requesting an icon visible on smart devices. I have been using “favicons” for some time on sites. These appear in the tab of your browser window. I demonstrated how to create a particularly ugly looking one on this site. (see image below, and link to the article)
There are a number of different sizes used by various devices. Where they may be of great value to you is on a smart phone or tablet where someone saves your website home page on their device. We tend to be guided by visual clues, so if there is an element of your branding in a button, then this will guide you in making a selection. There are a range of predefined sizes for a simple icon depending on what the target device is, Android is apparently different to iOS, and there are a range of sizes that need to be seamlessly catered for. This is what this particular client was looking for.
When you add your site to your smart phone, an icon will appear if it is set up to support it.
I did some research and came up with this plugin:
Favicon by RealFaviconGenerator
This is what you need to do.
Step 1. Create an image 512px x 512px
First you need a square image which represents the space where your icon will be presented. It is important to consider that what is going to be generated ranges from very small as in the Favicon example at the top of your browser tab, to moderately large on a tablet of phone screen. As in many cases like this, whatever you choose to add there needs to work in all sizes. So you cannot put much text there!
Start with a 512px x 512px space in a graphics editor and paste or crop an image to fit it. That will generally work ok. I don’t know whether this next bit is true, but as a photographer, I have noticed that some images are processed by websites, and the image may soften after it has been uploaded. For that reason, in this case I avoid JPG formats which can be compressed. Save your file as a PNG file (Portable Network Graphics), this seems to work better, and has the benefit that the image supports transparency rather than just solid colours.
Free Bag of Buttons
I have created a bag of buttons, many of which are generic starting points for you. There are several variants which the following organisations can use if they wish (these are chosen because I host multiple sites for these organisations). Parkinson’s, Home-Start and NACCC Child Contact Centres.
Click on the image below to grab your bag of buttons. It contains a broad selection of blank buttons in PNG format, and buttons for the respective organisations which should work ok without modification. I have included the master file which is based on the new graphics package I am using called Affinity Photo (£48) (desktop version) which I thoroughly recommend. You can use that to create your own and see how I have made them.
Clicking on the image above will download a zip file containing image files of buttons to your computer. Save it somewhere where you can locate it. Then unzip the folder to locate the buttons. There is one file in here you may not recognise that ends with the file extension .afphoto this is the master file which was used to create all of the others. You are free to use this with Affinity Photo if you wish.
Step 2 (non Divi Users)
(for Divi users skip down the page)
You need to go to your website, login and go to Plugins and search for
Favicon by RealFaviconGenerator . Install it, and activate it.
Then return to the Dashboard and go to Appearance, and then Favicon. All you need to do now is upload your selected image, or one you have created yourself. It will show you how the image looks on the various devices. Review the feedback and then accept it. You can always change it later, or remove the plugin altogether to remove it.
That’s it. Very simple, and very easy to complete.
Step 2 (Divi Users)
There is a facility built into the Divi template which can generate all the Favicon automatically. Prepare your image, or select one of the predefined ones I have created. Log into your website go to the Dashboard and select Divi and Theme Options. Right at the top is an entry for Logo. Use this to add your image file. Then click on Save at the bottom of the screen.
That’s it.
It did not work for me 🙁
If you could not get it to work, drop me a line and tell me what the problem was and I will take a look for you. If you need a customised button, I may be able to help provided you are not too ambitious!