How to favicon [was: .ico]

[Jeffrey54 Lane]

I'm trying to put a fabicon on my site and I'm having trouble converting a .png to a .ico, can someone help me please.

Thank you Jeff Lane

[Jon Fritz]

Have you tried the online converters like: ConvertICO.com - Convert PNG to ICO and ICO to PNG

Also, you're not using "fabicon" for any part of the name are you?

(it's "favicon")

[Nancy OShea]

I normally start with a square graphic in Photoshop that is 300 x 300 pixels because I also create Apple shortcut icons at the same time.

Apple shortcut icons are all PNG files of varying sizes for different pixel densities.  You can get this list from Github.

GitHub - audreyr/favicon-cheat-sheet: Obsessive cheat sheet to favicon sizes/types. Please contribut...

[Jeffrey54 Lane]

Hi I have look at the two ways Nancy & Jon have said and they look a bit difficult, so what I have done is I taken the info from my other site: http://www.qualitycarpets.net/ and put in on my new site: http://www.jfix.co.uk/ changed the pictures of course but it still don’t work I think I’m close but I’m just missing something, I have gone on the site in incognito but still the same.

Thanks Jeff

[Nancy OShea]

Jeff, did you upload icons to your server?  I'm getting 404 not found on all of these.

<!-- Favicon Links Start -->

<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />

<!-- For third-generation iPad with high-resolution Retina display: -->

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

<!-- For iPhone with high-resolution Retina display (iPhone 5 included): -->

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

<!-- For first- and second-generation iPad: -->

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

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices (57x57): -->

<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png" />

<!-- Favicon Links End -->

Nancy

[Jeffrey54 Lane]

Yes they are in this file: 51c7bac8550cdde367c5dcf92ad88b57.ico

Thanks you for your help Jeff

[Nancy OShea]

Jeffrey54 Lane wrote:

Yes they are in this file: 51c7bac8550cdde367c5dcf92ad88b57.ico

What the heck does that mean?

When I go to this URL which is where your favicon is supposed to be, I get a 404 not found on server  error.

http://www.jfix.co.uk/favicon.ico

And same goes for all the Apple icons

http://www.jfix.co.uk/apple-touch-icon-144x144.png

So why is it not working? 

Because the icons are not where your code says they are.

If you go to my website, my code looks like this & that's exactly where my icons are located on the server.   They are not in some other file.

<!--favorites icons-->

<link rel="icon" href="http://alt-web.com/favicon.png" type="image/x-icon">

<link rel="shortcut icon" href="http://alt-web.com/favicon.png" type="image/vnd.microsoft.icon">

<!-- For third-generation iPad with high-resolution Retina display: -->

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

<!-- For iPhone with high-resolution Retina display (iPhone 5 included): -->

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

<!-- For first- and second-generation iPad: -->

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

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices (57x57): -->

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

Nancy

[Jon Fritz]

I think he's attempting to use a multi-resolution icon file, rather than 5 separate icons.

@Jeffrey54 Lane,

If that is the case, change that awful jumble of letters and numbers (the current .ico file name) to favicon.ico and then link to it using...

<link rel="Shortcut Icon" href="http://www.yourdomain.com/favicon.ico" type="image/x-icon" />

The browsers that can handle it will read the right sized icon from your multi-layer file automatically.

Here's a good how-to on the subject...

Multi-Layered Icons? How-to Make and Add a Multi Resolution Favicon to Your Site

[Jeffrey54 Lane]

Hi Jon how would you do it using 5 separate icons.

Regards Jeff

[Nancy OShea]

Upload your favicon.png file to server's root folder (where your index page is located).

Add this code to the <head> tag.

<!--FAVICON-->

<link rel="icon" href="http://www.jfix.co.uk/favicon.png " type="image/x-icon">

<link rel="shortcut icon" href="http://www.jfix.co.uk/favicon.png " type="image/vnd.microsoft.icon">

Clear your browser's cache memory & delete the old bookmark.

Create a new bookmark.

Close and reopen your browser a few times.  Eventually, you should see your favicon.

EDIT: use .png instead of .ico in your links.

[Jeffrey54 Lane]

Hi Nancy I have added that to the file but it is still not working, I have cleared the bookmark and the history.

Regards Jeff

[Nancy OShea]

Maybe you'll have better luck if you simplify this. 

Upload one favicon image to your server's root folder. 

favicon-32x32.png

[Jeffrey54 Lane]

Hi Nancy do I have to change the mark-up on the pages

[Nancy OShea · Accepted solution]

I would remove the other icons file from server and all references to it in your <head> tag. 

Just link to the single favicon image at your domain and see if that works.

<link rel="icon" href="http://yourdomain.com/favicon-32x32.png" type="image/x-icon">

<link rel="shortcut icon" href="http://yourdomain.com/favicon-32x32.png" type="image/vnd.microsoft.icon">

[Jeffrey54 Lane]

Hi Nancy that’s done it I don’t know how to thank you, thank you very much.

Regards Jeff

[Nancy OShea]

Ok. Great.  Now that you know it works with a single icon image, you can add a few Apple shortcut  images to your server.

<!-- For third-generation iPad with high-resolution Retina display: -->

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

<!-- For iPhone with high-resolution Retina display (iPhone 5 included): -->

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

<!-- For first- and second-generation iPad: -->

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

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices (57x57): -->

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

Nancy

[Jeffrey54 Lane]

Hi Nancy I’ve just done onto the forum to mark it correct and I can’t find where to do it?

Jeff

[Jon Fritz]

I got it for you.

When you click on the title of the original post in the forum, it will take you to a page that should have a green "Correct" star icon under every reply.

When you click one of those icons, it sets that post as Correct.

[Jeffrey54 Lane]

Hi Nancy I’ve don’t both Jon’s way and your way but it still doesn’t work for some reason, the way it is at the moment is the way you said.

Regards Jeff

[BenPleysier]

You may be able to see the result immediately when you choose to bookmark the site. Otherwise, you will need to sit back patiently, the result will be noticeable in due time.