I'm trying to put an iPhone logo that I made into my site so when someone saves the website on their iPhone home screen the custom logo I made will show up. According to two different sites that I read, the iPhone logo needs to be located in the main root directory of the website.I went to Admin> File manager> And then uploaded the iPhone logos to the Portal Root. Now when trying to put a shortcut on the home screen of the iPhone I don't get the logo that I uploaded to the root directory.

One article states that this can also be added to the header, but I'm not sure what the correct address or path would be so I could include it correctly in the header. I'll list the code below.

---------------------------------------------
perhaps you want to use a different file name or format – you can use a link tag in the head of the document, such as:





----------------------------------------------

The links to the two articles I'm reading are below:
http://www.bernskiold.com/2011/01/0...r-website/

http://vjarmy.com/archives/2008/01/howto_iphone_webclip_icons.php

If I want to include the code in the header, what would be the path to the root directory where the icons are?

I'm supposed to add this link to make my custom logo show up on iPhones.

< link rel="apple-touch-icon" href="/apple_touch_icon.png"/ >
Where in DNN would I add it? I put it in the header section of the main page and it doesn't show up when I save the page on my iPhone.

Where should I add this code?


Specifying a Webpage Icon for Web Clip

https://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Try adding that to the header or footer of an HTML module make the module appear on every page.

Alternatively, you could make it part of the skin. Or, use Will Strhol's Inject module to place it in the page. I think that it needs to go in the body, not the header.

Posted By Joseph Craig on 2012-02-12 12:12 AM
Try adding that to the header or footer of an HTML module make the module appear on every page.

Alternatively, you could make it part of the skin. Or, use Will Strhol's Inject module to place it in the page. I think that it needs to go in the body, not the header.

I tried adding it to the header of the main page and also used Will Strhol's Inject Module. I didn't have any luck with either one. I placed the code in both the top and bottom of the inject module. My .png image is in the portal root like the above articles mentioned. I could be adding incorrect code. It doesn't include anything about the portal root. How should the code read?

Possibly you don't have the right path to the file?

What is the link in your page's source?

Something like http://mydomain.com/Portals/0/Images/file.png would be correct.

Posted By Joseph Craig on 2012-02-13 11:27 PM
Possibly you don't have the right path to the file?

What is the link in your page's source?

Something like http://mydomain.com/Portals/0/Images/file.png would be correct.

I did what you suggested and it worked. I had the wrong path. I put "Portal" instead of Portals". The only thing I need to work on now is the Title that shows up for the icon. I'm hoping this can be fixed by adding 'title' to the code.

< head>
< title>iHelloWorld
< link rel="apple-touch-icon" href="/whatever.jpg"/ >
< /head >

hi, in case I also need to have this logo display when the site is added to bookmarks, can we apply the same approach?

I tried but unfortunately it not work in "add to bookmarks" windows

Yes, that is exactly how to do it. Make sure that it is an absolute link.

Posted By Joseph Craig on 2013-12-13 02:25 PM
Yes, that is exactly how to do it. Make sure that it is an absolute link.

Thanks,

Is it possible to achieve this by DNN settings?

When the site is added to bookmarks in browsers?

Browsers should automatically pick up the "favicon" file for your site, and there is nothing that you need to do other than have one.

Hi, I am asking about the "add to bookmarks" window in Mobile, Iphone for an example.

Edited:

Everything working fine in desktop browsers.

However, for mobile, Iphone as an example.
- following the guide lines above, I alreay have the logo display in the home screen
- when I add the my site to bookmarks, I also need the favicon display, but it doesn't. please advise.

Thanks

That us the way that the favicon should behave. Is it visible in the browser's tab?

I don't see it in the browser's tab.

in "add to home" screen (http://farm6.staticflickr.com/5501/11434633216_a2bee4c617.jpg)
i see the image display

but I don't see it in the "add bookmark" screen (http://farm8.staticflickr.com/7298/11434735683_5fb5dbd40f.jpg)


and I am using obsoleted path, st like this


Thank for your help.

At this point, I'd probably need to see the site to offer any other suggestions.

Thank you, Joe

I configured out my issue, just correct the home page in the "site setting" pointing to my home page.

Hi Joe,



Does this code work in Android?

I am testing this in Android, it look likes the favicon is being used as the touch icon. But it looks small .
please have a look at

please advise how to have the favicon stretch out as big as other icon?

I'd rather want to use the apple-touch-icon image as in iOS, is it possible?

Thank you.

I have very little (maybe none) information on changing the favicon in the browser.

But ... some googling shows this:

If you have the following HTML snippet:


You can change the favicon using Javascript by changing the HREF element on this link, for instance (assuming you're using JQuery):


I have no idea if it works, and whether it works in all browsers.

Maybe some combination of media queries or client configuration can simplify things.