让你的网站在所有平台上都有美观的图标

使用移动版Chrome或者Safari浏览器的用户可能都注意到,在新标签页上有的网站能够显示出网站图标,而有的网站只显示一个带背景的字母,就像下图这样,这显然看上去不够美观。其实,我们可以通过下面的方法让你的网站在几乎所有能够展示个性图标的浏览器或者平台中呈现自定义的图标。

让你的网站在所有平台上都有美观的图标

前提条件

1、该方法适用于网站拥有者,所以请确保你有一个自己的网站并具有其管理权限;

2、了解基本的Html知识;

3、生成工具:图标生成器

操作步骤

1、首先,我们打开上面所提供的图标生成器网站,该网站会为你匹配iOS,Android,PC / Mac 上的图标样式,并生成相关文件和代码。你可以先通过检查工具,来检测你网站当前的图标状况。只需要在输入框键入你的网址,并点击“Check Favicon”即可。

让你的网站在所有平台上都有美观的图标

2、想要声称图标,我们可以点击“Select your Favicon picture”,然后上传你本地的网站图标,提交的图片格式支持 png, jpg, svg..., 像素至少为70x70,建议最好为260x260 或更高以获得最佳效果。

让你的网站在所有平台上都有美观的图标

3、待上传完成后,就会弹出下面的画面,你可以针对每个平台进行更加精确的设置,比如图标样式,背景颜色,你还可以针对Windows 磁贴的样式进行自定义,选项太多,这里就不一一介绍了。你可以借助Google翻译来理解这些英文的意思。

让你的网站在所有平台上都有美观的图标

4、待全部调整完毕后,你还可以对路径进行设置,更可以对文件加上时间戳以快速刷新那些已经访问过你网站用户的浏览器缓存。还可以对图标进行压缩,同时还能自定义Webapp的名称,同样,在设置完毕后点击“Generate your Favicons and HTML code”获得图标文件和代码;

让你的网站在所有平台上都有美观的图标

5、将获得zip压缩包的文件上传到网站根目录(在没有自定义路径的情况下)。把代码添加到你网站的头部,然后使用手机访问一下看看是不是已经生效了呢?

让你的网站在所有平台上都有美观的图标

特别说明

<meta name="theme-color" content="#ffffff"> 可以改变访问网站时手机状态栏的颜色,默认是白色,你可以修改这个颜色让状态栏变色,如下图:

让你的网站在所有平台上都有美观的图标

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:6   其中:访客  6   站长  0

    • Paul 0

      这个WP的Favicon,在手机版UC浏览器等,在快速收藏界面还是不显示,但是Discuz的,就显示。不知现在行不行了

        • Win7en乐园 5

          @Paul 不妨试试看哈

        • 米粒在线 0

          先评论下,再仔细看看。

          • HO141 0

            这个网站不错,精简了代码,我记得之前有一个网站也可以做,但是代码足足有十几行,感觉不是特别的好,还影响速度,这个就很棒,个人感觉。对于有博客的朋友很有帮助,感觉你的分享

              • Win7en乐园 5

                @HO141 嗯,不客气

              • 呆毛电脑配置网 1

                懒得折腾了。 :lol: