Skip to main content
J
Jeffrey54 Lane
Known Participant
December 13, 2016
Answered

How to favicon [was: .ico]

  • December 13, 2016
  • 2 replies
  • 3318 views

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

    This topic has been closed for replies.
    Correct answer Nancy OShea

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


    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">

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 13, 2016

    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 contribute! (Note: this may b…

    Nancy O'Shea— Product User & Community Expert
    J
    Jeffrey54 LaneAuthor
    Known Participant
    December 13, 2016

    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
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 13, 2016

    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

    Nancy O'Shea— Product User & Community Expert
    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    December 13, 2016

    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")

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices