威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

给网站设计个favicon.ico图标

现在很多网站都有自己的小图标Favicon.ico,在浏览器的地址栏显示一个很漂亮的小图标,既个性又美观。网站favicon.ico图标对于多数建站者来说是一个非常简单的问题,但对于网站建设的初学者来说,网站favicon.ico图标却经常被忽视,企业网站也经常忽视这个问题。favicon.ico图标既是对网站的宣传,也会使网站显得更加专业。
给网站设计个favicon.ico图标

现在很多网站都有自己的小图标Favicon.ico,在浏览器的地址栏显示一个很漂亮的小图标,既个性又美观。网站favicon.ico图标对于多数建站者来说是一个非常简单的问题,但对于网站建设的初学者来说,网站favicon.ico图标却经常被忽视,企业网站也经常忽视这个问题。favicon.ico图标既是对网站的宣传,也会使网站显得更加专业。

有时候看一些使用我主题的人,看见他们还是使用我主题默认的favicon.ico,希望看到这篇文章的时候也自己试着去做一个属于自己的favicon.ico。

最近看之前的ico,这个ico用了很久很久了,最近真心觉得不好看,新年要新气象,于是想换个ico,对于设计其实我还是很初级的,所以很多时候设计出来的主题就比较简洁,但内在肯定是不简单的。

我这个对于古文化还是比较有兴趣的,比较喜欢古色古香的东西,印章是我非常喜欢的,小时候学篆刻刻坏了很多的橡皮。比如我的Gravatar头像就是一个印章。

这次设计的这个ico通过传统的线条体现一个字的文化感,更显中国风。

虽然只是一个16*16的图标,我大概画了2个小时,不停的调整,期望达到最佳的显示效果。

当然也画了好几个版本,大的、细版、粗版,当然最好选择的就是这个粗版了。

ico

gif

其实ico的颜色本来我定的是茶色(#8f4b2e)的,不过后来还是换成了深红色(800000),这是为什么呢?

为了保证ico的最快加载效率,当然ico的大小越小越好,按照16色保存的话大小是318字节,按照256色保存的话就是1.37K,肯定有人会说才1.37K,也是很小的,那么也就无所谓了,我是个挑剔的人,当然希望最优最优最优。

网上很多很多的在线制作ico的网站,对于那些不懂的或者新手来说还是帮助很大的。如果你不是新手,同时又希望能整一个非常棒的ico,那么肯定要用IconWorkshop这个软件了,效果么谁用谁知道。

使用也不复杂,PhotoShop设计完16*16的图片,保存jpg或者png格式,然后用IconWorkshop打开,转成ico格式就行了,当然导出的时候要选择你保存的色值,对图片显示质量要求越高图片保存下来肯定就越大了,我就用16色保存的,貌似一些大网站也都是16色的,比如网易。

好了,大家也可以尝试尝试,做一个属于自己ico,我的w型的ico可以淘汰了。

您可能还会对这些文章感兴趣!

给网站设计个favicon.ico图标:目前有 46 条评论

  1. helsinglee
    29楼
    helsinglee:Google Chrome 47.0.2526.106 Windows 10

    确实不错哦 :wink:

    2016-01-08 20:13 回复
  2. Zhang
    28楼
    Zhang:Firefox 33.0 Windows 7

    正准备制作favicon.ico,看看有什么软件,果然在这里找到了 :smile:

    2014-10-18 15:58 回复
  3. Jwing
    27楼
    Jwing:搜狗高速浏览器 Windows XP

    为什么更改后,有的浏览器显示新的图标,如:chrome;而有的还是显示w那,如搜狗浏览器。

    2014-02-25 12:13 回复
    • Zhang
      Zhang:Firefox 33.0 Windows 7

      @Jwing浏览器缓存的原因,删除缓存应该就可以了

      2014-10-18 17:21 回复
  4. 灰狼
    26楼
    灰狼:枫树极速浏览器 2.0.9.20 Windows XP

    看不出你这个所用的字体,好像不是一种字体?

    2013-11-05 14:46 回复
  5. OOIII
    25楼
    OOIII:枫树极速浏览器 2.0.9.20 Windows XP

    我仿照你的站标也做了个,哈哈,求指点

    2013-09-03 09:11 回复
  6. 点点滴滴
    24楼
    点点滴滴:Google Chrome 21.0.1180.89 Windows 7

    威哥可以帮忙设计个么,就一个字:点

    2013-08-30 04:31 回复
  7. Ycvv
    23楼
    Ycvv:Google Chrome 29.0.1547.57 Windows 7

    说到这个,我就不明白了,我用的你的主题 为啥我改了images文件夹里面的图标文件上传了,但是 很久了 还是显示以前的favicon
    不知道为什么

    2013-08-27 21:32 回复
    • 爱偷笑
      爱偷笑:猎豹浏览器 Windows 8.1

      @Ycvv你清空浏览器数据试试

      2014-04-20 15:41 回复
  8. 超級efly
    22楼
    超級efly:Safari 6.0 iPad iOS 6.1.3

    我的就一個「暢」字,32×32 :cool:
    PS:不過好像Google和很多的都是用32×32而不是16×16 :?:

    2013-07-28 06:32 回复
  9. jqx
    21楼
    jqx:Firefox 18.0 Windows 7

    你的favicon背景是用透明吗?我背景一旦设成透明实际在浏览器中的效果就会有很明显的锯齿啊

    2013-05-27 18:25 回复
    • William
      WilliamGoogle Chrome 27.0.1453.94 Windows 7

      @jqx因为我的icon只有横竖,透明的话不同担心锯齿问题。

      2013-05-28 13:50 回复
      • jqx
        jqx:Firefox 18.0 Windows 7

        @William嗯 我从png转换成ico后效果好多了

        2013-05-28 18:25 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry