Use mobile-friendly favicon

https://realfavicongenerator.net/
Undo e3b6dc8404

README.md

@@ -1,28 +1,39 @@
 curben.gitlab.io
-=====================
+================
 
 ![Build Status](https://gitlab.com/curben/curben.gitlab.io/badges/master/pipeline.svg)
----
 
 Forked from GitLab's [example](https://gitlab.com/pages/hexo) with [Typing](https://github.com/geekplux/hexo-theme-typing) theme.
 
-<br>
+## Installation
+to-do
+
+## Changes
+
+### Hexo
 
-Following changes have been made on Hexo:
 - Update `.gitlab-ci.yml` to use the latest version of [Node.js](https://hub.docker.com/_/node/) in the Docker image.
 - Update `package.json` to use latest version of [hexo](https://www.npmjs.com/package/hexo) and its related packages.
 - Replace the bundled Landscape theme with Typing theme.
 
-<br>
+### Typing theme
 
-Following changes have been made on Typing theme:
 - Homepage shows index of posts.
 - Remove header and footer display (except for `/about` page).
 - Use the latest version of [jQuery](https://jquery.com/download/), [fancyBox](https://github.com/fancyapps/fancyBox/releases) and [Font Awesome](https://github.com/FortAwesome/Font-Awesome/releases)
 - All js and css files are self-hosted.
 - Remove analytic, comment system and donation links.
 
----
+## Favicon
+
+[RealFaviconGenerator](https://realfavicongenerator.net/) provides a web-based tool to generate favicons with wide compatibility.
+1. Upload your favicon (at least 260x260) and configure however you want.
+2. Install the generated package to [favicons](themes/typing/source/favicons/) folder.
+3. Edit [header.ejs](themes/typing/layout/_partial/head.ejs). Change the `color` values of `mask-icon` and `msapplication-TileColor` to the values you configured on the generator.
+4. Check for any error using `hexo generate --force` (you should do this before you push any commit anyway).
+5. `git commit` `push`.
+5. Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker).
+
 
 [ci]: https://about.gitlab.com/features/gitlab-ci-cd/
 [hexo]: https://hexo.io/

themes/typing/layout/_partial/head.ejs

@@ -25,12 +25,22 @@
   <% if (theme.rss){ %>
     <link rel="alternate" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml">
   <% } %>
-  <% if (theme.favicon){ %>
+
-    <link rel="icon" href="<%- theme.favicon %>">
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
-  <% } %>
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
+    <link rel="manifest" href="/favicons/site.webmanifest">
+    <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#132873">
+    <link rel="shortcut icon" href="/favicons/favicon.ico">
+    <meta name="apple-mobile-web-app-title" content="<%- theme.nickname %>">
+    <meta name="application-name" content="<%- theme.nickname %>">
+    <meta name="msapplication-TileColor" content="#603cba">
+    <meta name="msapplication-config" content="/favicons/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
+
   <%- css('css/typing') %>
   <% if (theme.icons){ %>
-  <%- css('css/fontawesome.min.css') %>
+    <%- css('css/fontawesome.min.css') %>
-  <%- css('css/brands.min.css') %>
+    <%- css('css/brands.min.css') %>
   <% } %>
 </head>

themes/typing/source/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/favicons/mstile-150x150.png"/>
+            <TileColor>#603cba</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

themes/typing/source/favicons/safari-pinned-tab.svg

@@ -0,0 +1 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" width="426.667" height="426.667" viewBox="0 0 320.000000 320.000000"><path d="M20.5 20l20 20 10-10 10-10 9.8 9.7 9.7 9.8V0H.5l20 20zM100.3 19.8C111.1 30.6 120 39.9 120 40.3c0 .4-8.5 9.3-19 19.7-10.4 10.4-19 19.2-19 19.5 0 .3 35.7.5 79.3.5h79.2l19.8-19.8L280 40.5l-10-10-10-10 10.2-10.2L280.5 0H241l-20 20c-11 11-20.3 20-20.7 20-.5 0-9.8-9-20.8-20l-20-20h-79l19.8 19.8zM299.6 21.2l-18.8 19.1 9.6 9.6c5.3 5.3 9.6 10 9.6 10.4 0 .4-4 4.8-9 9.7-4.9 4.9-9 9.2-9 9.5 0 .3 8.6.5 19 .5h19V41c0-21.5-.3-39-.7-38.9-.5 0-9.3 8.6-19.7 19.1zM0 60v19.5l20 20c11 11 20 20.3 20 20.8 0 .4-9 9.7-20 20.7L0 161v159.5l20-20 20-20-10-10-10-10 10.2-10.3L40.5 240H.5l20-20 20-20 19.7 19.7L80 239.5v-159L60.1 60.6 40.3 40.8l-9.7 9.6c-5.2 5.3-9.9 9.6-10.3 9.6-.4 0-5.2-4.4-10.5-9.7L0 40.5V60zM240 160.3V240H81l-20.1 20.1-20.1 20.2 9.6 9.6c5.3 5.3 9.6 10 9.6 10.4 0 .4-4 4.8-9 9.7-4.9 4.9-9 9.2-9 9.5 0 .3 8.7.5 19.3.5h19.2l20-20 20-20 20 20 20 20h79l-19.8-19.8-19.7-19.7 20.3-20.3 20.2-20.2 20 20 20 20 10-10 10-10 9.8 9.7 9.7 9.8v-39l-20-20-20-20 20-20 20-20v-39.3c0-21.5-.2-39.2-.5-39.2s-9.1 8.5-19.5 19c-10.4 10.4-19.3 19-19.7 19-.4 0-9.7-8.9-20.5-19.7L240 80.5v79.8zM100 120.5V141l20.3-.2 20.2-.3.3-20.3.2-20.2h-41v20.5z"/><path d="M180 120.5V141l20.3-.2 20.2-.3.3-20.3.2-20.2h-41v20.5zM100 200.5V221l20.3-.2 20.2-.3.3-20.3.2-20.2h-41v20.5zM180 200.5V221l20.3-.2 20.2-.3.3-20.3.2-20.2h-41v20.5zM240 300.3V320h79.5L300 300.5c-10.7-10.7-19.6-19.5-19.7-19.5-.2 0-4.5 4.3-9.8 9.5-5.2 5.2-9.8 9.5-10.2 9.5-.4 0-5.2-4.4-10.5-9.7l-9.8-9.8v19.8z"/></svg>

themes/typing/source/favicons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "curben's blog",
+    "short_name": "curben's blog",
+    "icons": [
+        {
+            "src": "/favicons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicons/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}