Tutorials

Add a FavIcon to your iWeb site

It seems to be all the rage these days, having a Favicon showing in the address bar of your site.  You may be surprised to learn that getting on there is really easy.  Follow the tutorial below to see how you can add a little bit of colur to your visitors address bars.

To start with you need a image editor that is capable of saving images in the ‘ico’ format.  Alternatively, pay a visit to one of the many sites that have inbuilt favicon generators.

www.degraeve.com

www.favicongenerator.com

www.favicon.co.uk

For this tutorial you are also going to need a text (HTML) editor.

Ensure the latest version of your site is ‘Published to a folder’ and then open that folder.  Copy your chosen favicon into the folder.

Open index.html in your text editor of choice and after the ,<title>Your Page Title</title> tags add another line.

In that line type (or copy) the following bit of code.

<link rel=”shortcut icon” href=http://yourwebsite.com/favicon.ico />
<link rel=”icon” href=http://yourwebsite.com/favicon.ico />

Obviously you have to replace the path name with your web-site url and make sure that you saved your icon as ‘favicon.ico’.

Now all you have to do is publish your site.  Everytime someone visits your iWeb site or adds you to their bookmarks, your favicon will show up in the address bar.

(Unfortunately this has to be repeated everytime you edit your home page. However you can set-up and save a search in MassReplaceIt and apply it everytime you publish your site.)

You may also like

