How to add favicon to website?

Guide to install favicon to website, step by step.

wave

Before we begin

Technical Requirements: In this guide you will be editing the HTML code of a website! You will need to have some knowledge of HTML to do it.

Optional Requirements: If you want to edit your icon color or style, you will need to have some working knowledge of Graphic Editing - this isn’t required if you are happy with your icon style and color.


Introduction

In this guide, we will use our website Favicon Converter tool to guide you how to implement favicons to your website. It may be differ with other tools.


Step 1: Prepare your icon

You must have your icon image (be sure the size is at least 60x60) and go to our tool at Favicon Converter


Step 2: Upload and choose your convert option

At the converter tool, click on upload button and select your icon image. After that, select convert option to fit your needed. Then click Convert


Step 3: Download and upload the favicons

The tool will generate a package (.zip) favicon, you need to download it and unzip all of content to your root folder of your website.


Step 4: Insert html code to your website

At the below of download button, there is a html code needed to be inserted to html. Be sure insert it to your <head></head> html.

<meta name="msapplication-TileColor" content="#FFF" />
<meta name="theme-color" content="#FFF" />
<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="114x114" href="/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.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" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/android-icon-36x36.png" sizes="36x36" />
<link rel="icon" type="image/png" href="/android-icon-48x48.png" sizes="48x48" />
<link rel="icon" type="image/png" href="/android-icon-72x72.png" sizes="72x72" />
<link rel="icon" type="image/png" href="/android-icon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/android-icon-144x144.png" sizes="144x144" />
<link rel="icon" type="image/png" href="/android-icon-192x192.png" sizes="192x192" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="msapplication-square70x70logo" content="/ms-icon-70x70.png" />
<meta name="msapplication-square150x150logo" content="/ms-icon-150x150.png" />
<meta name="msapplication-wide310x150logo" content="/ms-icon-310x150.png" />
<meta name="msapplication-square310x310logo" content="/ms-icon-310x310.png" />
<link href="/apple-startup-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image" />
<link href="/apple-startup-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/apple-startup-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/apple-startup-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) and (orientation: landscape)" rel="apple-touch-startup-image" />
<link href="/apple-startup-750x1024.png" media="" rel="apple-touch-startup-image" />
<link href="/apple-startup-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/apple-startup-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="/apple-startup-1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
<link href="/apple-startup-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="/apple-startup-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
<link href="/apple-startup-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link rel="manifest" href="/manifest.json" />