News:

May 11, 2011:  New E-Commerce Tutorials added to training DVDs.
   *Learn How to Add a Shopping Cart to an existing Web Page.
   *No Programming, No Coding.
   *Step by Step tutorials just for Beginners.

**GO TO:  www.Expression-Web-Tutorial.com/catalog.html

Topic: Make a Favicon  (Read 930 times)

Kelly May 15, 2011, 01:40:34 PM

  • Administrator
  • *****
  • Posts: 127
    • Expression Web Tutorial - A Place For Begininers
A Favicon is used to add an icon to the tab of a browser.  When someone views your a page within your web site, their browser tab will show your favicon.... or icon. 

This is incredibly simple to do with the help of http://DynamicDrive.com.


Step 1: Go to www.DynamicDrive.com and click on the Faviocon Generator which is located in the left column.

Step 2: Look for "Image to create icon from:" and click on "choose file".

This will let you navigate your computer to locate the image you'd like to use as your favicon.  You might want to make something in a graphics program ahead of time....  or use an existing logo, etc.

Step 3:  Once your file finishes uploading, click on the "create icon" button.

Step 4: Now click on the button, "Download favicon"

After downloading the favicon, import it or drag it into your open Expression web Web site.  Then upload it or publish it to your server.

Step 5: Add the following piece of code in the <head> section of your home page:

 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Finish up by publishing the home page.

Please allow about 24 hours for the favicon to appear.

Enjoy!

Kelly

RonS November 19, 2011, 03:51:19 PM (#1)

  • *
  • Posts: 10
I tried this and it works great

Kelly November 22, 2011, 09:10:50 PM (#2)

  • Administrator
  • *****
  • Posts: 127
    • Expression Web Tutorial - A Place For Begininers
Hi Ron! 

Glad it worked for you!!

Kelly

jimsmith February 26, 2012, 03:31:33 PM (#3)

  • *
  • Posts: 2
Hello Kelly,
I have tried to add the favicon several different ways and so far have not had any luck with it.
When you say upload the favicon.ico file to the server are you specifically saying import it to the images folder and publish?

Then I am not sure about inserting the html code.   I inserted it in a few places on the home page.  I don't see anything on my home page about <head>
So my next attemp was to insert the code onto the layout.dwt page in the templates folder.  There was a <head> there.  I inserted the code in the line below.  The layout1.dwt displayed a message when I saved it that it was associated to 4 pages and would update all 4.  I agreed to it and then published the changes.
What do you think I am doing wrong?
Thanks, Jim
 :)
www.docrodman.com

NiagaraMouse February 27, 2012, 08:47:37 AM (#4)

  • *
  • Posts: 36
    • Motivation Graphics
I have tried to add the favicon several different ways and so far have not had any luck with it.
When you say upload the favicon.ico file to the server are you specifically saying import it to the images folder and publish?

Then I am not sure about inserting the html code.   I inserted it in a few places on the home page.  I don't see anything on my home page about <head>
So my next attemp was to insert the code onto the layout.dwt page in the templates folder.  There was a <head> there.  I inserted the code in the line below.  The layout1.dwt displayed a message when I saved it that it was associated to 4 pages and would update all 4.

Just import the favicon.ico into your site (use that name and extension only), not inside a folder, not inside a page. When you publish your site it will then automatically appear in the address bar. See the attachment that shows part of the list of my site you see the favicon.ico is where the pages are.

Sherron

NiagaraMouse March 16, 2012, 10:58:50 AM (#5)

  • *
  • Posts: 36
    • Motivation Graphics
I have further information for the favicon:  add these two lines of text to your code in the head of your index page:

<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

My favicon was okay in IE but not in FireFox until I added that code.

Sherron