Creating a website icon

Preface

This guide assumes that you are using Debian, or an operating system based on Debian.

Website icon is a small image displayed in web browser's tabs and bookmarks next to a site name. It can have any name, however the default name is 'favicon.ico'.

If a file with the name 'favicon.ico' is present at the root directory of the website, most web browsers will use it as a website's icon. It is always better to use 'link' tag to explicitly point to an icon file. Doing so will also allow you to have different icons for different web pages on your website. <link> tag must be placed inside the <head> tag in web page's source code.

<link rel="icon" href="/favicon.ico" />

Preparation

Install the necessary packages.

sudo apt update

      sudo apt upgrade -y

      sudo apt install gimp imagemagick libimage-exiftool-perl optipng

Creating PNG image file

Create a square image using 'GNU Image Manipulation Program'. The image may contain transparent background. The image can be of any size, because it will be scaled down, but it's size must be larger than 64x64.

Export the image in PNG format, for example 'foo.png'.

Creating website icon file

Open terminal emulator's window and navigate to the directory containing 'foo.png'. Then run 'exiftool' with '-all:all=' parameter to remove all metadata from the PNG image. This is done to reduce the size of the image.

exiftool -all:all= foo.png

Use 'optipng' to further reduce the size of the image.

optipng foo.png

Use 'convert' utility from 'ImageMagick' suite to convert PNG image into an ICO image. This is a single command, backslashes '\' at the end of the lines allow the command to be placed on multiple lines:

convert foo.png -background rgba\(0,0,0,0\) \( -clone 0 -resize 16x16 -extent 16x16 \) \

      \( -clone 0 -resize 32x32 -extent 32x32 \) \( -clone 0 -resize 48x48 -extent 48x48 \) \

      \( -clone 0 -resize 64x64 -extent 64x64 \) -delete 0 foo.ico

Open the ICO image file in 'GNU Image Manipulation Program' to observe 4 layers created by 'convert' utility.

gimp foo.ico

'foo.ico' foo.ico

Adding website icon to html source code:

If ICO file is placed in the root directory of the website:

<link rel="icon" href="/foo.ico" />

If ICO file is placed in the current directory together with the web page:

<link rel="icon" href="./foo.ico" />