X Course Advisor FREE Course Advisor
Watch Tutorials

मुफ्त प्रीमियम प्रवेश

हमारे प्रीमियम हब लेख, परियोजना फ़ाइलें और से प्रत्येक ट्यूटोरियल वीडियो के पहले 10% के पूरे पुस्तकालय प्रवेश ऑनलाइन ट्यूटोरियल पुस्तकालय .

अपने मुफ़्त खाता बनाएँ!

आपकी वेबसाइट के लिए एक एप्पल IOS चिह्न बनाएँ
  • आपकी वेबसाइट के लिए एक एप्पल IOS चिह्न बनाएँ

Google अनुवाद के द्वारा अनुवादित

आप वास्तव में आसान एक आकार दिखाने के लिए जा रहा Im इस त्वरित टिप में सभी एप्पल मोबाइल उपकरणों के लिए एक बुकमार्क चिह्न जोड़ने के लिए जिस तरह से फिट बैठता है.

चरण 1 - एक वेबसाइट बनाएँ!

आप एक वेबसाइट बनाने की जरूरत है कुछ गोंद, एक प्लास्टिक की बोतल और कुछ सेफ्टीपिन है. ठीक है, बस मजाक कर! उम्मीद है कि आप पहले से ही अपने आप को आपके होस्टिंग कंपनी के माध्यम से अपने सर्वर तक पहुँच के साथ एक वेबसाइट है.

Ive एक काल्पनिक बिल्कुल सही पालतू जानवर कहा जाता है साइट के एक त्वरित mockup:

Pretty rad!!!! Look, it’s got a kitten on it! Holding a gun!! Awesome!! 

I want to create a nice bookmark icon that people can add to their Home screen on Apple devices like iPhones and iPads for quick access to my awesome site. 

आकार और संकल्प

The screen resolution (in pixels) for Apple iOS devices varies. Here’s a rundown:
  • iPhone 4          640 × 960  @  326 ppi (pixels per inch)
  • iPhone 3G       480 × 320  @  163 ppi
  • iPad                1024 × 768 @  132 ppi

The recommended icon size for a web clip icon varies with the different types, too:
  • iPhone 4         114 × 114px (high resolution)
  • iPhone 3G        57 ×   57px
  • iPad                  72 ×   72px

Although these are the guidelines, all these devices will automatically rescale your image to the right dimensions. So you really only need to make one, the largest, sized at 114 × 114px.

चरण 2 - एक चिह्न बनाओ!

I’m going to design my icon at four times the size of the resolution I need so I can apply some detail. I’ll scale the image down later.

My document is 456 x 456px at 72dpi. I’ve also placed some guides 80px from the edge of the document to center the artwork. The grey area is representative of how the Apple device will apply rounded corners (20px for a 114 x 114 icon) to the image (yes, it does this for you!!) And the nice glass reflection effect, too!!

This is just there as a guide and won’t be in the final image.

Since we’re working at four times the size this works out at an 80px rounded corner (the width of my guides).

So here is my quick icon design! The shape is centered inside the guides and it has a little bit of texture to it.

OK, so it’s not going to win any awards but what the hey! You could use your company logo or whatever you like. As long as it’s better than this you're good to go!!

Flatten the artwork and go to Image > Image Size and scale the icon down to 114 x 114px (or by 25%).

We’re done!! 

Go to Save For Web And Devices and save the image as a 24-bit PNG file. You can call it what you like.

चरण 3 - यह इंटरनेट पर रखो

Upload your PNG image into the root folder of your website. This will be the same place as your index.html file. If you're using Wordpress this will be in your ‘Theme’ folder, something like wp-content/themes/your-theme.

All you have to do is add this line of code to the section of your HTML files. Inside Wordpress this would go in your ‘Theme’ header.php file. 

The rel="apple-touch-icon" in the link is telling the Apple device that there is an image available to be used as a Web clip icon.

Here’s my code inside Coda.

That’s it! 

कि चूसने वाला!

Now when somebody uses the ‘Add To Home Screen’ function on your site inside iOS Safari they will see this screen with your icon! You may find you have to wait a second as Safari loads the image.

Once they add it it will appear on their Home screen as an icon. Here it is on iPhone 3GS:

And on iPhone 4. Because of the Retina display this should capture some real detail:

All you have to do now is sit back and wait for the money to roll in! Sweet!

Seriously though, this can add a nice little professional touch to a website and the fact that the Apple device adds all the effects for you makes it really easy.

Want to learn more? Check out these Photoshop tutorials and these Web Design tutorials!

Toby Pitman

Toby Pitman | Articles by this author

For the past 20 years Toby has worked as a professional guitarist, programmer and producer. Clients include Sir Paul McCartney, George Michael, Shirley Bassey, Yusuf Islam, Giles Martin as well as the London 2012 Olympic Ceremonies. He has also worked extensively in TV, Advertising and Film. As well as composing himself he has also worked alongside many composers like David Arnold, Clint Mansell and Simon Franglen on many major film releases. An expert in synthesis and sound design Toby has also lectured for Apple on their Logic Pro music software which he has used since its days on the Atari. He has also worked as an educator for the International Guitar Foundation and the Brighton Institute of Modern Music teaching guitar. In his spare time (of which there is very little) he moonlights as a motion graphics artist specialising in Cinema 4D and After Effects.


Aug 23, 2011

Great post - do you know if there's any way in Safari on the iPhone to have a "bookmark this site" link within the site for one click bookmarking, similar to the Javascript approach that works for desktop browsers? Or in fact if the normal desktop code also works for iPhone (and indeed Android..?) thanks!
Mar 26, 2018
John parker
Great Website. I learned a lot from this website and now I am going to tell this website to my friend so that they also take advantage of this article. I also have a website which provide Yandex Customer Service to get the solution.
You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.