设计一个icon

  • 什么是icon
  • 常见icon像素
  • 制作一个icon
  • 操作

什么是icon

Favicon是“收藏夹图标”的缩写(“美国人的收藏夹图标”;)。该名称源自Microsoft Internet Explorer的书签列表,称为“收藏夹/收藏夹”列表。将站点添加到“收藏夹/收藏夹”列表时,Internet Explorer(版本5及更高版本)会询问服务器是否有名为的文件favicon.ico。如果存在,此文件将用于提供书签文本旁边显示的图标。

其他浏览器如Mozilla也增加了对favicons的支持。根据浏览器的不同,favicon可以出现在各种地方,而不仅仅是书签列表中(事实上,它甚至可能根本不出现在书签列表中)。例如,它可以显示在地址栏或浏览器选项卡的标题中。

常见icon像素

Windows XP:

  • Explorer views:

    • Details / List: 16
    • Icons: 32
    • Tiles / Thumbnails: 48
    • Right-click->Properties / choosing a new icon: 32
    • Quickstart area: 16
    • Desktop: 32
      Windows 7:
  • Explorer views:

    • Details / List / Small symbols: 16
    • All other options: 256 (resized, if necessary)
    • Right-click->Properties / choosing a new icon: 32
    • Pinned to taskbar: 32
    • Right-click-menu: 16
    • Desktop:
    • Small symbols: 32
    • Medium symbols: 48
    • Large symbols: 256 (resized, if necessary)
    • Zooming using Ctrl+Mouse wheel: 16, 32, 48, 256
      Windows Runtime: (from here)
  • Main tile: 150x150, 310x150 (wide version)

    • Small logo: 30x30
    • Badge (for lockscreen): 24x24, monochromatic
    • Splashscreen: 620x300
    • Store: 50x50

from: https://stackoverflow.com/questions/3236115/which-icon-sizes-should-my-windows-applications-icon-include

  • windows下EXE程序推荐尺寸 1616 3232 48*48 有这三个就差不多了

制作一个icon

要创建一个 favicon.ico简单的创建16x16 .PNG文件并使用png2ico将其转换为图标资源。如果需要,可以将更多图像添加到同一图标资源以提供替代分辨率。大多数浏览器仅使用16x16图像,但在不同的上下文中(例如,当您将URL从地址栏拖到桌面上时)可能会显示更大的图标。如果图标资源仅包含16x16图像,则会将其缩放到适当的大小,因此从技术上讲,从不需要添加替代分辨率。但是,这样做可以提高显示图标的质量。

请记住,对于使用慢速调制解调器的用户,favicon.ico如果页面加载时间过长,可能会将页面加载时间增加几秒,因此请勿过度使用。添加32x32替代应该足以确保即使在具有较大图标的上下文中图像也会看起来很好。添加更多更大的替代品是不必要的膨胀。尝试将颜色数量保持在16以下,并使用–colors 16png2ico 的开关创建一个16色图标(甚至用开关创建ab / w图标–colors 2)。这将导致较小的文件加载更快。

当您创建要包含在您的图像时favicon.ico,不要忘记图标可能是针对各种背景颜色组成的,因此如果您想避免图标出现在框内,则应使用透明度而不是纯色背景。请注意,图标资源仅支持二进制透明度,即像素可能是可见的或不可见的,但不是30%半透明的像素。

操作

  1. 下载png2ico
  2. 准备各种尺寸的png图片
  3. 在解压目录下执行
 ./png2ico.exe favicon.ico logo16x16.png logo32x32.png
  1. 目录下生成 favicon.ico 即为所需图标

