FAVICON for iOS phones - Post ID 277712

User 2823310 Photo

Registered User
312 posts

I posted this quite a while ago but thought I'd do it again so it's under it's own title for search. RSD since added a favicon tool but for iPhones this is still a simple solution.

For a iOS phone icon make a .png 180x180 name it apple-touch-icon.png and attach it to the root folder with your favicon.ico image. Then put this in the HEAD below your favicon links.
<link rel="apple-touch-icon" href="apple-touch-icon.png">

I use this for example:
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Now you'll get an icon in your apple phone and your browser.

By the way this is a great tool for converting images to the .ico format
User 187934 Photo

Senior Advisor
18,128 posts
Online Now

CC put this up a few years ago.
http://www.coffeecup.com/help/articles/ … reen-icon/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
Here's my CoffeeCup SCCP Shop with examples of what can be done.
This is a site I built for my work.(RSD)
This is a site I built for use in my job.(HTML Editor)
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
User 2823310 Photo

Registered User
312 posts

That's a good find Eric, didn't see that, but the link on there points to a ios folder and it leaves out the normal favicon. The one I do just keeps it simple dimple...

For a full blown support this one is pretty good, does 'em all. https://realfavicongenerator.net/
That one if you put the images in the root you remove the first / on the links. That I think should be ./ but works removing the first slash. The last iPhone update has a bit of an issue with icons still, but should get repaired.
User 2846109 Photo

337 posts

That's the one I use, Eagle. It's simple and has all the icon variants and options to customize for specific icons.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 78051 Photo

Registered User
199 posts

a resource I use for every site is https://realfavicongenerator.net/

Does all the hard work of favicon generation across most devices....

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.