Why you shouldn't ignore favicons
One good reason for using favicons is the fact that they have a high recognition value. Images are more appealing than pure text—so it's high time for the icon feature on your own website! Moreover, it can have a negative effect on Google's page ranking if the favicon is missing. This is because the browser automatically searches for this graphic and sends an error message if no icon is found. This, in turn, increases your website's loading time.
The favicon is ready and—now what?
You can integrate the finished favicon into the main directory of your domain with a simple command. All you need is an FTP programme such as FileZilla and the following HTML commands. These commands must be inserted in the HTML file in the <head>-part.
<html>
<head>
<!-- For Apple devices -->
<link rel="apple-touch-icon" sizes="180x180" href="[PATH TO THE ICON]/apple-touch-icon-180x180.png">
<!-- For browsers -->
<link rel="shortcut icon" type="image/x-icon" href="[PATH TO THE ICON]/favicon-32x32.ico">
<link rel="icon" type="image/png" sizes="96x96" href="[PATH TO THE ICON]/favicon-96x96.png">
<!-- For Windows -->
<meta name="msapplication-square310x310logo" content="[PATH TO THE ICON]/mstile-310x310.png">
<meta name="msapplication-TileColor" content="[HEX COLOUR (z.B. #000000)]">
</head>
<body>
<h1>Favicons!</h1>
</body>
</html>Enter these lines in the head area of the root directory. Alternatively, many CMS offer the option of integrating the favicon via the media library in the backend (see below). Our tip: Delete the browser cache after integrating the favicon, since it might not load right away otherwise.
Add new comment