Web-site building tutorials consider content to be the most important thing. I disagree, at least for newbies: choose form over substance. Make certain that people recognize your content. Make that easy by building a brand first, like choosing a slogan and creating a look for your site. When you make a splash later, people will remember that it is you.
Look at a few of your annoying Facebook “friends”: forward anything without reading, as long as it looks good and has a catching title. So focus on looks first, before becoming the next Shakespeare.
As geeks we often focus on small things, things that non-crazy people find utterly boring and not important. One of those things is the creation of a favicon, the little icons in the tab of your browser. However, these little critters get more important by the day and are used in unimaginable ways, just as a newspaper.
The W3C standard about Favicons is a bit outdated, but is not bad as an introduction. This post by Philippe Bernard explains why everyone get it wrong. In summary, a Favicon:
- has several purposes, such as high definition shortcuts on the desktop
- consists of several graphic images and several formats
- need some HTML code in the
<head> section of every page.
The Favicon Base Graphic
The base graphic will be converted into all necessary graphical formats. It should look nice when very small such as in a tab of a browser, but must also look good as a high resolution tile on your desktop.
Plenty of solutions are possible, but my choice is an SVG image, because it is a vector graphic. Without quality loss, you can convert them into small icons or large images.
If you are an artist, you can an SVG image. Another solution is to find a free image or pay an artist. Once you have your image, move to the Favicon Generator website.
Create all Files and Code
All you now need to do is upload your image. Answer some easy questions regarding your preferences and click “Generate your Favicons and HTML code”.
The result is a downloadable ZIP packet containing all files. These should be moved to the root of your web-site. The site will also make a recommendation for the code to be inserted in the
<head> section off every page. This looks similar to this:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
Remember from this post that size does matter and create your favicon now before less important things ruin your day.
Once you are happy with your fabulous favicon, read my tutorial on how to use it with Hugo, the web-site builder.