位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

HTML5 定义图标

提问人:刘团圆发布时间:2020-11-20

网站图标一般显示在浏览器选项卡、历史记录、书签、收藏夹或地址栏中。图标大小一般为 16x16px,透明背景。移动设备图标大小:iPhone图标大小为57x57px或114x114px (Retina屏),iPad图标大小为72x72px或144x144px (Retina屏)。Android系统支持该尺寸的图标。

■实例设计

    第1步,创建大小为16><16px的图像,保存为favicon.ico,注意扩展名为.ico。为Retina屏创建一个 32x32px的图像。

    第2步,为触屏设备至少创建一个图像,并保存为png格式。如果只创建了一个,将其命名为apple-touchicon.png。如有需要,还可以创建其他的触屏图标。

    第3步,将图标图像放在网站根目录。

    第4步,新建HTML5文档,在网页头部位置输入下面代码。

    <link rel="icon" href="/fayicon.ico" type="image7x-icon"/>

    <link rel="shortcut icon" href="/favicon.icq" type="image/x-icon"/>

第5步,浏览网页,浏览器会自动在根目录寻找这些特定的文件名,找到后就将图标显示出来。

■小结

如果浏览器无法显示,则可能是浏览器缓存和生成图标慢的问题,尝试清除缓存,或者先访问图标:http://localhostZfavicon.ico,然后再访问网站,就正常显示了。

继续查找其他问题的答案?

相关视频回答
回复(0)

特邀嘉宾

软件开发工程师——刘团圆

软件开发专业科班出身,擅长软件开发课程培训。

向TA咨询

该嘉宾的QQ群

更多>>
    返回顶部
    国产电影_2020最新好看的内地国产电影推荐_国产电影排行榜