Add Apple Touch Icon to Your Blog । Blogging Tips

Apple-touch-icon

Creating a website does not end your work. There are many more things a website creator has to do, including website management. Before the Google search engine can make your website public, you need to do a lot more work, including setting it up. Favicon and Apple Touch icons are two things you can't ignore when setting up a website, because they are not just png images but favicon and apple touch icons are the identity of your website. 

In this content you will learn the basics about - How To add Apple Touch Icon to your website / Blogger Blog. In additional, you will learn how to use them and how to create one for your own website. So make sure you read the entire content so you don't miss any important details. 

Favicon

Apple-touch-icon


Favicon is an image, It represents your website's logo to search engines. This will allow you to create your own website identity. A favicon is an important step in building your brand identity. So it is important to create a good favicon that describes your brand in one letter or design. Your website favicon has nothing to do with SEO, because a favicon does not affect your website's SEO. It's a good idea to assume that your website needs a favicon to set up your website, not your SEO.

Apple-touch-icon

Apple-touch-icon

An Apple-Touch-Icon is an image in a PNG format that helps your brand identity remain visible to Apple device user. There is a striking resemblance between an Apple Touch Icon image and a Favicon image. An Apple Touch icon is used when someone bookmarks your website, or adds it to the home screen of their device. The Apple Touch Icon is a web page icon used as a logo to represent your site on all Apple devices.


Both a favicon and an apple touch icon have different uses. When search engines display your site, they also display its logo next to the site. In this case your site favicon is used. Apple Touch icons, on the other hand, are used when someone bookmarked your site or adds your website to their home screen.


However, you cannot create or upload your site without measuring a favicon or Apple Touch icon. There is a fixed size for both Favicon and Apple Touch icons. So you can't use the same measurement for both Favicon & Apple touch icons. Both have their own specific size which We will know now.
 

What should be the size of a Favicon?

Search engines only support a certain size of favicon. So make a favicon by following the exact size given to you below, otherwise your website's favicon will show up in search engines. Here is the specified size for website's Favicon: favicon = 16x16 (recommend) or 32x32. 

What is the size of a perfect Apple touch icon life? 


The Apple Touch icon has explicit dimensions for different Apple devices.

iPhone devices = 180×180, or 120px×120px.

iPad = 167×167px.

iPad mini's = 152px×152px.

Both Favicon and Apple Touch icons need to be in png image format. However, you can also use WebP format in Favicon. But make sure your favicon image is limited to 100 kilobytes. Because if it doesn't, Google will automatically convert your created favicon image to 100 kilobytes, which may result in a blurry favicon display.


How To add Apple-Touch-Icon to Blogger?


 Go to your blogger blog and click on the ‘Theme’ option.

Before making any changes, download a backup file of your theme.

Now, click on the HTML editor and open your theme XML file.

Between <head> and </head> you need to add the Apple touch icon html code.


Make sure that you have already created an apple touch icon for your website. If you haven't, create one. The size of apple touch icon logo should be exact to the size i have included.

 

The html code of Apple touch icon :


<link href='Add your image link here' rel='apple-touch-icon'/>

Note : You have to create an html link of your apple-touch-icon image. For example,  https://thelogoimage/apple-touch-icon.png

You must include your image html link inside href='here'


Note: the image format should be in PNG.


Now, save your theme.xml file and go back to your blogger blog and visit your website to see if your apple touch icon is set perfectly. 

Bookmark and add your blog to your Home screen.

Conclusion

When you’re struggling to make an identity for your brand you definitely cannot ignore the fact that how important a favicon and Apple touch icon is when you’re building a brand identity for your website.


Even a small set up can play a huge role in creating brand identity. Unlike other setups related to SEO, these two setups have no effect on SEO, yet these two setups are much needed for your website.


Favicon and Apple touch icon both are important for your website. So, when you’re going to create a favicon or apple touch icon image, you'll need to follow the details I've given above.