You may not realise it, but your website could be producing errors. Not just the occasional one, but thousands. Why? Because there are missing icons. Find out which icons you need and how to make them.
Some curious people who have been digging around in their web server logs have discovered that there are hundreds or even thousands of errors. They are 404 errors, which is the code for file not found.
Normally this error is seen when a web page is moved or deleted and the web browser displays a special 404 error page to say the file does not exist. It can also occur with images too. If an image is expected at a specific URL, an error is generated when the browser cannot find it.
You don’t see all errors in the browser and there are sometimes problems that happen in the background, but because they are not serious, you are not alerted. The browser continues regardless. If you were alerted to every error, the web would be awful, so it is best to ignore minor ones.
The icons your site needs
This brings us to the icons your website should have and why they should have them. There are many files and in a perfect world you should have a dozen or more. However, you can get away with creating just three:
- favicon.ico
- apple-touch-icon.png
- apple-touch-icon-precomposed.png
What is favicon.ico?
A favicon.ico file contains the icon that is used when websites are bookmarked. Take a look at your bookmarks in Chrome, Edge, Safari or whatever you use and many sites have an icon next to the name.
This comes from a file called favicon.ico that is in the root (top) folder of your website. To see if you have an icon for your website, enter:
www.yoursite.com/favicon.ico
Web hosting companies sometimes automatically add an icon for you. However, they add the same icon for everyone’s website, so if the owner has not replaced it with their own, you can tell which web host they are with.
If you do not have a favicon.ico file or if it is not an icon you want to use, such as the web host’s default, it can easily be replaced. You can create an icon that shows off your brand, that people associate with your site, product or services.
The icon in a favicon file is tiny, so there isn’t a lot of scope for a creative image, but take a look at your bookmarks to see what is possible. The favicon.ico file usually contains the icon at different sizes and 16 x 16 pixels and 32 x 32 pixels is common.
Apple icons and more
Computers, phones and tablets let you create a shortcut to a website on the desktop, in folders, on the device’s home screen and so on. It appears as a regular icon, just like an app and clicking or tapping the shortcut opens a web browser and goes to the website.
It is a useful feature, especially on phones where websites can sometimes look like apps. Try Facebook in a browser on a phone for example, and it looks like the app.
The icon that is created for a website shortcut comes from .png image files on the website. They are stored in the root folder.
Unfortunately, computers, phones, tablets and other internet enabled devices all have different screen sizes, resolutions, and icon sizes. To create an icon for each one would require more than a dozen image files.
In a perfect world you would create them all and insert the necessary code in the HTML of all your web pages to link to them, but this is tedious, time consuming, and it requires some technical knowledge.
A simple solution is to ignore most files and simply create apple-touch-icon.png and apple-touch-icon-precomposed.png. These are images used by Apple devices like the iPhone and iPad.
The three files, favicon.ico, apple-touch-icon.png and apple-touch-icon-precomposed.png are sufficient and if other devices want to create an icon, they can do so from these files. They may not have the perfectly sized icon, but they are ok.
The lazy way to create icons for your site
You can create the icon files yourself using a paint program or photo editor, but there are simpler ways to get all the icons and code you need. Just use an online service.
One option is Favic-O-Matic and there are two options on the home page. One is to create just the favicon.ico and the other is to create every icon that is needed.
Click the button to upload your image and you are provided with a zip file containing all the icons and code. The idea is that you upload all the icons to the root of your website and then copy the code in the code.txt file and insert it in the header of every web page.
You will need a plugin for that, such as Insert Headers and Footers (https://wordpress.org/plugins/insert-headers-and-footers/).
Favicon Generator is a more complex website, but the resulting files are simpler. Click the button, Select your Favicon picture, and upload an image from your computer.
Many options are presented when your image is uploaded, such as setting the background colour and other items. You don’t need to change anything and can just continue to the last page.
This has a download link and some HTML code. The idea is that you download the images, upload them to the root of your website, then copy and paste the HTML code into the header of every web page (use a plugin to do this).
No HTML code is necessary for favicon.ico, apple-touch-icon.png and apple-touch-icon-precomposed.png icons and they just work. This means you don’t need to copy and paste HTMl or add extra plugins to your site.
Upload the favicon.ico file in the zip file from Favicon Generator. Make a copy of apple-touch-icon.png and call it apple-touch-icon-precomposed.png. Upload them to the root of your site. Ignore the HTML code.
The best way to create site icons
Both of these icon creator websites have one disadvantage. They take a single large image and shrink it to produce all the other sizes necessary. Shrinking an image down to 16 x 16 pixels, the smallest favicon size, may result in a blurry mess.
The best way to create icons is to use an art program or photo editor to create the right size images yourself from scratch. Some work can be saved by just editing the smallest of the icon files, such as favicon-16×16.png. The larger icon sizes are usually fine.
Create or download icons
Keep the image simple because complex ones do not work at very small sizes. Blobs, squares, circle, smiley faces, the first letter of the website name (Google’s icon is a G), and similar things work the best. Look at the bookmarks in your browser for inspiration and to see what works.
You can create icons yourself or download free ones from the web. There are lots of sites with icons, but Iconfinder is one of my favourites.
The site organises icons into sets and you can browse the most popular, the newest, free sets and so on. Read the license before downloading and using an icon set because some are free, but some are not. Some require you to credit the author, some don’t. Check!
Upload your icons
Some people may be wondering how they upload the icon files to the root of their web server. There are two ways to do this and you can use an FTP program or go through the web server admin back end.
If your web hosting company provides cpanel, look for the file manager and open it. It is similar to Finder on the Mac or Explorer on PCs and it shows the files and folders on the web server. It has upload and download options and you can easily upload the icon files from the computer to your site.
Some web hosting companies allow FTP access and this enables a program like FileZilla or Cyberduck to access the files and folders on the server. Cyberduck is the simplest and after connecting to your website, files can be dragged from Finder or Explorer and dropped on the Cyberduck window to upload them.
For more information on FTP, see How to access WordPress site files and fix faults with FTP.
