Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

justinw
justinw
14,517 Points
Posted by justinw
justinw
14,517 Points

Favicons Not Displaying

I know this has been discussed a million times and there are hundreds of articles on the web -- trust me, I've exhausted the resources I have access to.

This is something the web hasn't been able to help me with, which is why I'm posting here for support.

I use Twitter Bootstrap for my website (www.fraplantools.com) and my pages are saved as .php. My favicons work perfectly in Safari on the desktop, however, iPad and iPhone they don't work. The favicons do not work on any other browser either (although, last week they did just fine).

This is the code I have in my headers.php file:

<link rel="shortcut icon" href="assets/ico/favicon.ico">

<link rel="icon" href="assets/ico/favicon.ico">

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">

<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">

Like I said, it works perfectly in Safari, just no other browser or mobile device anymore.

Any ideas?

rayorke
rayorke
27,709 Points

Hi Justin!

I'm using Twitter Bootstrap, but with Rails. The code I use to generate the html is this:

<%= favicon_link_tag 'website-icon.png', :rel => 'apple-touch-icon', :type => 'image/png' %>

Which in turn generates:

<link href="/assets/website-icon.png" rel="apple-touch-icon" type="image/png">

It appears to be working fine on both iPad and iPhone.

The favicon itself is simply sitting in the public folder as favicon.ico

Does that help at all?

justinw
justinw
14,517 Points
justinw
justinw
14,517 Points

Yes, this makes sense.

I've added this line of code:

<link href="/assets/favicon.ico" rel="apple-touch-icon">

Removing the type since I'm not using a png, I don't see a change yet, but normally it always takes a while for me to see them, even if I clear the cache constantly.

Also, since you're using the .png format instead of the .ico format is there a set pixel size your using as png and do you know off-hand the file size? Mine are all at 606kb - 800kbs.

rayorke
rayorke
27,709 Points

I'm using a 144x144 image that comes in around 6KB

2 Answers

rayorke
rayorke
27,709 Points
rayorke
rayorke
27,709 Points

It's possible that may be the issue if your image is weighing in at 600-800KB.

justinw
justinw
14,517 Points
justinw
justinw
14,517 Points

Any suggestions on a good condensor? The png one I use isn't bringing it down.

rayorke
rayorke
27,709 Points

I actually haven't had the need for one, and just use Photoshop. If you'd like, I'm happy to take a look at them for you and see if I can get them down to a reasonable size.

justinw
justinw
14,517 Points
justinw
justinw
14,517 Points

Nope it was a stupid question. When I opened Photoshop back up and created them from scratch I got them down to 4kb and 5kb.

It now displays on Firefox just in the tab, not next to the URL, testing IE and Chrome out now. Thanks again, I think size was the issue.

rayorke
rayorke
27,709 Points
rayorke
rayorke
27,709 Points

Excellent, glad to hear you have found a solution!

An interesting thing to note is that the algorithm for PNG compression that Adobe Fireworks uses is actually slightly more efficient than Adobe Photoshop.