超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的

可能之前那篇文章写的不太详细,让有些人看不懂,抱歉了,这里详细的记录一下自己是怎么弄的
准备:png图标,PS软件(这个貌似我不管在哪都是必备的所以我都是用的PS…后来测试直接使用电脑自带画图板也行,木得问题)

先看电脑自带的画图工具转换PNG为ico
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第1张图片
这是准备的 png 图标,使用画图工具打开
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第2张图片
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第3张图片

直接点击左上角:文件 – 另存为 – 其他格式
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第4张图片
弹出这么个框:
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第5张图片
下方选择保存类型:
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第6张图片
点击保存:
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第7张图片
弹出个提示:什么透明度丢失,那当然了,透明度是专属于 png 的,改为 bmp 当然丢失了,正常,直接确定就行
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第8张图片
生成了一个bmp格式的图片
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第9张图片
直接将 bmp 后缀修改为 ico 后缀就行
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第10张图片
这个提示说可能导致文件不可用,放心吧,能用,直接选是就行
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第11张图片
这个就是生成的 favicon.ico 文件
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第12张图片
测试一下:同级有个 index.html 文件,直接引入这个 icon 作为小窗口上边的图标试试看:
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第13张图片
使用浏览器打开查看展示情况:
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第14张图片
或者使用 nodejs 本地服务打开当前页面查看 favicon.ico 展示情况:
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第15张图片
使用PS也是一样的,只不过PS上是储存为,跟另存为意思是一样一样的,只不过它存储之后有个选项:
超简单的用PS(PhotoShop)转换png为ico,简单的制作favicon.ico,使用画图工具转换PNG为ICO图标,不用下什么插件软件什么玩意儿的_第16张图片
我一般都是 Windows 24位,随便啦,看自己个人意愿

你可能感兴趣的:(ico)