greatghoul
Ask and Learn

Ask and Learn

Rails 项目的网站图标多平台适配

Rails 项目的网站图标多平台适配

greatghoul's photo
greatghoul
·Jun 10, 2018·

1 min read

平时很少看日志,最近给网站上了 Sentry 服务用于异常监测,结果发现一个频率很高的异常。

image

原来是网站图标没有做多平台的适配,那么都需要适配哪些平台呢?各个平台的标准又是什么样的?作为一个懒人,当然是去找现成的工具了。

隆重介绍 Real Favicon Generator

image

使用这个在线服务上传网站的高清图标(推荐大于 260x260),然后它会让你调整你的图标在不同的平台上的样式,比如替换背景颜色,添加阴影,图标缩放方式之类的。这些调整都有预览,非常方便。

image

我们是 Rails 项目,推荐直接使用 Favicon Generator for Ruby on Rails

如果你使用的普通静态 HTML 的生成器,完成调整配置后,它会给你一个压缩包,里面包含所需的所有文件,但 ROR 的生成器稍有不同,它会给你一个配置文件,然后配合它的 gem 包,直接在本地生成所需要的文件。

# Gemfile
group :development do
  gem 'rails_real_favicon'
end

不要忘记 bundle install,然后准备好配置文件。

# config/favicon.json
{
    "master_picture": "app/assets/images/master_icon.png",
    "favicon_design": {
        "ios": {
            "picture_aspect": "background_and_margin",
            "background_color": "#ffffff",
            "margin": "14%",
            "assets": {
                "ios6_and_prior_icons": false,
                "ios7_and_later_icons": false,
                "precomposed_icons": false,
                "declare_only_default_icon": true
            },
            "app_name": "\u4e00\u65e9\u4e00\u665a"
        },
       ......
}

其中 app/assets/images/master_icon.png 为高清图标所在的路径,准备好一切后,执行下面的命令生成图标适配所需要的文件。

rails generate favicon

它根据你的配置,帮你生成下面的一堆文件,有缩放的图标、各平台的应用描述文件以及所需的 partial 文件等。

app/assets/images/favicon/favicon-16x16.png
app/assets/images/favicon/browserconfig.xml.erb
app/assets/images/favicon/html_code.html
app/assets/images/favicon/android-chrome-256x256.png
app/assets/images/favicon/README.md
app/assets/images/favicon/android-chrome-192x192.png
app/assets/images/favicon/mstile-150x150.png
app/assets/images/favicon/favicon-32x32.png
app/assets/images/favicon/site.webmanifest.erb
app/assets/images/favicon/safari-pinned-tab.svg
app/assets/images/favicon/apple-touch-icon.png
app/assets/images/favicon/favicon.ico
app/views/application/_favicon.html.erb
config/initializers/web_app_manifest.rb

到这里,我们只需要将 app/views/application/_favicon.html.erb 引入我们的 layout 模板中就可以了。

<head>
  ...
  <%= render 'application/favicon' %>
  ...
</head>

日后如果想更换图标,只需要更新高清图标 app/assets/images/master_icon.png 然后重新执行一次命令就好了。

 
Share this