|
This lesson demonstrates how to save and upload the necessary files to display website favicons.
Toolbar Tutorials
Free On-line Favicon Generator Here
Note
I am demonstrating the process using Firefox 2 and Internet Explorer 7, the browsers I am working with on my Windows XP PC.
Favicon is short for favourite icon.
Internet Explorer 7
Firefox 2
1/
Open a New document that measures 16 Pixels X 16 Pixels.
Note
If you create an image that is larger then 16 Pixels X 16 Pixels, your web browser will reduce its size; which may result in distortion.
Now, Flood Fill it with a Solid Colour, Pattern or Gradient. Now, apply a shape, design or initials of your choice. Alternatively, utilise an image, or object, you have already; and reduce its size to 16 pixels by 16 pixels.
2/
Then from the top menu, choose File then choose Save as, and save your design ending it with favicon.ico
favicon.ico
Your file will resemble the following 
Note
After I entered the HTML code and uploaded my home page, (Chapter 3), my favicon displayed in Firefox - however, it wouldn’t display in Internet Explorer 7. To rectify this, I downloaded a (free) Photoshop Plugin, which can be found Here.
Once downloaded, (save the icon you have created as a PSD file - to open later), then close Photoshop. Now, unzip the plugin file, and copy and paste it into Photoshop’s Plugins folder, as described Here. Re open Photoshop, and your favicon image, then from the top menu, choose File then Save As. Now, scroll the Format tab, and click
Windows Icon (*.ICO) and in the File Name tab, type in favicon.ico - then click Save.
 |
 |
Regardless of how you save your favicon icon file, you must upload the saved file to the root directory of your website, leaving it free, (not in a folder). The root directory is wherever your home page - Index.html - resides.
How I Transfer My Favicon Using Internet Explorer And 1and1
If you know how to access your website via the Internet Explorer FTP facility - simply copy and paste - or drag and drop, your favicon.ico file from your Desktop, into the root directory.
Internet Explorer FTP
Type ftp.www. then your website address, into Internet Explorer’s browser. You will be prompted to enter your Username and Password. (these are the details you use to upload your website). Once entered, the root directory of your website will open. For security reasons, access your website this way using a private PC and not an internet cafe, or a public library PC.
 |
 |
1and1
From the (1and1) Control Panel, navigate to WebspaceExplorer.
 .
And upload your new favicon file from your computer, to your website’s root directory. (Screen Capture).
3/
The next step is to insert the following HTML code into the HTML of your Index
(home) page - either of the following HTML code, works.
Note
The code must be placed between <HEAD> and </HEAD>
Note
I have utilised both favicon codes for all of my websites, and my favicons display in Firefox and Internet Explorer. Paint Shop Pro, Photoshop, Personal Site.
(It does not matter if the HTML is on one line, or two - it works either way).
4/
Now, upload your Index page (home page), in your usual way.
Servers display unique index.html files - this is 1and1’s.
5/
Type your URL into your browser’s address bar.
Then bookmark your home page. Hopefully, (after refreshing your browser), your
Favicon will be visible.
Internet Explorer 7 Tips - Clear Your Cache And History
From Explorer 7, click Tools, then click Internet Options. In the General tab, click the following Delete tab.
In the subsequent Delete Browsing History dialogue box, click Delete to delete the Temporary Internet Files and the History Files. Now, close Internet Explorer 7, then reopen it - and type in your website’s URL. Then add the page to your Favourites and reload it by clicking the following Refresh icon.
Your favicon will hopefully display.
Note
Adding the HTML to your home page (Index page), between;
<HEAD> and </HEAD> As demonstrated by my screen capture here!
Should enable subsequent (uploaded) pages to display your Favicon. If this doesn’t work, copy and paste the HTML code into every page.
Wendi E M Scarth. Top of Page - Home.
|
|
