Last Updated on January 17, 2020 by Christopher G Mendla
I fell into a bit of a rabbit hole. I previously had not bothered to create faveicons for my WordPress Sites. I was doing some work with the Redirection plugin and saw a lot of 404 entries for apple-touch faveicons. As I dove in I realized I should add them.
The following is a ‘quick and dirty’ way to get faveicons installed on your WordPress site. Depending on your needs, you may need to take a deeper dive.
Why Faveicons?
There are a number of reasons to add faveicons to your sites:
- It adds some professionalism to the site (unless you have really crappy faveicons)
- There is speculation that faveicons could be an SEO indicator for sites. The theory is that junk and scraped sites won’t make the effort to create a faveicon. Search engines may view the presence of the icons as an indication that the site owner is serious.
- It enhances the look of the Tab for your site in a browser.
- If someone bookmarks the site, it will set the site aside visually.
- There is a possibility that search engine results might include favicons.
Step 1 – Check your faveicon status
There are a number of ways to do this. The easiest is to find a faveicon checker online such as the faveicon checker at realfavicongenerator. That will check your site and report the status of your faveicons.
If you find you have a complete set of icons that you like, you can probably stop here. The image below was taken AFTER I uploaded my icons. I have icons for iOS, Safari, Windows 8 & 10 and ‘classic’ desktop browsers. I’m still missing Android and OSX.
Step 2 – Create the icon
There are a number of different size schemes for faveicons. You can create them manually but that would be tedious. You can create one 300×300 image and use online faveicon generators to create the various sizes.
I used GIMP which is an open source version of Photoshop. I created a 300 x 300 pixel image. I used a bevel filter on the text, a swirl gradient in the background and a border. The border will probably cause trouble with the tendency for Apple devices to round the corners.
I saved both the GIMP project (.xcf) and exported the image as a PNG file. By saving the project, I can go back and tweak it later.
PRO TIP – Creating the base graphic requires a bit of knowledge of image software. You could create it in something such as Paint. Another alternative would be to go to a site such as Fiverr and pay someone to create the image.
Step 2 – Create the faveicons
I used an online faveicon generator at realfaveicongenerator.net
You simply choose the file you created and upload that. Within a minute or two your faveicons will be ready. If you are going to put the faveicons in the root of your site, you most likely won’t need the code that is presented.
Put the zip file in the same folder as the project and exported PNG file you created earlier. (HINT – Right click on the download button and ‘save target as’)
Extract the files from the Zip file. You should see a number of icons as well as a couple of manifest files.
Step 3 – Upload the faveicons to your site.
You can do this through an FTP client such as FileZilla or through your hosting’s file manager. Make sure that none of the file names exist on your server before uploading. Upload the image files and manifest to the site’s root. If you upload anywhere else, then you will have to mess about with html code.
Step 4 – Check the results.
It might take a few minutes to see the results. You should see the icon in the tab for your site in your browser. If you are using site caching, try opening your site in an incognito window or another browser. You can also re-run a checker as mentioned in Step 1.
After the caching resolves itself you should see the icons in the browser tabs.
In the example above, my icon for ChrisMendlaTech.com is a bit difficult to see. The icon for my Bucksviews.com site is a little more distinct. However, either one is better than the generic icon used by the site on the right.
Summary – Faveicons
The process for adding faveicons is not that difficult. It might give you a slight edge in SEO and return visitors.