Curious. Is there a way that when someone saves my website to their desktop the icon is my index page, not the IE logo?
What icon? I’m not sure what you’re referring to.
When I click on my website now and save as a shortcut I get an Internet Explorer Icon. Is there someway I can set up my site so that when someone adds it to their desktop they will see the photo of my first page, or at least something different than the IE icon. Maybe it cannot be done…
O, I think you are talking about a “favicon”.
Firstly, place a link like this in the head of your web page:
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
Then in your root folder, place an image of your choice (called favicon.ico), preferably 16 x 16px. It can be a .gif or .png, but to work on IE it needs to be a .ico file. You can’t just change the extension to .ico, though. You need a program that can save it to that format. There is a plugin for Photoshop that does that, but otherwise you can try online tools like these:
Sorry, but I am having trouble following all this…when I upload an image it turns out extremely blurry.
Can someone explain again please?
So what have you been doing? Explain your current process. Because favicons are so small, you can’t have anything very complex. Just a very simple design. Show us what you are doing, or what you are trying to upload.
Was trying to upload photo that s on my index page…
attached.
This is way too big for a favicon. Make sure to read my posts above. A favicon should be saved as a 16 x 16 px image, saved in .ico format (to work on windows). I gave you all the info you needed to do that easily above.
I think Barnum is referring to multiple ICO favicon images that can display in a range of sizes.
Here are some free Photoshop plugins for creating both single and multiple ICOs. (Icobundle utility is for multiples).
If you don’t have Photoshop, Barnum, perhaps someone would process the image for you, or there may be an online service that’ll do it. Here’s a list.
Bear in mind that a photo will not look pretty at 16x16, so you may wish to use a different image for that size.
No big deal…I will figure it out eventually. Thanks for your help.
Will that code work for all browsers? I think this is something similar to what I am looking for as I want in icon to appear in Mozillas tab. Right now I only get a blank page. I’ve downloaded that plugin for Photoshop and got that installed right. Just wondering the rest of the procedures?
Yes, the code I posted above will work for all browsers. So save the file as a 16 x 16 px .ico file, save it to your root folder (not essential these days, but easiest), then place the link code in the head section.
It can sometimes take a while for the browser to pick up the new icon. You may have to clear your cache, for example.
I do all the above and still not get an icon. Can someone explain again…sorry. I created the favicon. Saved it to my root folder. Entererd the html code after the head, and still nothing.
And I uploaded the ico.
Just make sure it’s in the <head> section.
Also, you may need to clear your cache, as I mentioned above, as browsers do a lot from memory. Then delete the bookmark and bookmark the site again, too. Sometimes it takes a little while to get the icon to show. Try the site in other browsers too, preferably ones you haven’t viewed the site in before, to verify that the icon is working.
Amazing thank you again ralp.m! Clearing the cache fixed it for me Barnum.
Still having trouble…do I save this ico. to my root or to my images folder? And is the extension ico or icon?
My photo has name of title5. Tell me how that would look in head please?
You can save it to the images folder, but older browsers only look for it in the root folder, so it’s safest to place it in the root folder.
The extension is .ico, but as I said, you can’t just type that in. Use one of the services listed above that will generate a proper .ico file for you.
If you want to keep the name “title5” (I’d recommend calling it “favicon”, though, as that’s clearer—and I’m not sure if browsers look for that specifically or not) it will end up looking like title5.ico, and the code in the <head> section will then look like this:
<link rel="icon" href="/title5.ico" type="image/vnd.microsoft.icon">
used the program you offered, and it provided me with a favicon (photo shown before). I saved it as favicon like you said, and entered the following in <head>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
<meta name=“keywords” content=“Dick Stout, Metal Detecting, FMDAC, Treasure Hunting, coins, coinhunting, relics, prospecting, treasure, searchcoil”>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Stout Standards</title>
<link rel=“icon” href=“/favicon.ico” type=“image/vnd.microsoft.icon”>
<link rel=“stylesheet” href=“styles.css” type=“text/css”/>
<style type=“text/css”>
body {
background: #DEB887;
font-size:100%;
margin:0;
padding:0;
}
#container {
width: 95%;
min-width:990px;/keep BG color from stopping short/
background: #97694F;/header BG color moved to here/
The favicon is in my root directory, and I uploaded it via Filezilla…still nothing?
Your site, stoutstandards.com is currently showing a favicon of the photo you posted above in my browser address bar and history.
You may need to empty your browser cache, quit and reopen your browser to see it.