这篇文章将描述如何通过google chrome浏览器来生成Web应用程序以及自定义程序图标,解决图标模糊的问题. 平台是Ubuntu 14.04 x64.

以微信为例,在浏览器地址栏里输入wx.qq.com然后回车打开,如下所示:


然后会弹出如下提示框:


请注意要勾选Open as window,这样的话才可以让Web程序以单独的窗口打开,给人以单个应用程序的体验. 然后你就会在桌面上看到一个微信图标,此时在chrome://apps/地址处也可以看到新添加的微信图标:


双击桌面上的微信图标,就会打开一个类似于Windows下客户端的微信客户端,给人感觉非常好.如下图:


但是有一个很不好的地方,上面两图中红色线框所标记的地方,图标非常模糊.现在我们来解决这个图标模糊问题. 命令行中转到桌面,查看该app的id,如下:
root@shell:~# cd Desktop/
root@shell:Desktop# ls
~  chrome-nhfpmejnhjogpdnlhmmpmgcfkaaedphf-Default.desktop
因此该app的名称或者说id就是nhfpmejnhjogpdnlhmmpmgcfkaaedphf,现在转到目录~/.config/google-chrome/Default/Extensions/下, 并进入文件夹:nhfpmejnhjogpdnlhmmpmgcfkaaedphf,该目录文件夹结构如下: 
root@shell:nhfpmejnhjogpdnlhmmpmgcfkaaedphf# tree
.
└── 2016.5.24.30780_0
    ├── icons
    │   ├── 128.png
    │   ├── 16.png
    │   ├── 256.png
    │   ├── 32.png
    │   ├── 48.png
    │   ├── 64.png
    │   └── 96.png
    └── manifest.json
我们所要做的就是替换icons里面的图标,可以到这里:http://www.easyicon.net/language.en/1127960-Wechat_icon.html,选择对应尺寸的图标进行替换. 替换完成后,再次回到chrome://apps处就可以发现微信图标已经很清晰了,但是桌面图标仍然是模糊的.不要紧,直接将桌面图标删除即可. 然后到chrome://apps处按下图所示添加桌面图标:


做完这些工作后就可以发现图标已经不模糊了,你可以将图标放到图标目录/usr/share/applications下,然后通过dash搜索名称将其打开并固定到任务栏,方便启动. 可能看到这里,你可能会有疑问,我是如何知道图标存放的目录呢?其实很简单,在chrome的地址栏输入命令:chrome:///version,然后就可以在Profile Path中查看路径了. 如下图所:


另外我已经一些图标打包了(包括新浪微博,微信以及Gmail),可以到我的百度云盘下载:http://pan.baidu.com/s/1bpr2YWB.