One of the little details that some website owners don’t take care of it’s adding a favicon and iOS/Android home screen icons.
What are those? Glad you asked!
Instead of explaining you what a favicon is, I think I’ll better show you.
That little icon you get on the browser tap is your favicon!
Now the home screen icon for iOS and Android is the icon you will get when you open the website in your smartphone and you tap to add that website as a shortcut in your smartphone home screen. Like so:
For the method that I am about to show you, you will need:
- Access to your website’s root folder.
- Accesss to the WordPress admin panel.
Let’s first see what are the main steps to follow:
- Create your icon
- Auto generate all the icons
- Upload the icons to your website’s root folder
- Link the icons in the WordPress header
1. Create the icon
Using your favorite image editor create your icon. Make sure you made the icon completely square. I will go with 500px wide and 500px height, that should be enough.
2. Auto generate all the icons
In this part it’s where most of the process is done, head off to this website: http://www.favicon-generator.org/
Upload your freshly created icon and this icon generator page will do the magic for you. It will create all the home screen icon files of different sizes necessary and several favicons.
Not only it will auto generate your icons but also it will give you the code you need for the WordPress header.
Download the zip file to your computer but don’t close the page just yet. Make sure you copy the code and save it somewhere in your computer for further use.
3. Upload the icons to your website’s root folder
Before uploading the icons you will need to unpack the icons from the zip file. Once that’s done you need to upload the files to your website root folder. You can do that via FTP, SSH or CPanel.
4. Link the icons in wordpress header
Since I’m using the Genesis Framework there’s a very simple way to link our icons files in the header without messing with php files.
Go to your wordpress admin area and hover over the Genesis tab select the Theme Settings section.
Scroll down to the bottom and you will find the Header and Footer Script section with 2 fields one for the Header Scripts and other for the Footer Scripts.
Right now you can probably tell where do you need to copy/paste the code favicon-generator.org gave you. If it’s not obvious yet, You have to paste that piece of code to the Header Script field section. Hit save and you are good to go.
I hope this was helpful and you got everything done. If you have any question hit me with a comment.