Recently, in order to largely correct the occurrence of 404 errors occurring on the site, I looked at the list of errors detected by the Rank Math plugin.
In the past, in the process of organizing posts, I couldn’t find it because there were a lot of 404 errors while deleting more than 1,000 data.However, I corrected all the deleted post errors and did not get 404 errors anymore. I found a 404 error.
The most common among them was apple touch icon 404 error. I searched to correct this part, but there are few domestic data, so I tried to modify while looking at foreign data, but there were so many different solutions that I was confused.
While searching for the data, I came to know a well-organized solution, and through that method, I was able to solve it without difficulty. So, for those of you who are looking for a solution to the 404 error like me, I’ll summarize the method I did.
First, let me tell you why the apple touch icon error occurs. It simply returns a 404 error from the browser because there is no icon image. If you see various data, create all the icon types and add HTML code link rel in the <head> to link. I recommend it.
However, it can be difficult for first-time viewers because it is explained that you only need to add the HTML code. This is because it clearly doesn’t tell you exactly how to create the icon image and what HTML code to insert.
For those who know how to webcoding, this can be done easily, but for those who don’t know like me, it can be confusing. So, I’ll explain how to make an icon, HTML code, and upload a file so you can easily understand.
One introductory method may not be the solution for all situations. I haven’t been getting a 404 error since applying this method, but the time has passed, so it may cause problems in the future.
If the problem occurs again, I will find a solution again, correct it, and write an additional article.
1. Create an apple touch icon image
First, you need to create an apple touch icon icon, so after searching for apple logo on Google, you can find and download a png file without a background.
Once you have downloaded the icons, you should go to the site that makes each type and make it, but the most recommended place is called favicomatic as shown above.
After accessing the site above, check Every damm size and sir marked in the box above, click the Upload Your Image button below, and upload the downloaded icon image to start creating icons for each type.
When the icon creation is finished, it is downloaded as a compressed file and you can also view the HTML code shown above. If the site Favicon is set here, do not copy, just copy the apple touch icon HTML code.
If you have done so far, you will have apple touch icon image files in various sizes. Now you have to choose two methods, the one that I recommend most through search and the one that I used.
There are differences between the two methods, but most users recommend is to upload all the images to the root directory and then insert the HTML code between the <head>.
And the method I used was to create 2 representative image files, upload them to the root directory, and not insert any HTML code. This is because I said that uploading two representative images in this workaround post can solve it without inserting the HTML code.
The exact reason is not known, but it was not necessary because it automatically adjusts the size by uploading only two representative images without uploading images for each size.
The way to create the two representative images is to upload the one downloaded from the above site by replacing the name apple-touch-icon-precompose and apple-touch-icon.
As for the image size selection, as a result of my research, you can use 152X152 size for apple-touch-icon-precompose, and 57X57 size for apple-touch-icon.
After renaming the image, all I have to do is upload the two representative images to the root directory and the method I used will be over.
I uploaded only two representative images and it was resolved, but if it is not resolved, please try the method of inserting HTML code.
2. Add HTML code
It is not difficult to insert the HTML code. After going to Theme Design> Theme Editor in the WordPress admin screen, it may be different depending on the theme, but after entering header.php, insert the HTML code between <head></head> as shown above. You can do it.
3. Upload image files
There are many ways to upload an image to the root directory, but I used Filezilla to upload an apple touch icon image file to the root directory.
Since the root directory may be different, search for your own root directory and upload it.
Some people said that apple touch icon 404 errors probably don’t have a big impact on the site, so you don’t have to worry too much about it.
In particular, some people say that there is no effect on SEO, but if you leave the 404 error as it is, it can affect it, so I think it is good to do it if you can fix it.
The above method has been organized to make it as easy to understand as possible based on the articles of various solutions, and may not be solved depending on the situation. So, if the 404 error occurs again, I will write an additional post after finding a solution.