Generating favicon for personal blog
We will go through creating a favicon (an avatar), converting it to necessary image format(s), and finally configuring webpages to use it.
First we need to create a favicon to add it to our website. For a personal blog I prefer using a personalized avatar. I used avatarmaker.com to create my avatar and downloaded the
svg version to have a high quality image. Now the only bowsers that support
svg favicons are Firefox and Safari. Hence it is a good idea to create a
png version as well for say Chrome users.
Note: You might also want to create an
Generating the png version
For this I used svgexport. This utility can convert
.svg images to
- First you will need to install
npm. Go to this link to download and install
- To install
svgexporton mac type the following in the terminal:
sudo npm install --global --unsafe-perm=true --allow-root svgexport
- Now to generate the
pngversion of the favicon, use
svgexport images/favicon.svg images/favicon.png 64x
For me, the file sizes were:
- favicon.svg = 51 KB
- favicon.png = 1.1 MB
Note: I tried using ImageMagick to convert the
.svg file to
.png file. However it gave me errors and failed converting the
svg file downloaded from avatarmaker.com.
Embedding the favicons in html page
Next we need to add the following html tags to the
<head>...</head> section of all webpages:
1 2 <link rel="shortcut icon" type="image/svg" href="/images/favicon.svg" /> <link rel="shortcut icon" type="image/png" href="/images/favicon.png" />
Now the favicon should be picked up by web browsers whenever your website gets loaded.