ShadowMage Posted August 31, 2010 Share Posted August 31, 2010 I know this is a simple question, but how do you add a favicon to a website?I have an icon file saved in my root directory as 'favicon.ico' and the following code in my document:<head><link rel="SHORTCUT ICON" href="favicon.ico"/>but it still won't show up in FF. It does work in IE, though.I thought the only thing I had to do was save it in the root directory but apparently I was wrong..... Link to comment Share on other sites More sharing options...
boen_robot Posted August 31, 2010 Share Posted August 31, 2010 I think you should write it "shortcut icon"... in lowercase, and add a "/" to the path too, just in case, like: <link rel="shortcut icon" href="/favicon.ico" /> Link to comment Share on other sites More sharing options...
ShadowMage Posted September 1, 2010 Author Share Posted September 1, 2010 I think you should write it "shortcut icon"... in lowercase, and add a "/" to the path too, just in case, like:<link rel="shortcut icon" href="/favicon.ico" /> No joy... Link to comment Share on other sites More sharing options...
dsonesuk Posted September 1, 2010 Share Posted September 1, 2010 try <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />make sure the size is correct 16x16. Link to comment Share on other sites More sharing options...
ShadowMage Posted September 1, 2010 Author Share Posted September 1, 2010 try <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />make sure the size is correct 16x16.Still no joy....I gotta run for now. I'll come back to this issue tomorrow. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 1, 2010 Share Posted September 1, 2010 in firefox right click and select view page info - media tab and look for icon, select it and it should appear in pane at bottom Link to comment Share on other sites More sharing options...
thescientist Posted September 1, 2010 Share Posted September 1, 2010 clear cache? Link to comment Share on other sites More sharing options...
ShadowMage Posted September 1, 2010 Author Share Posted September 1, 2010 clear cache?Yeah tried that. No luck. I googled this and the only thing I can find on creating a favicon is the code snippet I posted above. It works in IE, but not in FF. @dsonesukI assume that would produce similar results to navigating to the file using the url (which works fine). If I type intranet.domain.com/favicon.ico into the address bar I can see the icon in the browser window. It just doesn't show up on the tabs, bookmarks, or address bar. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 1, 2010 Share Posted September 1, 2010 i just wanted to know that firefox can actually access the file and list it in the page info. How did you exactly produce this icon? I usually produce image, and use one of the favicon creator web sites, and I have never had any problems like this with firefox, IE yes! as it takes time in replacing old with new. Link to comment Share on other sites More sharing options...
ShadowMage Posted September 1, 2010 Author Share Posted September 1, 2010 i just wanted to know that firefox can actually access the file and list it in the page info. How did you exactly produce this icon? I usually produce image, and use one of the favicon creator web sites, and I have never had any problems like this with firefox, IE yes! as it takes time in replacing old with new.I created it with GIMP. I took a PNG image, resized it, and saved it as an icon. (I think as 24-bit, uncompressed icon)Funny thing is, on the intranet here at work, the favicon is a 32x32 icon. And I don't see a <link.../> anywhere in the code on any of the pages, and it works just fine..... Link to comment Share on other sites More sharing options...
dsonesuk Posted September 1, 2010 Share Posted September 1, 2010 was it one layer image, if not! you should use flatten image, as you might be saving data from the other image layers. Link to comment Share on other sites More sharing options...
ShadowMage Posted September 1, 2010 Author Share Posted September 1, 2010 was it one layer image, if not! you should use flatten image, as you might be saving data from the other image layers.Yep. Single layer image. Link to comment Share on other sites More sharing options...
ShadowMage Posted September 1, 2010 Author Share Posted September 1, 2010 Ah, I think this might be the cure:<link rel='icon' href='favicon.ico' type='image/png' /><link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />It worked on a test page here at work, so I'll try this out when I get back home. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 1, 2010 Share Posted September 1, 2010 well instead of going through the all process, heres a process from example for wordpress * Open a picture in GIMP * Image => Canvas Size (Change the canvas to be square) Unlink Width to Height Chain Increase the narrowest dimension (either width or height) to be the same as the widest (i.e. make the image canvas square). Centre the image on the new canvas Click Resize * Image => Flatten Image (critical to make sure icon doesn’t save with multiple images in it) * Image => Scale Image to 16×16 pixels * File => Save as… * Microsoft Windows Icon (*.ico) * Enter filename “favicon.ico” Link to comment Share on other sites More sharing options...
ShadowMage Posted September 1, 2010 Author Share Posted September 1, 2010 well instead of going through the all process, heres a process from example for wordpress * Open a picture in GIMP * Image => Canvas Size (Change the canvas to be square) Unlink Width to Height Chain Increase the narrowest dimension (either width or height) to be the same as the widest (i.e. make the image canvas square). Centre the image on the new canvas Click Resize * Image => Flatten Image (critical to make sure icon doesn’t save with multiple images in it) * Image => Scale Image to 16×16 pixels * File => Save as… * Microsoft Windows Icon (*.ico) * Enter filename “favicon.ico”Thanks. Think I'll redo the icon using your recommendations and try that first. If that doesn't work I'll try the code I posted above. Link to comment Share on other sites More sharing options...
amitamberker Posted September 3, 2010 Share Posted September 3, 2010 Hi ShadowMage,This should work:<HEAD><link rel="shortcut icon" href="http://www.YOUR-DOMAIN.com/favicon.ico" type="image/x-icon"><link rel="icon" href="http://www.YOUR-DOMAIN.com/favicon.ico" type="image/x-icon"></HEAD>Hope that helps.Thanks! Link to comment Share on other sites More sharing options...
ShadowMage Posted September 4, 2010 Author Share Posted September 4, 2010 This should work:<HEAD><link rel="shortcut icon" href="http://www.YOUR-DOMAIN.com/favicon.ico" type="image/x-icon"><link rel="icon" href="http://www.YOUR-DOMAIN.com/favicon.ico" type="image/x-icon"></HEAD>Hope that helps.Apparently FireFox needs the rel='icon' link to work. So yes, that is the answer I was looking for. I posted the code a couple posts back, just never got around to trying it. Thank you though. Link to comment Share on other sites More sharing options...
amitamberker Posted November 11, 2010 Share Posted November 11, 2010 Apparently FireFox needs the rel='icon' link to work. So yes, that is the answer I was looking for. I posted the code a couple posts back, just never got around to trying it. Thank you though.You are welcome. Link to comment Share on other sites More sharing options...
airesofwar Posted November 11, 2010 Share Posted November 11, 2010 I use something like this and it works in any browser I have tried it in. <link href='www.image.ico' rel='shortcut icon' type='/icon/ico' /><link href='www.image.ico' rel='shortcut icon'/><link href='www.image.ico' rel='icon'/> Link to comment Share on other sites More sharing options...
Dilated Posted November 11, 2010 Share Posted November 11, 2010 "shortcut" is not a link relation. You should never be writing "shortcut icon". It should just be "icon". However, if you're using a .ico file, you don't even need a link relation. Just put your favicon in the root directory and name it "favicon.ico".Every major browser automatically checks for favicon.ico in the root directory when visiting a new domain (unless its already cached of course), regardless of whether you have a <link> element for it.edit: Also, if you do need to include a link relation for "icon", you don't need to include @type unless the server is, for some strange reason, sending the wrong mime type for the file (or none at all). AiresOFWar kind of made my point for me above. "/icon/ico" is not a mime type. If browsers actually used the type attribute for something other than fallback when determining the mime type, the icon wouldn't be recognized as an image at all if it saw the mime type was "/icon/ico". Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.