Set your Favi DIRECTLY inside your html code in the case of static site

If we have a NON wordpress site but a simple static site, we have to set the favicon of our taste manually.
So we have to open our editor..and set it inside the code.
Of course in the case of WP site we also have the ability to set the favi manually editing our files in the text editor, but in that case I strongly do not recommend such thing.
Many times I have told you my opinion which is : DOING EVERYTHING IN THE MOST EFFECTIVE AND SIMPLE WAY TO SAVE TIME,MONEY WITHOUT MAKING SALES IN QUALITY.
So in th case of WP site.. see here …Set your Favicon inside WordPress Dashboard

NOW lets concentrate on our essential steps.

Let’s see how to SET the favi..

1.Open Notepad ++   (You can also use these Alternatives.. Here are the best and simplest text-editors

Inside the editor..OPEN your html file. We have to point out that if your site consists of many html pages, then you have to edit all the html files to display normally your site favicon.

Notepad++

 

 


2. Now we have to find the <head> element, and inside that we will set our favi.

NOTE: The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. The <body> tag is the visible part of the HTML document.

HTML metadata is data about the HTML document. Metadata is not displayed.

find element

 

 

3. ADD this line of code(inside the head element and of course NOT INSIDE THE BODY ELEMENT) :  <link rel=”shortcut icon” href=”ico/favicon.ico” />   , where favicon is the name of our favi that we had earlier created.

NOTE-1: You have also the ability to add a png type as favicon , adding the following line of code:

You have to make a 16×16 pxls png file first.

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://eg.com/favicon.png"/> .
In the first line you see that favicon is not located in a specific folder but it is located in the same place as the html file that we edit.
Of course as you can see in the 2nd line in that example..you can use an online existing png named favicon and which is located in the eg.com website.

NOTE-2: Do not forget to upload the favicon.ico file in your server inside the folder named “ico” as it is shown in the “href” address.

3

 

 

4. SAVE the file… either by presiing the shortcut Ctrl+S or clicking the save button.

save-file

 

 

5. Now , we are ready to upload our saved html file to our server and then see the changes.

 

Happy new Favi….. 🙂

That’s all. NOW , you have already set the fav.ico.n of your taste .

Leave a Reply

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