当前位置: 首页 > 设计 > 正文
avatar

现在很多网站都有自己的小图标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

其实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可以淘汰了。

本文固定链接: http://www.weisay.com/blog/design-favicon-ico.html | 威言威语

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

  1. avatar
    29楼
    helsinglee Google Chrome Windows

    确实不错哦 :wink:

    2016-01-08 20:13 [回复]
  2. avatar
    28楼
    Zhang Mozilla Firefox Windows

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

    2014-10-18 15:58 [回复]
  3. avatar
    27楼
    Jwing 搜狗浏览器 Windows

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

    2014-02-25 12:13 [回复]
    • avatar
      Zhang Mozilla Firefox Windows

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

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

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

    2013-11-05 14:46 [回复]
    • avatar
      William Mozilla Firefox Windows

      自己画的,没用什么字体

      2013-11-10 23:37 [回复]
  5. avatar
    25楼
    OOIII 枫树极速浏览器 Windows

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

    2013-09-03 09:11 [回复]
  6. avatar
    24楼
    点点滴滴 Google Chrome Windows

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

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

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

    2013-08-27 21:32 [回复]
  8. avatar
    22楼
    超級efly Safari iPad

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

    2013-07-28 06:32 [回复]
  9. avatar
    21楼
    jqx Mozilla Firefox Windows

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

    2013-05-27 18:25 [回复]
    • avatar
      William Google Chrome Windows

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

      2013-05-28 13:50 [回复]
      • avatar
        jqx Mozilla Firefox Windows

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

        2013-05-28 18:25 [回复]
  10. avatar
    20楼
    Lvtu Google Chrome Windows

    我表示看着像“咸”。。。 :lol: :lol:

    2013-04-26 15:50 [回复]
    • avatar
      William Mozilla Firefox Windows

      :oops: 横竖型的威字也就只能折腾成这样了

      2013-04-26 17:28 [回复]
  11. avatar
    19楼
    沫小熙 Google Chrome Windows

    :cry: 不错!值得学习!

    2013-04-05 19:36 [回复]
  12. avatar
    18楼
    李可 Safari  Android 4.1.9 HTC EVO 4G++ For Sprint Build/HTC EVO 4G++

    你的文章这么火啊

    2013-03-29 09:58 [回复]
  13. avatar
    17楼
    蜡笔小海 Internet Explorer Windows

    主题定义了favicon.ico的路径,把主题里面的图标也替换下 还是没有显示?求解!tks

    2013-03-11 23:54 [回复]
    • avatar
      William Mozilla Firefox Windows

      是缓存,清空下浏览器的缓存就行了

      2013-03-11 23:56 [回复]
      • 图标我是做好了,也传到根目录下了。那个代码的插入还没有搞定呢。威哥 指点下吧 呵呵thanks

        2013-03-30 10:35 [回复]
      • 呵呵 捣鼓好了。thanks

        2013-03-30 18:57 [回复]
  14. avatar
    16楼
    陈有暖 Google Chrome Windows

    制作一个适合自己的图标

    2013-03-01 02:34 [回复]
  15. avatar
    15楼
    lgtiamo Mozilla Firefox Windows

    我用的是您的『Weisay Simple』主题,我看了这篇文章后也修改了一下图标,但是主页显示的还是您主题的图标,但是进入后台显示的是修改的。我应该怎么修改一下?

    2013-02-26 14:52 [回复]
    • avatar
      William Google Chrome Windows

      主题定义了favicon.ico的路径,把主题里面的图标也替换下。

      2013-03-01 10:26 [回复]
  16. avatar
    14楼
    complexray Google Chrome Windows

    能问下这个表情用的是什么插件吗?感觉很有意思。

    2013-02-26 12:54 [回复]
  17. avatar
    13楼
    William WordPress for iOS iPhone & iPad

    呵呵。设计一个简单美观的。

    2013-02-22 16:07 [回复]
  18. avatar
    12楼
    vic Google Chrome Windows

    今天更新了你的主题,很好看,呵呵

    2013-02-22 15:26 [回复]
  19. avatar
    11楼
    建站网 Google Chrome Windows

    favicon.ico图标设计不错

    2013-02-22 10:25 [回复]
  20. avatar
    10楼
    天下第七 Google Chrome Windows

    呵呵,今天刚换了你的主题,还正是原来的ico文件,我去换换个别的试试。

    2013-02-16 22:25 [回复]
  21. avatar
    9楼
    毕扬 Google Chrome Mac OS

    很不错啊

    2013-02-16 10:33 [回复]
  22. avatar
    8楼
    严重浪漫 Google Chrome Windows

    这个是必须的。

    2013-02-14 17:19 [回复]
  23. avatar
    7楼
    WindyLiu Google Chrome Windows

    我的博客的favicon就是自己的logo

    2013-02-13 12:17 [回复]
  24. avatar
    6楼
    sui Google Chrome Windows

    好多用您的主题 都是W 那个 ico 呵呵

    2013-02-12 09:52 [回复]
    • avatar
      William Mozilla Firefox Windows

      嗯,很多人不关注这个的,呵呵

      2013-02-20 11:11 [回复]
  25. avatar
    5楼
    43度 Google Chrome Windows

    怎么不把原来的也发张图片,有个对比。我忘记你原来什么样了,嘿嘿

    2013-02-11 22:49 [回复]
    • avatar
      William Mozilla Firefox Windows

      原来的被我替换了,我去找找 :???:

      2013-02-20 11:11 [回复]
  26. avatar
    4楼
    红色石头 Google Chrome Windows

    我的favicon就在网上随便找了一个,ps不太懂啊~
    对了,博主能不能友链啊,我关注你很久了,你的链接我一直加着的~~~

    2013-02-08 22:27 [回复]
  27. avatar
    地板
    Twolake Google Chrome Windows

    网速不给力,看不到贵站的favicon.ico图标

    2013-02-08 20:59 [回复]
  28. avatar
    板凳
    Google Chrome Windows

    第一次这么近距离接触板凳 :cool:

    2013-02-08 16:18 [回复]
  29. avatar
    沙发
    天一 Google Chrome Windows

    第一次这么近距离接触沙发 :cool:

    2013-02-08 15:53 [回复]

发表评论

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

快捷键:Ctrl+Enter