标签页小图标（favicon）显示异常的问题

发表于 更新于 分类于 Waline： 阅读次数：

我在搭建静态网页时，发现favicon不能正常加载的问题，我去看了作者的源码，发现配置文件中没有favicon的接口，但是其教程里却有：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Avatar image
avatar: /images/avatar.jpg

# Favicon
favicon: /images/favicon.png

# Home page background image
background:
    - /images/background.jpg

# Loading image
loading: /images/loading.gif

# Optional colors for category and tag
colors:
    - "#ffa2c4"
    - "#00bcd4"
    - "#03a9f4"
    - "#00a596"
    - "#ff7d73"

我以为不能正常加载是由于作者漏写了这个接口，我在加上后仍不能正常加载favicon，我研究了好久，发现作者其实是把favicon和avatar共用了一个图标，但这并不能解决我的问题，最后想到可能是由于<head></head>标签内内容过多，然后我将layout.ejs中的<link rel="icon" href="<%- url_for(theme.avatar) %>" />移到了<head></head>最前面，为了先渲染标签页图标，最后，我解决了问题。如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
</head>
    <link rel="icon" href="<%- url_for(theme.avatar) %>" />

    <script src="/js/<file>"></script>
    <link rel="stylesheet" href="/css/<file>" />
    <canvas id="fireworks" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 32767"></canvas>
    <script src="https://cdn.staticfile.org/animejs/3.2.1/anime.min.js"></script>
    <script src="/js/fireworks.min.js"></script>
    <canvas id="background" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1"></canvas>
    <script src="/js/background.min.js"></script>
    <div id="cursor"></div>
    <link rel="stylesheet" href="/css/cursor.min.css">
    <script src="/js/cursor.min.js"></script>
    <meta charset="utf-8" />
    <title><%= title %></title>
    <meta name="author" content="<%- config.author %>" />
    <meta name="description" content="<%- config.description %>" />
    <meta name="keywords" content="<%- config.keywords %>" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    
    <%- partial("import", { type }) %>
</head>