41 Comments

  1. Thanks for the hint! It’s only a small touch, adding a favicon, and one that I maybe haven’t done particularly well, but I try to pay attention to these little details… just call me a fussy son of a xxxxx 🙂

    BUUUT… for Safari to recognize it, you also need to add:

    type=”image/x-icon”

    to both lines before the final />

    Oh, and one other potential minefield – the quotes ” on this page are translated as ‘flowery’ ones, so that the text editor may save them as a question mark in the HTML file.

    Man, these syntax problems cost a LOT of time…

    Nevertheless, thanks a bunch! Will be stopping by again in the future… might even leave a small donation if I find a few more such hints…

  2. Actually, my version of Safari (3.2) views my favicon without any problems and without the extra “image/x-icon” coding. It may just be unique to you . . . All I do is add:

    “link rel=”shortcut icon” href=”http://www.tobylaura.com/myicon.ico” />”

    and it all looks great, on Safari, Opera, Firefox, and IE. Good luck!

  3. Hey Toby, I could use some help.
    This is what I have in my index with the pasted code as you specified and my favicon is not showing up. Do you have any suggestions? Also, is there a wait period before it will show up on Safari, it has only been about 20 minutes since I processed it.

  4. ……i mean hey Tim, or whoever answers these questions.

  5. C,

    There is no reason why there should be a time delay, it should work straight away. Looking at the HTML of your site, you have not added the code at all, so it will not work. How are you publishing your site?

    Tim

  6. Hey Tim
    i don’t know why you do not see the code it is there at the bottom and written just as you specified maybe it is in the wrong place, here is my whole Index.html again and I publish my site to a folder then on go daddy:

  7. C,

    You should be inserting the code after the tags which is mentioned on my tutorial. I visited your site and viewed the source code. I did a search for ‘favicon’ and nothing came up which lead me to think you hadn’t inserted the code.

    Tim

  8. Hi,

    Really hope you can help. This has become the bane of my existence. Here is what I am doing. Created favicon. Saved it in my website folder. Opened up index page in html editor (I am using komodo). Adding both (am I supposed to add both?) lines of code from the tutorial above replacing with datingmakeovercoach.com -my site-. Nothing. Also, after I save it in the html editor the site does not seem to need to be published. Like there have been no changes. When I look at my page source, it doesn’t seem to be there.

    Any thoughts. It is now becoming an obsession.

  9. Greetings,
    I am also having trouble getting the logo to appear once I publish the site. Please help if you can! Here is what I have done:
    1. Saved my logo as 16×16 ico file and placed it in the general website folder
    2. Used Taco HTML edit to place those lines of text into my HTML:

    3. Used iWeb to Publish “Entire Site”

    When I look on Firefox, it is still the same old white page!

    1. Joseph,

      Thanks for your comment, if you are making changes in Taco and then publishing in iWeb the changes you made will not publish. You have to save your site to a folder in iWeb, make the changes with Taco and then publish with an FTP app such as CyberDuck (if you have your own host) or copy/paste to your iDisk if you are on MobileMe.

      Tim

  10. Hi Tim,

    can you redo your tutorial but instead of publishing it to a folder, show how to publish to MobileMe? You said in your last response to copy/paste to iDisk…do you still have to save the site to a folder, add/edit the HTML code, then copy/paste THAT to iDisk? And which folder…the Web or Sites folder? I would appreciate your help!

    Also, I’m publishing to MobileMe but using my own domain name…so I’ve pointed to web.me.com using a CNAME record at my registrar’s domain name service (DNS) management area. I’ve read that masking the URL this way may prevent the use of a favicon…is that the case?

    Thanks so much for your help!

  11. Hi Tim,

    Very much like Joseph I have created a favicon for my iWeb website hosted through MobileMe and using iTweak to add the favicon can’t get it added or viewed on either Safari or Firefox. Why?

    This is the favicon URL:

    http://web.mac.com/paulineamphlett/www.sybasprinter.co.uk/favicon.ico

    Any other suggestions on have to add the favicon to my website address would be much appreciated. (But try not to make the advice to technical-I like to drive my car for example and enjoy the ride but don’t want to understand how it works inside out.)

    Regards,
    Pauline 🙂

    1. Pauline,

      I took a look at the code on your site and I can’t find anywhere where you have inserted the code for the favicon. As you are on MobileMe you can edit your pages HTML directly from your iDisk, have you tried to follow my tutorial?

      http://allaboutiweb.com/index.php/2008/08/add-favicon-to-iweb-site/

      Tim

  12. Hi Tim,

    I’m going to try and attach the favicon for you….

    /Users/paulineamphlett/Desktop/Snowflake Favicon Folder/favicon.ico

    I don’t know whether you can access it?

    Regards,
    Pauline 🙂

  13. well, I tried everything to get this method to work…it just didn’t. I don’t think the problem is with the code though…other than missing “” around the site addresses. Of course that may not be necessary anyways.

    I did find a work around though, one that does not require me to change every page manually when I re-publish. I’m using iWeb SEO Tool (free) to add Google Analytics and keywords to the site’s pages…and while it doesn’t have a tool built in for favicons, I figured out how to use it. I uploaded my images to Picasa (free) and took the embed code (web address) it provides for sharing. I then took that address and substituted it in your code. Then I inserted that code WITH the Google Analytics code into iWeb SEO Tool and clicked “add to all pages”.

    Now, whenever I publish to my folder (in Dropbox) from iWeb, I then open iWeb SEO Tool, select the “Re-Apply Saved Tags” button and then click “Publish”. Once it was set up, it only takes a couple of clicks to publish with Analytics and Favicons! Nice! Thanks for your suggestions. I subscribed to your blog as well!

  14. great! worked on the first try, thanks so much!

  15. Robert Gilbert:
    How did you manage this. I have tried your method and I can’t get it to work.
    How did you substitute the web address from Picasa. Does it matter where you put he code in Iweb SEO with the Google Analytics code? I know I am probably missing something simple.
    Thank you.

  16. Hi Tim,
    Ive been trying to put the code in BBedit now for many times, but every time I open my index.html and open the source to see I don’t see the code with flavicon back. I put the flavicon.ico in the folder, does it matter where maybe? And do I have to put the code in both index pages? The one outside and the one inside the folder? And both codelines?
    Its about the website dartis.nl. Im sorry, Im really green in these things. Would be great if you could help…

  17. Forgot to say that its about dartis.nl/demo

  18. Hi Tim,

    I’m still having problems….

    After your feedback in November I haven’t come back to this problem until yesterday and guess what I still can’t solve it. Why? (Now I can’t even view the favicon’s of other websites that used to come up in my address bar.)

    Any suggestions would be much appreciated.

    Regards,
    Pauline 🙂

  19. Where do I insert the code? Here is my index html.

    I have moved the faviocn to the folder already. I just am not sure where to add the code. Thanks for your help.

  20. Help! I cannot get my favicon to work, and I have tried everything! i am so ignorant about HTML, and I could really use some help. If someone can walk me through the steps while we chat in say yahoo or msn messenger, then it would make my life so much easier!

    Thanks so much!

  21. This is the third time you’ve saved me. haha. I love these things and I never knew what they were called until this morning! Thank you so much for making iWeb much easier for me!

  22. wait… I open index.html with textedit and it’s a blank page?

    1. Ally,

      You will have opened the wrong page. Look for the page with the same name as the homepage you set in iWeb.

      Tim

  23. I got it to work, but I did have to change the smart quotes to regular quotes. Very exciting. Thanks!

  24. followed these instructions and they were wonderful, except for two things:
    1. it took me a while to realize that I needed to reconfigure the TextEdit settings to ignore .rtf in .html files. I got that figured out ad added the lines to the root index
    2. Now, my favicon is showing up as a blank white page. I am working only in iWeb, so I cannot understand why I am having this trouble. My site is through GoDaddy, if that makes any difference.

  25. I have the same problem as LP…as well as the same host…and I love this site for all the real help! Thanks!

  26. It shows in Safari, but not in Firefox. Strange…..
    Does anybody has a tip for me?

    @Ally, try TextWrangler (freeware), if you open it in TextEditor, it doesn’t work.

  27. Well, my favicon works on Safari but not in Firefox. Why would that be?

  28. Hi Tim, I have my web domain forwarding from GoDaddy to my MobileMe account with a masking so the user still sees my website URL in the bar. Can I still do a favicon and have it show up? I’ve been trying to figure this out and nothing is working… any advice is much appreciated! thanks!

  29. Hi Tim,
    The favicon shows up in Firefox and not in Safari or Chrome. I added the type=”image/x-icon” that Sol suggested in the first comment, but that didn’t work. Any suggestions?
    -Harry

  30. Oops, it disappeared and I can’t get it back. My favicon, that is.

  31. Thanks for this – I had been struggling with someone elses notes – yours showed that I needed to put the full path in the header, not just /favicon.ico

  32. Hi Tim!

    A friend referred me to this page to get help inserting a favicon to the website I have designed for my employer. I have no formal training in web design. I created the webiste using Microsoft Publisher and I publish it to the web using FileZilla. I can create the favicon and save it in the folder to which Publisher publishes my website, but I’m not so sure about how or where to enter the code you provided above (I know how to enter a piece of html coding into each page on my site, is that all I have to do?). Any help would be awesome.

    Thanks,

    Maria

  33. This worked perfectly! Thank you!

  34. Hi and thanks so much for this post. I’m using iWeb ’08. When I open the “index.html”, of course, it opens as an html file in my browser. When you say to use my favorite text editor, can you please give me a clue as to what text editor I should use to open the file and make the changes. Then, will it save in the same format as previous. Thanks so much, and apologies for my lack of knowledge in this!. Richard

  35. Will this work on a Dropbox hosted site?

    1. Most likely it should work.

    2. Dylan, it worked for me on my Dropbox hosted site, but not just by putting it in the index.html file. I had to put it on each page’s .html file. Right after the tags I added both these lines:

      For some reason what finally worked for me was adding the link to each page’s .html file as described above (I used both lines though not sure if necessary), made sure they are in 8-bit (256 colors) and not just 4-bit, and added the “?23189123” at the end of the link. That was that hardest part to figure out and who would’ve guessed? Anyone know why this is necessary (at least on Safari 5.1 for Mac)?

  36. can you suggest me any wordpress plugin to add favicon to a blog?

Leave a Reply to Ally Cancel reply

Your email address will not be published. Required fields are marked *

More in Tutorials