1) Choose a picture or prepare a logo for your website and open it with GIMP.
2) Scale the photo to 16x16 pixels.
3) Record picture as png with File-Export As option from menu.
4) Record one picture more as ico with File-Export As option from menu.
5) Change the names of pictures to favicon.png and favicon.ico
5) Apply the following code to your webpage html code between <head></head> tags:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.png" type="image/x-icon" />
6) Move the pictures to your server; make sure they are in correct path.(For above codes: html page and pictures must place same path. Many browsers search favicon.ico file in website root as default and accept favicon in the site root)
Note: Only using of first code will answer the purpose. (the code which includes favicon.ico)
If you wish, you can add gif format favicon with animation. Many browsers support gif format favicon, but they don\'t play animation. Favicon with animation was playing in Firefox 42.0 version. For browsers which don\'t play animation, you can find some javascript codes in Github etc. websites. For gif animations:
<link rel="shortcut icon" href="favicon.gif" type="image/gif" />
There are some alternatives for animated GIF like MNG, but they haven't satisfactory widespread as favicon.
Additionally you can use multi-layered icons on some modern browsers with following code etc.:
<link rel="icon" sizes="16x16 32x32 48x48 64x64" type="image/svg+xml" href="favicon.svg"/>
If you want to watch our two minutes video about how to change a normal picture to a favicon, please click: https://youtu.be/eXm6ZJR6j9g
Applied in Linux Mint 17 and GIMP 2.8.10
Date of Article: 21.02.2016