制作一个favcion.ico

本文深入讲解了图标(icon)的设计原则,包括Favicon的历史由来及其在不同浏览器中的应用。探讨了图标在Windows XP和Windows 7等操作系统下的推荐尺寸,以及如何使用png2ico工具将PNG文件转换为图标资源,提升图标在多种分辨率下的显示效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是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 即为所需图标
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值