返回
Featured image of post 博客 LOGO 的设计与适配

博客 LOGO 的设计与适配

第一句话,我献给苹果公司。

就你苹果的事多

当然这是调侃的说法,规范的设置本没有什么错。

我并不是什么专业的设计师,所以我的博客的 LOGO 并不是什么精品,说到设计的问题,我只能说「无可奉告」,至于会出现什么偏差,嗯,这个话题相当严肃,接下来我会好好说下。

设计的过程

设计其实是一件相当难的东西,网页上的图基本都是位图,这也意味着,分辨率之类的并不十分太重要,只要能骗过人眼,看上去并不模糊就可以了。

我的博客的logo,算是抄袭和仿冒的结果吧(我还是相当实诚的)。通过收集 阿里巴巴矢量图标库 中和自己博客主题相关的 icons,然后再使用 Adobe Photoshop 等工具进行组合。其实也是很简单的活儿。

好吧,我也知道看上去相当蠢,本质上就是一个 “蜂蜜罐子+一颗草莓+一个番茄”,算是假装自己点题了吧。

LOGO适配

适配的缘由

再一次点题。

就你苹果的事多首先,我们平常使用的浏览器,一般情况下是不需要考虑 LOGO 显示的问题,就算需要显示,也是普通的一个 favicon.ico 图片就可以完美解决了。

然而,与我们平时习惯相反的是。伟大的苹果公司,总是订立自己的自成一派的规范,虽然看上去是很有逼格的存在,但如果是适配的话,会让前端者多做了很多麻烦的事。因为我的技术水平真心不怎么样,所以适配还是弄了有一段时间。当然其中有些无奈的原因,因为CDN缓存的原因,其实我早应该弄好了的,但是我以为自己操作失误了,又重新弄了一次(技术渣就只能用生命来耗)。

现在就来具体说下适配的过程。

适配的过程

  1. 首先准备一个分辨率至少为 260×260 的图标,格式尽可能使用 .PNG 比较合适。

  2. 然后打开这个网页图标制作网站,点击这里

  3. 打开之后,点击 Select your favicon picture ,找到你事先准备的图标。

  4. 接着进入调试的环节,可以看到,此网站针对 iOS 的 Safari、Android 的 Chrome、macOS 的 Safari、Windows Metro 都有相关的适配。一般情况下,可以直接拉到最底下,点击 Generate your Favicons and HTML code 直接生成具体的图标和代码即可

  5. 如图,

    点击 Favicon package 可下载生成的图标。解压出来的图标文件,具体可放在网站的根目录。

  6. 另外,如图所示,具体实现的代码,复制全部内容。以 WordPress 为例,进入 Theme 文件夹中的 header.php,把代码粘贴到和之间,保存即可

  7. All Done!

后话

如无意外,上述的操作完成之后,手机端的浏览器就可以显示具体的网站 LOGO 了。

另外因为当中还包含了 favicon.ico 的图标和代码,因此电脑端的图标显示也是没问题。

希望这个教程会对和我一样的技术渣有用处。