When the iPhone launched a few years ago with web apps as the standard way of getting to content, Apple introduced a way to specify an icon for the website to be used if a user chooses to bookmark it to the homescreen. Even though a lot of the previous web apps are now native apps instead, you can still add this icon on your website for users wanting to bookmark it.
Creating the icon file
You can use any graphics application to create an icon of your choice. The beauty of the icon is that you do not have to think about the glossy finish or the rounded corners, effects which iOS automatically applies.
The only thing you need to consider (apart from the artwork itself) is the size of the icon. As Apple has introduced the iPad and also the more high-res iPhone 4, there are now a variety of icon sizes you can use:
- Standard iPhone: 57×57
- For the iPad: 72×72
- Optimized for iPhone 4: 114×114
Another thing to consider when designing is that you can if you wish choose not to have iOS add any effects at all to your icon. This is done by appending the -precomposed suffix to the file naming (see the file naming section).
Naming the file
By default, iOS will search your website root to see if it can find icons saved with the proper naming, that is unless you have specified the icon in the HTML code (see below).
Basic Format
The standard and basic format, if you are only using one icon, would be to save your file with the name apple-touch-icon.png and upload it to the root directory of your site. Should you want to apply your own styles and you want to tell iOS not to add its default styles, append -precomposed like this: apple-touch-icon-precomposed.png.
Device Specific
If you want to create an icon that looks best on each device (which I would recommend you doing), then you can add in the size in the file name as following:
apple-touch-icon-57x57.png(standard iPhone)apple-touch-icon-72x72.png(standard iPad)apple-touch-icon-114x114.png(iPhone 4)
Specifying the file in the HTML
If you want to name the icons according to your own wish or upload them into a specific directory or perhaps even more useful, use different icons for different pages on your site, you should tell iOS where to look for the icon in the HTML source.
To do this, you need to add a little bit of code in the section of your website.
One icon only
If you want to have one icon for the entire site, regardless of device and resolution use this code (replacing /your-icon-file.png with the proper path to your icon):
<link rel="apple-touch-icon" href="/your-icon-file.png"/> |
Should you rather want iOS not to add the default styles to the icon, use apple-touch-icon-precomposed instead of apple-touch-icon in the rel attribute.
Multiple icons for different resolutions (recommended)
Adding multiple icons optimized for the different resolutions of the iOS devices (which again I recommend), just requires a few extra lines of code:
<link rel="apple-touch-icon" href="icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="icon-iphone4.png" /> |
When there is no sizes attribute set, it will default to 57×57 which is why it is left out in the first example.
Your icons can be named exactly what you want to name them as this does not affect their display as long as they are appropriately referenced in the code.
As with previous examples, if you don’t want iOS to apply the default effects, use apple-touch-icon-precomposed instead of apple-touch-icon in the rel attribute.
Most podcasts about the Creative Suite are about the tools in the apps. We put out a weekly podcast that mixes the tools with real-life techniques that help you learn to use the Creative Suite, creatively.
Loading ...
Super Erik!!
I really appreciate your effort!
If you ever come across a way to make an icon for the Blackberry.. Please, keep me in mind!!!
Thnaks again an have a good weekend!
Esther
Thanks for the tutorial Erik
I’m still optimizing my website for the iPhone/BlackBerry, so I’ll certainly need those icons in the very near future
Pingback: Tips and Tricks for iOS Web Development at Bernskiold Learning
I’m wondering,
you wrote 144×144 in the icon name (for the iphone4)
and 114×114 in the html code part.
Which one is correct?
114 px is correct, according to Apple’s HIG. http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW11
awesome article cant wait to try it on our website.
i added the html code and it works; but it shows the code in the website. in what section of the html do i add the code so it won’t show up in the “view” mode? Help, thanks
In the example code provided, you probably need to convert the html entities to actual characters. The ampersand g t semicolon should be a single greater-than character. Likewise, ampersand l t semicolon should be single a less-than character.
Example (not sure if I can embed code here, but I’ll try):
should be
< (& l t
Second attempt at posting the code:
< should be <
> should be >
Please help me. I will create an icon for my webpage to be able to download on any Iphone, in what part Do I add the URL to my website, once is done. Would I be able to download this link on my cellphone to get immediate access to my webpage URL. my website is http://www.coverwindows.com, give an example so I can work on it. Please reply this way. THANK YOU!
When I went on your website, because the background doesn’t fit it says “rapes” instead of “drapes” … oops
I have uploaded my icon to tinypic and works for me. I have ipod touch.
terimakasih gan…
sudah ajarin ane…
Nice tips! Thanks Erik!
thankyou but in which html page we must pu it
tanx admin for article
Muito bom saber disso
Muito bom….
Thank you. Very useful tips!
Great post. i will be soon implementing it on my website. Thank you.
Great tips. I’ll be adding this to my sites. Keep up the good work.
What is the importance of Apple icon from SEO prospective? I think there is no advantage. Is’t it? And if we add this icon, what difference will be there when site will be open on a apple device?
A SEO Report told me that I was not using the Apple icon and linked me here. Your article made it simple. Thanks.
Same to me too. I never know about adding Apple icon and seo report site reported me about this. Yeah, but i want to know the reasons why we need to add this icon. How much will my site improve after do this? If it improve very much, I will prepare 3 sizes icons for that.
Yeah, I was directed here from woorank as well. Being that Apple have no market share in search Engines it is obvious the SEO’s there don’t have much of an idea so they include EVERYTHING… just to be sure.
I actually read a SEO guide that was released a couple weeks ago (different site) where the author claimed that you should always register websites for the longest period possible..eg.5 years, as Google can test how long until the domain expires and they don’t want websites that aren’t committed to the long term ranking on their engine.
Seriously, what a joke. Most small businesses and even large corporations simply pay a hosting company who charges annually. Unfortunately there is very few SEO’s who actually have any brains and know what they are talking about.
Is there any plugin to add the Apple icon in wordpress?
Ok, so… I want to use one icon for all apple mobile devices, which size should it be than? 114×114? Can older devices display this? Or should I use the “first” one (57×57)?
Thanks!
but i added perfectly nice tutorial but must answer my previous comment i need to know.
What changes for iPhone 5? Do we have to include an image with different resolution?
Thanks for the tutorial Erik. I never thought about it before, but it’s nice to have a personalized icon. Makes it look professional.
Pingback: WooRank for koplus.eu | ??????
Thanks for your help, now i’m adding apple icon on my webpage!!
Oh great, I am searching for the stuff. Thank to share this valuable article.
great article, I’m sure will fill code html
Genial!! muchas gracias!! q ilusion tener un icono para apple
This was very helpful to understand how to use the apple icon thank you very much.
The first thing you need to do before anything else is to get yourself a domain name. A domain name is the name you want to give to your website. For example, the domain name of the website you’re reading is “thesitewizard.com”. To get a domain name, you have to pay an annual fee to a registrar for the right to use that name. Getting a name does not get you a website or anything like that. It’s just a name. It’s sort of like registering a business name in the brick-and-mortar world; having that business name does not mean that you also have the shop premises to go with the name.^
Head to our very own blog page too
<"'http://www.prettygoddess.com/
wow excellent tutorial , good job ! i didnt knew the html markup that you specified. excelllent.
This paragraph is in fact a fastidious one it assists new web people, who are wishing in favor of blogging.
I didn´t know about de Icon Aplle, thenk for your information, regards.
Pingback: 12 consejos para mejorar el posicionamiento seo de tu web | Posicionamiento Web Madrid
Nice post
Thank you..
Thank for this Apple icon reminder. I did loose it but just redid my site and your post have been really helpfull.
Keep the goosd work Erik !
I really enjoyed this blog post
I got directed here from Woo Rank – this is exactly what is required thanks
It doesn’t work on my Commodore 64. Could you help me ?
HAHA, made me LOL thanks
Great tips. Is it just put in HTML file? Inside the . Thanks!
how toput in blogspot??
now just use html code right???
Thanks for the help with the apple icon!