Recently, while looking at the list of errors detected by the Rank Math plugin in order to make a major fix to the 404 errors occurring on the site, I came across an apple touch icon 404 error that I had never seen before.
I hadn’t noticed this before because I was deleting over 1,000 pieces of data while organizing my posts, which resulted in a lot of 404 errors. But after fixing all the errors in the deleted posts, I was able to discover many 404 errors that I hadn’t noticed before, as the 404 errors stopped occurring.
Among them, the most common one was the apple touch icon 404 error. I searched to fix this, but there was almost no domestic information, so I tried to fix it by looking at foreign information, but I was confused because there were so many different solutions.
While I was searching for information like that, I found a well-organized solution and was able to solve it without much difficulty. So, for those who are looking for a solution to the 404 error like me, I will organize the method I used.
First, let me tell you why the apple touch icon error occurs. It’s simply because there is no icon image, so the browser returns a 404 error. If you look at various materials, I recommend creating all types of icons and adding the HTML code link rel inside <head> to link them.
However, since it is explained that you only need to add HTML code, it may be difficult for those who are seeing it for the first time. This is because it does not clearly explain how to create an icon image or what HTML code to insert.
If you know how to do web coding, it may be easy, but if you don’t know anything like me, it may be confusing. So, I will explain it in an easy-to-understand way, from how to create an icon to HTML code and how to upload a file.
One method I’m introducing may not work for all situations. I haven’t had any 404 errors since I started using this method, but it hasn’t been that long, so it may work in the future.
If the problem occurs again, I will find a solution again, make a correction, and then write an additional post.
Table of Contents
create apple touch icon image
First, you need to create an apple touch icon icon, so search for “apple logo” on Google, then find a png file with no background and download it.
If you have downloaded the icon, you will now need to go to a site that creates icons by type. The most recommended site is favicomatic , shown above .
After accessing the site above, check the box marked Every damm size, sir above, and then click the Upload Your Image button right below to upload the downloaded icon image. This will begin the process of creating icons by type.
Once the icon creation process is complete, it will be downloaded as a compressed file and you will also see the HTML code shown above. If your site has a Favicon setting, do not copy it. Just copy the apple touch icon HTML code.
If you have made it this far, you should have apple touch icon image files in various sizes. Now you have two options, this is the method most people recommend through searches and the method I used.
There are two different methods, but the one most users recommend is to upload all images to the root directory and then insert the HTML code between the <head> tags.
And the method I used was to create two representative image files and upload them to the root directory without inserting HTML code. This is because the solution post I saw said that uploading two representative images would solve the problem without inserting HTML code.
I don’t know the exact reason, but it said that it is not necessary to upload images by size because the size is automatically adjusted by uploading only two representative images.
The way to create two representative images is to download them from the site above and upload them after changing the names to apple-touch-icon-precompose and apple-touch-icon.
As for selecting the image size, from what I’ve found out, for apple-touch-icon-precompose, you can use a size of 152X152, and for apple-touch-icon, you can use a size of 57X57.
The method I used simply involves uploading two representative images to the root directory after renaming the images.
I was able to resolve the issue by uploading only two representative images, but if that doesn’t work, try inserting HTML code.
Add HTML code
Inserting HTML code is not difficult. From the WordPress admin screen, go to Theme Design > Theme Editor. Depending on the theme, it may be different, but go to header.php and insert the HTML code between <head></head> as shown above.
Upload image file
There are various ways to upload an image to the root directory, but I used Filezilla to upload the apple touch icon image file to the root directory.
Since the root directory may be different, please search for your root directory and upload it.
Some people say that the apple touch icon 404 error is probably not something to worry about because it doesn’t have a big impact on the site.
Some people say that it doesn’t have any effect on SEO, but I think it’s a good idea to resolve the 404 error if you can, because it can have an effect if left as is.
The above method is based on articles on various solutions and is organized to make it as easy to understand as possible, so it may not work depending on the situation. So if I encounter a 404 error again, I will write an additional article after finding a solution.
※ Even though I set it up using the method above, the apple touch icon 404 error occurred again after some time. So I continued to look for a way to fix it for a while, and the method I eventually found was to add .htaccess code.
RedirectMatch 301 (?i)/apple(-touch-icon-.*)?.png /apple-touch-icon.png
I tried most of the things recommended abroad, but they didn’t work, and the only method I found was the one that didn’t cause a 404 error. If the method introduced above doesn’t work, please add the code above to .htaccess.
▶ WP phpMyAdmin: Delete Old Posts
▶ WordPress Hack: Feeling the Importance of Security
▶ Webmaster Tools: Apply the latest version by re-requesting Robots.txt Webmaster Tools