制作一个favcion.ico相关推荐

  1. 如何给网站制作一个favicon.ico图标

    如何给网站制作一个favicon.ico图标,附代码(图) ico图标是网站的头像,在打开网站的时候出现在IE的地址栏里,目前大多数浏览器都支持,最常用的IE6.0则显示加入本地收藏夹网站的ICO图像 ...

  2. 使用Fireworks和Icofx制作一个ICO图标

    前言 大家都知道,制作软件或者网站的时候都需要一个漂亮美观的ICO图标,那些在线转换图片为ICO的网站就不介绍了总感觉有点不舒服. 我平时最常用就是Fireworks + icofx3,以后在linu ...

  3. nsis制作一个外部exe启动器(exe嵌套exe)

    功能:制作一个exe,该exe的功能是调用另外一个exe 额外说明:本程序中是生成的Launcher.exe,点击运行该exe可以运行C:\Users\zhoulm\Desktop目录下的Setup. ...

  4. PyQt5制作一个简单的登录界面

    最近在学习GUI设计,分享做的一些小项目. 这篇文我们讲一下如何制作一个简单的登录界面. 目录 一.效果图 二.简述制作过程: 三.源码及材料: 1.源码: 2.图片素材: 一.效果图 如下: 二.简 ...

  5. Day1 制作一个APP之前你要准备的东西都在这了

    点此进入:[干货] 十天 教你从创意到上线APP 制作一个APP之前你要准备哪些东西呢?这对于我们开发者来说往往是一个头疼的问题,然而对于项目经理.产品经理而言,这个问题则是再简单不过的.因为他们知道 ...

  6. 小强的HTML5移动开发之路(5)——制作一个漂亮的视频播放器

    在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的体验一下HTML5的优势,我们开始制作一个漂亮的视频播放器吧先别急,在开始制作之前先了解一下视频文件的基本知识. 一.视频 ...

  7. Qt制作一个相册浏览工具

    如何用Qt制作一个相册浏览的小程序? 程序开发思路如下: 1.支持多张相片浏览,可翻页浏览,相片可从本地导入; 2.相片要有放大和缩小的功能; 3.相片可自动浏览,时间间隔可自定义. 主要的代码如下: ...

  8. 自己制作一个回收站图标吧~(超详细)

    目录 前言 一.效果 二.制作步骤 1.准备两张.ico图片 2.个性化设置 三.写在最后 前言 最近某音上的猫猫回收站很火,好多人都用上了POP猫猫主题回收站(我也不例外),但是今天想自己制作一个特 ...

  9. 制作Windows的ico图标

    也不知道这个方法是不是最好的,有时间再查看其它方法 首先设计出图标,png格式即可. 使用一款软件 IconWorkshop 下载了一个试用版,临时制作够用了 制作步骤如下: 1.打开png图片 2. ...

最新文章

  1. 数据结构实验之栈与队列七:出栈序列判定
  2. 3.20学习内容,字符串与列表
  3. 2场直播丨OGG日常运维及故障处理、云原生数据仓库AnalyticDB
  4. python压缩和读取.tar.bz2格式的压缩包
  5. Jmeter远程启动负载机
  6. 和为S的两个数字(python)
  7. react之组件异步加载
  8. (转)“在证券行业,技术不重要,不要过分强调!”
  9. 结合使用 Oracle 和 Ruby on Rails 的补充
  10. 播放器市场瞧一瞧: 暴风影音和豪杰解霸前身后世
  11. 专业的售后服务管理系统
  12. 软件工程——程序流程图详解
  13. 科学道德与学风-2021雨课堂答案-第5章
  14. 关于资产分池ABS等金融衍生品内容来袭
  15. Go包管理工具Vendor使用教程
  16. threejs 制作产品3d展示页面
  17. 什么样的面试更有效?
  18. scratch零基础
  19. 【CCF会议期刊推荐】CCF推荐国际学术期刊/会议(计算机图形学与多媒体)
  20. 记理光MP5503一体机扫描到域计算机共享文件夹一事

热门文章

  1. AI把关啤酒质量 省钱又靠谱!
  2. AI人才创新发展联盟(AIHIA)执行委员会一届一次会议胜利闭幕
  3. 使用该设备需要WIA驱动程序
  4. 什么情况下PMP可自学?
  5. 利用word2vec、textCNN、jieba对事故文本多分类及致因修复(三维向量)
  6. 11 万字的字节码编程系列合集放送(ASM、Javassist、Byte-buddy、Javaagent)
  7. 深度之眼Paper带读笔记GNN.09.GGNN
  8. 密码学之ElGamal 数字签名 密钥产生 数字签名 验证 python实现
  9. 迅为瑞芯微3399开发板Ubuntu系统-安装ssh
  10. Openlayers前端复用Turf.js生成平头Buffer