icon网页设计图标（网页图标ico设置）

本文目录一览：

• 1、UI设计师一定要知道的ICON设计规范之图标尺寸
• 2、appicon在线设计-如何制作软件图标
• 3、html5如何增加iconhtml5新增的

UI设计师一定要知道的ICON设计规范之图标尺寸

在页面图标设计中最常见规格有：12×116×124×232×348×48等，这儿的提议是以48px做为基本图标的设计方案规格，由于iOS页面中的网格图尺寸是4的倍数，iPhone标准规定最少点一下总面积为44pt；安卓系统的网格图是8的倍数，最少实际操作商品详情页为48dp。

首先我们来绘制最外层的图形，最外层的图层是一个正方形，高宽都是44px。为了方便观察我们将填充给关闭掉，并且需要注意，最外层的图形描边方式为外部。接下来我们继续进行绘制，绘制一个42px的正方形，这个范围内就是我们图标绘制的安全区域。42Px的方形描边方式为内部，如果仍然是外部的话就会有重叠了。

以设计一款摄影社区APP 影记 的图标为例，设计师需经历寻找隐喻、竞品分析、关键词提炼等步骤。从24x24px到512px，iOS应用图标尺寸需遵循系统规范，而安卓则需多个尺寸。设计过程中，像素对齐、栅格系统和视觉一致性至关重要。

D立体图标。2017-2018年左右，5D图标曾在UI界刮起一阵风，所以有不少设计师认为这将成为未来图标的一个趋势，但是这阵风好像很快又刮停了...可能是因为设计成本过高，且风格过于鲜明，难以被许多产品驾驭。

开启ai，新创建绘图工具（24*24px），绘图工具总数自定。建议每个图标一个画板，方便中后期实际操作。开启网格图设定，【主视图】-【表明网格图】，键盘快捷键「cmd」。默认设置网格图是1x1px，便是横纵各24格子，大家需要修改它。改动网格图尺寸，依次点击【首选项】-【参照线和网格】。

appicon在线设计-如何制作软件图标

1、在软件中打开jpg图标，调整图片分辨率到适合作图标的分辨率，如180*180或256*25最后要将调整后的图片另存为ico格式后才能被WINDOWS操作系统使用，也可以设置成png格式，不过必须在苹果系统下或是WINDOWS系统下用模拟苹果的停靠栏工具软件才能使用，效果当然要比icol图标强得多。

2、打来ps。新建一个800*800像素画板，先试着做。在工具栏上，找到圆角矩形工具。画一个圆角矩形，app都是圆角的。选择圆角矩形工具，在上方填充位置，填充上一种颜色。这里是绿色，颜色可以随意。这里来示例做信息app图标，画一个关于信息的的图标。需要什么图标，可随意。

3、直接用这个在线的图片生成ico工具吧，方便快捷，常用的图片格式比如jpg/png/webp/bmp等等都可以直接生成ico图标，还可以在线裁剪缩放，选取你需要的尺寸等等，而且清晰度挺高的。

html5如何增加iconhtml5新增的

1、第一步，准备一个图标制作软件。首先你要明白，所谓的图标是一种特殊的图形文件格式，带有。ico作为它的延伸。普通的形象设计软件无法使用这种格式，需要下载一个ico图标工具。第二步：确定“收藏夹”图标的规格。收藏夹里出现的是16*16；使用的颜色最好不要超过16色。

2、HTML5 新增常用元素 HTML5的声明为：！DOCTYPE html 它不用再像之前的版本一样在声明中引用DTD。DTD（document type definition）定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构。在HTML中，DTD规定了标记语言的规则，使浏览器能正确地呈现内容。

3、首先，打开html编辑器，新建html文件，例如：index.html。在index.html中的body标签中，输入html代码（其中icon.png是放大镜图标）：。

4、把字符直接写在HTML文件里；这个方法是简单比较直观，见如下代码，用一个span元素去包含一个字符“！”（或），然后给这个span添加一个类。这个字母在选定的字体中被映射到一个特定的图标。

5、使用 HTML5 的 Notification API的方法：申请权限 出于安全考虑，要发送桌面消息，需要先申请用户授权。