What is Apple touch icon or Add to Home Screen icon
If you have created your blog website on blogger.com, then when you check the SEO of your website, you might have seen Apple touch icon not setup error. Many new blogger people do not even understand what the Apple touch icon is and how to add Apple touch icon in Blogger website.
You must have heard the name of Favicon, which you can easily add to the website made on blogger.com by opening the Favicon section in the Settings panel of the Blogger Dashboard. The favicon that you will add for your website should be less than 100KB and square. You can understand with the help of the picture below, how and where the website’s favicon appears.
In fact, the Apple touch icon or Add to Home Screen icon is a favicon image for any website. When someone places your website on their device with the help of ‘Add to Home Screen’ or ‘Create shortcut‘ process, so that they can open your website immediately when needed, then on Add to Home Screen or Create shortcut, your The website is saved to its home display along with the image you specified Apple touch icon or Add to Home Screen icon, which looks more professional.
Websites that do not have the Apple touch icon or the Add to Home Screen icon associated, when those websites are saved to the device using the ‘Add to Home Screen’ or ‘Create shortcut’, those websites with a default image (the first letter of that website in the picture) Appears) is saved in the device, which does not look professional. You can understand it with the help of the picture given below.
How to add Apple touch icon or Add to Home Screen icon
Setting up Apple touch icon or Add to Home Screen icon in Blogger website is not a difficult task. For this you only need some information which is given below.
In fact, only the favicon image is used to add an Apple touch icon or Add to Home Screen icon to any website. The only difference is in their coding and all this coding is done within the theme section. The coding for the fava icon is different, and the Apple touch icon or the Add to Home Screen icon is coding differently. So let us know how to add Apple touch icon or Add to Home Screen icon in Blogger website –
The theme or template you are using in your Blogger website, in the coding of that theme or template, the HTML code of Favicon between <head> and </head> will be something like this:
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>In some themes, you will not be able to see this code in the HTML edit section of the theme and in those themes this code is automatically added to the website. You can see the output of this favicon code through view-source:yoursiteurl , which looks like this:
<link href='yoursiteurl/favicon.ico' rel='icon' type='image/x-icon'/>Well, let it be like this, because this is the coding of the favicon.
Now understand the method of adding the coding of the Apple touch icon or the Add to Home Screen icon to the theme of your blog website—
Step 1
To add the Apple touch icon or the Add to Home Screen icon, you will need five sizes of your site’s favicon image (192px×192px, 512px×512px, 180px×180px, 16px×16px, 32px×32px), because Each device like laptop, computer, smartphone and tablet requires a different size. Therefore, make these five size types of the image that you have added to the Favicon in your website.
Step 2
These five images may be in PNG or JPG format. If so, now convert these five images to WebP format with the help of an online WebP converter tool. Because for better SEO, it is good to have Apple touch icon or Add to Home Screen icon images in WebP format. You can also use images in PNG or JPG format, as it is not necessary to use only images in WebP format.
Step 3
Now upload these five images in the original size in the New page in the page section of the blogger dashboard. Now add alt text and title text to those images. You publish that page.
Step 4
Now open that publish page and carefully copy the image address of each image one by one and add it to these five HTML tags given below, according to the size. The HTML tag that makes up the Apple touch icon or Add to Home Screen icon is as follows–
<link href='put your image URL' rel='apple-touch-icon' sizes='180x180'/><link href='put your image URL' rel='icon' sizes='192x192' type='image/png'/><link href='put your image URL' rel='icon' sizes='512x512' type='image/png'/><link href='put your image URL' rel='icon' sizes='32x32' type='image/png'/><link href='put your image URL' rel='icon' sizes='16x16' type='image/png'/>Add these five HTML tags in HTML coding of your blogger theme between <head> and </head> by adding image URLs in turn by size. If you do not understand where to add this code between <head> and </head>, then you can add it just below the <head> or just above the </head>. And then save the theme. The <head> in each theme is placed five or ten lines at the beginning in the Edit HTML section of the theme, so you can easily find the <head> tag.
Conclusion
We told you in detail how you can add Apple touch icon or Add to Home Screen icon in blogger site. Similarly, the Apple touch icon or Add to Home Screen icon is also applied in WordPress site. We are sure that you will not face any error in installing Apple touch icon or Add to Home Screen icon.
Thanks for reading: Add apple touch icon in blogger site, Please, share this article. If this article helped you, then you must write your feedback in the comment box.
