How to Add favicon.ico to Your Website

Keren Xu

2020/05/02

To add a interesting icon to the link of your website like below. We need to change two documents in your blogdown source files.

1️⃣ We need to put an object called favicon.io in the folder static/img Here is a favicon.io generator link.

2️⃣ Then we should make some changes to the document head_custom.html which lives in the folder layouts/partials/head_custom.html

<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<link rel="manifest" href="/img/site.webmanifest">