How to Create a Favicon: 5 Steps (with Pictures)

Table of contents:

How to Create a Favicon: 5 Steps (with Pictures)
How to Create a Favicon: 5 Steps (with Pictures)
Anonim

Visiting the web pages of Google, Yahoo or wikiHow you will notice that there is a small icon placed on the left of the address bar or the header of the browser tab. It is a "favicon", a word born from the contraction of the English words "favorite icon", and the best part is that you can create your own personalized favicon. This little trick, in addition to giving your website a more professional look, will be used to mark your web pages that users will add to their favorites. This way people will be able to locate your pages faster and easier.

Steps

Create a Favicon.ico Step 1
Create a Favicon.ico Step 1

Step 1. Create an image consisting of 16x16 pixels

You should choose a very simple subject as per the image so that it is instantly recognizable.

Create a Favicon.ico Step 2
Create a Favicon.ico Step 2

Step 2. Convert the image to a file called favicon.ico

The file that will contain your favicon must have exactly the name indicated. Otherwise the browser will not be able to find it. A quick and easy way to perform this step is to use the Dynamic Drive FavIcon Generator web service. Alternatively, you can use a free image editor, such as GIMP, and save the 16x16 pixel image in ICO format.

Create a Favicon.ico Step 3
Create a Favicon.ico Step 3

Step 3. Upload the newly created ICO file to the server hosting your website

Create a Favicon.ico Step 4
Create a Favicon.ico Step 4

Step 4. Add the following code to the HTML pages of the website

You should insert it inside the source code section and make sure that the path where you stored the ICO file is correct based on that of the web page in question. The HTML code is as follows (assuming the HTML file and ICO file are stored within the site's root directory):

Create a Favicon.ico Step 5
Create a Favicon.ico Step 5

Step 5. Refresh your site's page view and admire the beautiful favicon appearing next to the address bar or browser tab header

Advice

  • Even if favicons are really tiny, make sure users are able to see the content and understand it.
  • If you are using a Linux computer, you can perform the file conversion directly from the operating system. Choose the image you want to turn into a favicon, open the system command line, access the folder where the image is stored and type the following command: convert [image_name.png] -resize 16x16! favicon.ico (replace the [image_name.png] parameter with the correct name of the file that contains the image to be transformed into a favicon).

Recommended:

How to Create Digital Art: 8 Steps (with Pictures)

How to Create Digital Art: 8 Steps (with Pictures)

Digital art is becoming more and more popular with artists. It was made famous by its characteristics. Thanks to this article you will learn some tricks about it while having fun! Steps Step 1. Draw your idea on a paper If you don't have a scanner this is the best way to start.

How to Create a Philosophy: 11 Steps (with Pictures)

How to Create a Philosophy: 11 Steps (with Pictures)

Developing a personal philosophy can be a deeply rewarding life experience. A personal philosophy is a framework that helps you understand who you are and make sense of your life. Developing a personal philosophy is quite difficult, especially for a beginner, but the gratification you get certainly pays off for the effort.

How to Create a Virus: 9 Steps (with Pictures)

How to Create a Virus: 9 Steps (with Pictures)

Have you ever wished you could create your own virus for the sole purpose of learning new concepts or simply to prank someone? The process of creating a virus is not a game, it requires time and extensive technical preparation, but making it is still within the reach of all those who decide to undertake this project with commitment and concentration.

How to Create a Budget: 11 Steps (with Pictures)

How to Create a Budget: 11 Steps (with Pictures)

Having a budget allows you to control your finances and save to buy something you want or pay off a debt. Steps Step 1. Calculate how much money you make in a month and subtract the taxes In short, consider the net salary. Include tips, extra income and chores, investments, etc.

How to Create an Animated GIF: 10 Steps (with Pictures)

How to Create an Animated GIF: 10 Steps (with Pictures)

Animated.gif" /> Steps Method 1 of 2: Create an animated.gif" /> Step 1. Decide if you want to download the program or not GIMP is the abbreviation for GNU Image Manipulation Program. It is a free and open-source image processing program.