建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > 交互设计教程 >

如何创建你的favicon?

更新时间:2017-05-09整理编辑:建站学习网阅读:0

最近给博客添加了favicon,也就是浏览器地址栏左边的那个小图标,之前也捣鼓了几次都没有成功,主要原因是图标倒是做好了,16像素乘以16 像素大小,可放到主题文件包中的时候,发现特别模糊,而别人的主题包里的图片都特别清晰,但文件大小却显示是16像素,不明白是什么原因。后来才知道在 windows下查看图片的缩略图的时候,是以48像素大小显示的,难怪16像素的图片要模糊了!而其实这个.ico格式的图片,是可以将不同大小的图片 打包放置于一个.ico图标文件之内的。就好像是一个大袋里里装了同一个样子的不同大小的玩具,在不同的环境下,你会看到不同大小的玩具,但是样子却都是 一样的。是不是还挺有那么点技术含量的?所以为你的博客创建一个favicon是绝对值得一试的。那么如何创建你的favicon呢?

一、下载插件

因为我们要在Photoshop中创建这个图标,所以,首先要下载能将图片保存为.ico格式的Photoshop插件。Photoshop本身是不支持将图片保存为.ico格式的,有了这个插件,你才能轻松的将做好的图片保存为我们所需要的格式。

二、开始设计

我设计的整个过程是一开始先在纸上画出我想要设计的几种样式,之后挑选出自己满意的一个设计方案后,再在Photoshop中开始设计。由于 16×16像素的画布太小,不便于创建图标,所以我们先来创建一个64×64像素的文档,设计完成之后再使用Photoshop中的image(图 像)》image size(图像大小)命令,在弹出的对话框的下拉菜单中选择“Bicubic Sharper“选项,将图片还原为16像素大小。“Bicubic Sharper“这个选项将会确保你的图片依然清晰,不会模糊。这里需要注意的是,也许在64像素大小的画布中你的图像的显示质量看上去不错,但是并不代 表你将图片的大小更改为16像素时,图片的质量依然很好。所以,你要注意观察16像素的图片质量,如果看上去不令你满意,那么你就要考虑更改64像素图片 的样式了。具体的样式由你自己设计,根据自己的喜好来,我这里就不多说了,我的设计效果最终如下图:

设计好之后,将64像素大小的图片保存为.ico格式,如下图:

三、将不同大小的图片打包

正如我在上面所提到的,如果你设计的是16像素大小的.ico文件,那么你在windows下查看它的时候会发现它是模糊的,为了避免这个问题,我 们需要将设计好的64像素大小的图片再保存为不同的几种格式。起码要有一个48像素大小的.ico格式,这样放入主题文件包中的时候看上去才足够美观。当 然,你只需要在Photoshop中创建一个64像素大小的图标,之后使用Sib Icon Studio软 件完成打包的工作。首先在Sib Icon Studio软件中打开已经做好64像素大小的文件,然后点击New Image Farmat(新图片格式)图标,在弹出的对话框中分别选择48像素和16像素大小,添加到软件界面右侧的侧边栏中,保存文件即可,这样我们就已经将三种 不同大小的图标文件放入了一个.ico格式的文件中,打包完成。如下图:

四、将图片放入主题包的根目录中

接下来你需要做的就是直接将做好的图标放入到你的wordpress主题的根目录中,或者直接上传到服务器。这里所说的根目录的意思就是要和index.php文件在同一目录。你会在header.php文件中发现这一句代码:

<link rel=“shortcut icon“ href=“/favicon.ico“ type=“image/x-icon“ />

也就是引用favicon.ico的代码,如果你还没有这一句代码,赶紧添加到代码的<head></head>标签之间,否则图片是不会显示出来的。

五、测试

上传图片完成后在浏览器中重新刷新页面,或者清除浏览器缓存,或者在浏览器地址栏URL的末尾添加一个英文的问号“?“再刷页面,这样会让浏览器误认为页面是一个新页面。

六、各种不同样式的漂亮的favicon

本文网址:https://www.dedexuexi.com/wysj/jhsj/3171.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
连续性的设计 改善产品的体验
« 上一篇2017年05月09日
如何做好用户引导?这儿有4个实战方法!
2017年05月09日下一篇 »
  • 网易云音乐WP1.0设计项目实战
    0阅读
    WP 平台是很多设计师很少涉足的地方,优设之前发过一篇WP设计规范指南,今天网易的同学继续上干货,来一篇WP的设计项目实战!作为一款有诚意的音乐APP,这次设计过程相当用心,值得学习的地方也很多,学习来。项目背景Windows Phone一直是各家公司缺少投入的平台,WP用户不得不经常面对一个成...
  • 马伯庸教你如何做一个万年好甲方
    0阅读
    编者按:原以为亲王精通历史,会写小说,现在才知道他也很懂作为甲方的门道啊。今天分享@马伯庸 同学的一篇好文,前有笑点,后有干货,有趣得紧。作为设计师,能遇到这样的甲方就嫁了吧。@马伯庸 :对我们甲方来说,艺术性是第三才需要考虑的因素。我们第二考虑的是如何有效率地把核心信息传达到客户那儿去。无论多么...
  • 网站设计主题和风格是重点
    0阅读
    企业为了在互联网上争夺一席之地,纷纷建起了网站。企业的网站就像企业的网络门户,既然是门面那么就要将网站建设好,充分展现企业的良好形象。貌似许多企业建网站是为了赶时髦,因为他们的企业网站设计的实在是不堪入目,这样不仅不会为企业带来什么利益,相反还会毁了企业的形象。那么企业要建好这样的门面应该如何入手呢...
  • 如何给网站布置干净的“关于我们”页面
    0阅读
    所有网站,无论是官方、电子商务、社会化网络还是个人站点,都应该设计一个恰到好处的关于页面,直截了当地告诉到访者,为什么要浪费他们宝贵的时间浏览你的网站。 一、为什么要有关于页面 不要让用户思考! 1、向浏览者传达本站的价值,留住用户 2、始终提醒自己站点的主旨,不要跑题 二、起什么名 关于页面存在的...
  • 如何建立一个成功的移动应用
    0阅读
    一个消费者应用程序是否成功,只通过相加其组成部分的总和来计算。简单的查看用户手机应用的下载历史,用户设备残留的移动应用数量,和那些真的被坚持使用的移动应用情况,就能知道这句话的真实含义。然而,如果你想知道为什么有些用户不再使用某些手机应用,那这篇文章可能会给你一些启示。 像一台机器一样,移动应用通过...
 
QQ在线咨询
×
欢迎您登陆建站学习网
QQ一键登陆 建站学习网账号登录