How to Create Apple Touch Icon Of Your Website For Ipod Touch , Iphone And Iphone
What is Apple Touch Icon
During web surfing online with an Apple mobile device (iPod Touch, iPad, and iPhone), users have the option of saving web pages directly to their home screen. When a page is saved, an icon is generated to which users may use to access said page without having to launch their browser.As more and more people browse the web with their iOS devices, adding a simple icon to your site helps with branding and looks great making sure your brand is well represented on the iPhone, iPod touch and iPad.
Apple Touch Icon is basically like a favicon of a website. Similar to the Favicon, the apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used. If this file is not found these Apple products will use the screen shot of the web page, which often looks like no more than a white square.
Apple Touch Icon is basically like a favicon of a website. Similar to the Favicon, the apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used. If this file is not found these Apple products will use the screen shot of the web page, which often looks like no more than a white square.
What are the Dimension of Apple Touch Icon
The apple tocuh icon pic must be in PNG format . So which dimesion we must use to create the apple touch icon .The answer is given below.
There are three specifically sized PNG images that you can create:
There are three specifically sized PNG images that you can create:
- 57 x 57 pixels for older iPhones and iPod touch
- 114 x 114 pixels for iPhone 4
- 72 x 72 pixels for iPad
Do not include rounded corners or a gloss effect on your icon, those will be added automatically by the device.
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called
apple-touch-icon.png
or apple-touch-icon-precomposed.png
. If you use apple-touch-icon-precomposed.png
as the filename, Safari on iOS won’t add any effects to the icon.How To Make Apple Touch Icon
Now you know the what is apple touch icon and what dimesion images you have to make.
So how to make apple touch icon .If you want a unique and different icon than you can use adobe photoshop or help of designers. There are also many websites on the web which we can use to create the icon free of cost.One of the site is pic2icon
So how to make apple touch icon .If you want a unique and different icon than you can use adobe photoshop or help of designers. There are also many websites on the web which we can use to create the icon free of cost.One of the site is pic2icon
Steps to Make Apple Touch Icon from picture.
- Go to pic2icon
- Upload your own photo or image file.
- Apply the settings of preferences options and special effect for the icon.
- Generate the icon file and download it.
as easy as 1 2 3
apple touch icon 144 x 144 pixel |
apple touch icon 72 x 72 pixel |
apple touch icon 144 x 144 pixel |
apple touch icon 57 x 57 pixel |
How to put apple touch icon image in blogger or website
Now you have your apple touch icon images . Now i will tell you how to put these images in a blogger or websites. The Html codes for
With rounded corners, reflective shine
apply the following code into the head section of your website:
With rounded corners, reflective shine
apply the following code into the head section of your website:
<link rel="apple-touch-icon" href="somepath/image.png" />
- Without reflective shine
- apply the following code into the head section of your website:
<link rel="apple-touch-icon-precomposed" href="somepath/image.png" />
The IOS need 57x57 pixel PNG file for iPhone 2G/3G/3GS/Touch, 72x72 pixel PNG file for iPad, 114x114 pixel PNG for iPhone 5/4, 144x144 pixel PNG for the new iPad 3 .When iOS displays your application icon on the Home screen of a device, it automatically adds the following effects: rounded corners, drop shadow, and reflected shine. What you need to do is upload the generated PNG files to your site and add the code below at your web page or web application header:
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3.png" />
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3.png" />
Where yo put this code for apple touch icon ?
This code you have to put in the Head section of website or blog
Just paste it above the </head> .
Thats all for this topic. Please Share and like the post if you find it useful.
How do you set this up for the mobile version of blogger? It works great for the hole site, but for the /?m=1 link it does not work..
ReplyDeleteThanks!
Nice blog. Thanks for sharing detailed information regarding creating an Apple Touch Icon for a website. I would like to add this in my website but can it work for mobile version of a website?
ReplyDeletehttp://www.eclassacademy.com
Great post. I'm a fashion blogger. Pls visit my blog www.mimifashionandbeauty.net
ReplyDeleteThanks for sharing with us ! Impressive post.
ReplyDeleteمنح ماجستير
I was just thinking of my career change as an iOS developer since I am passionate to create application. Your blog motivate me to start immediately. Thank you admin
ReplyDeleteRegards:
iOS Training Chennai
best ios training in chennai
This comment has been removed by the author.
ReplyDeleteGreat post I really appreciate your methodology, if you are looking for iPad Mini 2019 Review you can follow up this link for more details.
ReplyDeletePlay & Win unlimited money, world cup, Cricket Match, in this biggest, cricket world cup, season going on, just by giving prediction on simple questions by observing the , India cricket. Its a cricket world cup, so install and convert your fun into real money this world cup
ReplyDeleteFootball Games
this is nice blog, great information in this blog...........
ReplyDeleteipad support
ipad support number
ipad support phone number
ipad help
apple ipad support
apple ipad support number
are everyone looking for ways online to get help solving their pregnancy and infertility problems when most of every native American is talking online about the help of Dr Mandaker Alamun. I checked him out when my husband who could not get me pregnant for over 9 years of marriage as a result of low sperm count became fertile and now, I am 5 months pregnant and it is this man known as Dr Mandaker who helped my husband solve his problem. My name is Alecia from CA USA. I would advise anyone and everyone who needs the help of any spell caster in love marriage,finance, job promotion,lottery spell,poker spell,golf spell,Law & Court case Spells,money spell,weigh loss spell,diabetic spell,hypertensive spell,high cholesterol spell,Trouble in marriage,Barrenness(need spiritual marriage separation),good Luck, Money Spells,it's all he does or looking for breakthrough in your political career to meet this Dr Mandaker the link to his website copy this link (witch-doctor.page4.me)His email contact witchhealing@outlook.com for He is a Reliable and trustworthy. I and my husband have gone to different hospitals having the thinking that I was at fault for not getting pregnant. But at the Federal hospital, they examined him too and his sperm count was low and unable to get a woman pregnant as a result of male infertility. It was then I sort out,thanks to Dr Mandaker.
ReplyDeleteIt seems like an innovative tool which I would like to try it myself as it seems pretty convenient to get websites on your home screen. Feel free to visit https://applesupportnumber.net/blog/fix-iphone-error-4013/
ReplyDeletewow lovely cake. looks casino heist gta 5
ReplyDeleteso delicious.http://pennykent.simplesite.com/
clear types of betting on various bet types may require skills or techniques casino royale hindi dubbed filmyzilla involved in game act out and betting. Making these bets does not seem satisfactory for many novices because it requires skills and training to profit profitably. Therefore, in this article, we will guide all further players to a gambling game that does not require any skill. If without help luck, you can play. The native games were those that were known for their simplicity, such as fortunate wheels gone slot machines. Because forlorn you have the maintenance to bet. The get off will be everyone's management. If you have passable horoscope luck, you can certainly win huge prizes even without any skill.
ReplyDeleteA formula that pays more money. There are two ways to use it: in the manner of you win, Baccarat will make more grant until you lose it; if you lose, you will bet again. substitute showing off to use this formula is to repeat it afterward paying Baccarat. before winning, following both capital and gain have been won, reward to the thesame bet once again until you lose, later go to extra money.Choosing rouse casino baccarat or a baccarat table is after that a technique to easily win baccarat. You should choose a table that exposes at least 30 eyes, as cards will begin to create them easier to edit or analyze during this time. But if you begin playing because the game isolated opens your eyes, the card will not direct well and the card movie casino royale cast will not be admittance accurately. You must use actions to wait for the card to approach unaided 30 cards in order to have a greater unintended of winning baccarat Baccarat games, but if anyone does nt desire to wait to play, it is recommended to bet on the banker side only. Traders are the most frequent, therefore bankers will unconditionally acquire money.
ReplyDeleteHow to backup iPhone from iCloud, Mac, Windows PC? Geek Squad Apple Support Team Share Apple Support Guide https://customer-phonenumber.com/how-to-back-up-your-iphone/
ReplyDelete24*7 Apple Technical Support is leading Apple support website where you get services provider of Apple remote tech support the USA for third party products and services. Contact Apple Support phone number +1-855-516-8225. https://iphone-customerservice.com/apple-customer-service/
ReplyDeleteApple Customer Service
Macbook Customer Service
iTunes Customere service
iPad Customer Service
Nice Post!!!
ReplyDeleteThis is really a great Article for those who are looking for Discount coupons, cashback offers on onlineApple iPhone shopping sites in india.
Thanks for sharing the wonderful information and Save you huge money & time. More offers and coupons Visit
Apple iPhone Mobile Price
Apple iPhone Offers
Apple Mobile Phone Offers
Apple iPhone Mobile Price List
Apple iPhone Mobile Price List in India
Very detailed and informative!!
Keep sharing...
Thanks, successfully iam applied in my blog
ReplyDeleteyesreachDOTblogspotDOTcom
I am applied in my this yesreach blog successfully.
ReplyDeleteBut how to see through safari browser
Thanks a lot sir. It improves my SEO 6% at totalsach.blogspot.com
ReplyDeleteNice information i am technical bloggger please visit my website :- https://www.tech2v.in/
ReplyDeleteThanks a lot, helped me in the site <a href='https://funaiwhistle.com>Funaiwhistle.com</a>. Since 2013 and still works despite blogger updates.
ReplyDeleteThanks a lot, helped me in the site Funaiwhistle.com. Since 2013 and still works despite blogger updates.
ReplyDeleteهذه المشكلة تسبب مشكلة كبيرة في موقعي www.ashbab.com
ReplyDeleteAwesome Blog
ReplyDeleteVisit Me
iPhone XR screen replacement