• 17630273926

通过自己的自定义图标使您的网站看起来更正式

作者:郑州云优化 / 2020-01-05 20:29 / 浏览次数:
通过自己的自定义图标使您的网站看起来更正式
图标是在页面标题左侧的浏览器选项卡中显示的小自定义图标。它通常只是缩小到16 X 16像素的网站徽标。以下是具有网站图标和 一个没有。
网站图标
当某人为您的站点添加书签时,您的收藏夹图标将与页面标题一起显示在其书签列表中。这是脱颖而出并为您的网站提供良好专业形象的有效方法。
如果您的网站还没有网站图标,则此简单指南将帮助您创建网站图标,并说明访问者访问网站时如何显示该图标。即使您不是真正的技术专家,创建自己的自定义图标实际上也比您想像的要容易得多。
第1步:创建图像
如果您已经有徽标或代表您站点的图像,只需使用Adobe Photoshop或Fireworks等图像编辑器打开该文件。如果您的计算机上还没有这样的编辑器,则可以使用其他选项,例如pixlr.com,这是一个免费的出色在线替代方法。
如果徽标周围有很多多余的空白,请确保将其裁剪掉。如果您的徽标稍微复杂一点,并且不能很好地显示为16 X 16的图像,则可能需要对其进行简化,甚至完全使用其他图像。但是,如果您按照这种方式放置收藏夹图标,则仍应尝试将网站的相同原色合并到新图像中。尽管可以使用其他图像,但是建议您尽可能使用徽标来帮助公司进行品牌推广。
将图像尺寸减小到16 X 16像素后,将文件另存为.jpg,.png,.gif,.bmp或.tif。步骤2:转换图像现在,您需要将图像转换为.ico文件。您可以使用几种在线工具来完成此任务。一个好的免费图标生成器可在prodraw.net上找到。只需上传您的图像,选择图标大小,然后瞧。您可以下载全新的.ico文件。
了解如何与我们合作!
步骤3:上载图像
现在您有了favicon.ico文件,可以将其上载到站点的根目录。请勿将其放在任何文件夹中。上载图像后访问www.yourdomain / favicon.ico(当然用您的实际域名替换“ yourdomain”),该图像应该可见。请勿将收藏夹图标放置在图像文件夹中,例如:www.yourdomain / images / favicon.ico。
步骤4:添加基本代码
大多数现代浏览器都可以检测到根目录中存在您的收藏夹图标,并将其显示在浏览器选项卡中。尽管您无需在页面上添加任何代码,但仍将希望在HTML的<head>部分中添加包含简单代码,以确保所有浏览器都能正确显示您的收藏夹图标。下面是您需要添加的代码。
<link href=””favicon.ico”” rel=””shortcut” type=””image/vnd.microsoft.icon”” data-mce-href=””favicon.ico”” />
请记住,网页的<head>部分中将包含其他元素,例如标题标签和元描述,以及对您拥有的任何CSS文件的引用。上面的代码可以添加在<head>到</ head>的任意位置。
注意:“ vnd.microsoft.icon” MIME类型已替换了较旧的“ image / x-icon”类型,作为Web上.ico文件的官方标准化favicon MIME类型。
苹果设备的图标
您也可以为Apple iOS设备创建图标。您只需要创建4种不同大小的图标,然后将它们另存为.png文件即可。默认大小为57 X 57像素。Apple还建议您在创建这些图像时使用90度角而不是圆角。创建这些图像文件后,您只需要将此代码添加到HTML的<head>标记内。
<link href=”apple-touch-icon-iphone.png” rel=”apple-touch-icon” data-mce-href=”apple-touch-icon-iphone.png” />
<link href=”apple-touch-icon-ipad.png” rel=”apple-touch-icon” sizes=”72×72″ data-mce-href=”apple-touch-icon-ipad.png” />
<link href=”apple-touch-icon-iphone4.png” rel=”apple-touch-icon” sizes=”114×114″ data-mce-href=”apple-touch-icon-iphone4.png” />
<link href=”apple-touch-icon-ipad3.png” rel=”apple-touch-icon” sizes=”144×144″ data-mce-href=”apple-touch-icon-ipad3.png” />
如果静态图标对您而言还不够酷,那么这里提供了有关创建动画图标的绝佳指南,网址为http://www.wikihow.com/Make-an-Animated-Favicons。
还有其他几种出色的在线工具以及创建自定义图标的不同方法,如果您有更好的方法或喜欢的工具,请在下面的评论中分享您的想法。
【郑州云优化】郑州SEO、网站建设、网站设计、服务器空间租售、网站维护、网站托管、网站优化、百度推广、自媒体营销、微信公众号
如有意向---联系我们
热门栏目
热门资讯
热门标签

网站建设 网站托管 成功案例 新闻动态 关于我们 联系我们 服务器空间 加盟合作 网站优化

备案号:ICP备*********号 网站地图/sitemap 

公司地址:河南省郑州市郑州云优化 咨询QQ:1774525808 手机:17630273926 电话:17630273926