Use mobile-friendly favicon

https://realfavicongenerator.net/
Undo e3b6dc8404
This commit is contained in:
curben 2018-09-20 13:41:03 +09:30
parent 5d013e97b3
commit 0da3a00471
18 changed files with 62 additions and 12 deletions

View File

@ -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/

View File

@ -25,9 +25,19 @@
<% 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') %>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 975 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 493 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 700 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -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"
}