What Icons should I have on my Website?

In the early days, there was really just one Icon on Websites — the Favicon Icon. The Favicon is an Icon displayed normally next to the Title of your Website. Today there are some ways to define even more Icons in different, and you should consider doing it!

Favicon Icon — Website

To display the Favicon Icon next to your Title inside the Browser, you can just set a Link tag inside your head of the HTML file like this:

<link rel=”shortcut icon” type=”image” href=”./favicon.png” />

Favicons need to have a specific Size to be displayed. The “original” Favicon is just 16x16 Pixels large. But today you can, and you should set also a bigger Favicon with the Size of 32x32 Pixels.

You can also set Icons in the Sizes including 32×32, 24×24, 48×48, 64×64, 128×128, and 256×256.

Other ways to Implement Icons with other formats:

<link rel="shortcut icon" href="/favicon.ico" /><link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="icon" href="/favicon.ico" />

Some Search engines (like Google, if you implement them correct) even display Favicons directly in Search Results:

Google is here displaying your Icon directly next to your link in the Google Search results.

This is good for your Brand Image, some People might just recognize you by your Logo. Websites with this Icon also seem a more legit/real than a Website without the Icon.

You can achieve all this just with the two Favicon Icons. But there is more!

On Apple, Android, Windows, Chromebooks etc. you can create Bookmarks for Websites. For every operating system, it’s a bit different. On Apple devices, you just press on share and on “Add to Home screen” (just on Safari). On Android devices you can press on the three dots and press “Add to Home screen” (just on Google Chrome) and on Windows you can depend on your Browser you just drag it on the screen, or you go to sharing or press the Three dots. Anyway, if a client reader etc. is doing this normally there will be depending on the operating system just the browser logo or a Screenshot of the Website as an Icon. You can change this by creating multiple sizes:

On Apple you need at least:

One Icon with the Size of 120x120px and another one with the size of 180x180px

For Android and the other Operating Systems you should have at least:

72x72 px; 96x96 px; 128x128 px; 144x144 px; 152x152 px; 192x192 px; 384x384px; 512x512px

There are online Icon creator tools for creating these Icon Packs. They work, but I found out that they often don’t have the best Quality. I recommend using your Design Tool. Write me an Email (email on my Website). I can send you a free template file :-).

There are some other Guidelines you should consider thinking about. First you can create in some cases Transparent Icons but don’t forget about the Background. The user can have dark theme enabled or light theme enabled. If your Icon is Black or White, you shouldn’t use a transparent Background. Think about this before creating the Icons.

Another Important fact to know is: Apple doesn’t support transparent background!

Here is a example with my Code recommendation below implemented.

How to Implement the Icons in your Code:

There are two you should Implement the Icons into your Code. You should make it both, some Platforms just accept one of them.

In this case: More is better but my recommendation is to use this as a Minimum:

First off all you should set the Favicon Icons and the Apple Icons as Metatags and Link Tags. HTML FILE: (e.g. index.html)

<head><!-- Favicon in the different Formats (you just need one or two):--><link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico" />
<link rel="icon" type="image/svg+xml" href="/assests/images/favicon.svg">
<link rel="icon" type="image/png" href="/assests/images/favicon.png">
<!-- Apple Icons(you should consider creating all but 120x120 and 180x180 is enough):--><link href="touch-icon-iphone.png" rel="apple-touch-icon">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<!-- Manifest.json Important to Link the Manifest! -->
<link href="/manifest.json" rel="manifest">
</head>

Here is a example with my Code recommendation below implemented.

Icon inside the Manifest:

{
"name": "app name",
"short_name": "short name",
"icons": [{
"src": "images/icons/icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/icons/icon-168x168.png",
"sizes": "168x168",
"type": "image/png"
},
{
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"orientation": "portrait"
}

Do you need help? — Write me :-)

→ If you want to make your Website fully installable look just Google PWA

Hi, my Name is Carlo and I just share here some stuff about the Web and SEO