如何创建你的favicon?

最近给博客添加了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

时间: 2024-11-18 11:43:54

如何创建你的favicon?的相关文章

网站美化:给你的网站添加一个好看的Favicon

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 "什么是 Favicon?" 我们几乎每天都会看到,但是没有多少人会注意到他们.但以我的经验,可以和你们讲,当你为了用户建立网站的时候,加上你的 Favicon 将是这个工程的最后一步,而且用户也会容易发现这一改变. 大概两年前,我给一个朋友建一个网站.当我把网站第一次展示给她看的时候,她印象最深的却是:"你居然

yahoo网站性能优化的建议:Yahoo军规再度挖掘

文章描述:本来这是个老生常谈的问题,上周自成又分享了一些性能优化的建议,我这里再做一个全面的Tips整理,谨作为查阅型的文档,不妥之处,还请指正. 本来这是个老生常谈的问题,上周自成又分享了一些性能优化的建议,我这里再做一个全面的Tips整理,谨作为查阅型的文档,不妥之处,还请指正:如果你已经对yahoo这些优化建议烂熟于心,果断点这里 一. Yahoo的军规条例: 谨记:80%-90%的终端响应时间是花费在下载页面中的图片,样式表,脚本,flash等:详细的解释来这里查:http://deve

网站性能:图片和Coockie以及移动应用的优化

     我们在前面的几节中分别讲了提高网站性能中内容.服务器.JavaScript和CSS等方面的内容.除此之外,图片和Coockie也是我们网站中几乎不可缺少组成部分,此外随着移动设备的流行,对于移动应用的优化也十分重要.这主要包括:Coockie: 减小Cookie体积 对于页面内容使用无coockie域名 图片: 优化图像 优化CSS Spirite 不要在HTML中缩放图像 favicon.ico要小而且可缓存 移动应用: 保持单个内容小于25K 打包组件成复合文本 27.减小Cook

【转】优化Web程序的最佳实践

自动排版有点乱,看着蛋疼,建议下载中文PDF版阅读或阅读英文原文.     Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了 一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最 佳实践的核心就是旨在提高网站性能. Excetional Performance 团队总结出了一系列可以提高网站速度的方法.可以分为 7 大类 34 条.包括内容.服务器.cookie.CSS.JavaScript.图片.移动应用等七部

PHP中未读计数的favicon动态

 在Gmail 刚刚推出的小,但真正有用的功能在Gmail实验室.直接在您的浏览器选项卡图标动态的favicon显示未读电子邮件数.如果您的浏览器窗口地段和地段随时开放的标签,这可能真是一个奇妙的功能,让用户知道任何未读项目. 这里是PHP的一个小而强大的脚本,可以让你创建自己的动态的favicon.我们将使用PHP的GD库操纵的favicon图像,并添加到它的文本. 下面是一个简单的脚本读取一个图标图像添加一些文本字符. 文件:favicon.php <?php //读的favicon fav

PHP创建桌面快捷方式的实例代码

 本篇文章主要是对PHP创建桌面快捷方式的实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助    代码如下: $shortCut = "[InternetShortcut] URL=http://www.jb51.net IDList= [{000214A0-0000-0000-C000-000000000046}] Prop3=19,2 "; Header("Content-type: application/octet-stream"); hea

如何设计FAVICON站点图标

  现代网页设计中最令人沮丧和感到混乱的莫过于网站图标了(favicon),是"favorite icon"的简称.这枚小小的图标一般出现在浏览器的选项卡里.地址栏处,根据我们操作系统和浏览器的不同,还有可能出现在其他地方. 我先给大家科普下:favicon,即Favorites Icon的缩写.favicon 就是出现在浏览器地址栏左侧的那个小图标.favicon,中文名称是网站头像.当然,这不仅仅是Favicon的全部,根据浏览器的不同,Favicon显示也有所区别:在大多数主流浏

什么是favicon.ico?favicon图标制作和制作技巧

方正视觉经常会碰到客户要求在网页标签栏处加一个小图片,看起来酷酷的,这个的制作其实非常简单,它叫做favicon. favicon.ico.favicon图标.favicon.ico会显示在浏览器的地址栏,浏览器的标签页上和你的收藏夹中,建立自己的网上品牌这样的细节工作不可少. 这样大家清楚了什么是favicon.ico?下面方正视觉说一下favicon制作技巧,就是favicon图标的制作. 制作favicon图标只需要两步: 一.做一个16*16像素的favicon.ico图片,上传到网站根

创建特色网站ICO图标和硬盘盘符图标

在我们的网站建设中,为网站打造一个契合网站主题的个性化标志则是必需的,这直接关系到能否成功地塑造网站的品牌.这从某些角度看仍在网站推广的范畴之内,而欲取得成功,不仅包括良好的页面设计.令人印象深刻的网站Logo,也包括favicon. 所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.当然,这不仅仅是Favicon的全部,根据浏览器的不同,Favicon显示也有所区别:在大多数主流浏览器如FireFo