美文网首页
网站小图标制作

网站小图标制作

作者: hk_sky | 来源:发表于2018-02-01 09:45 被阅读0次

网页title旁边的小图片设置,图片要求格式必须是.ico,可以使用在线的转换工具把jpg和png图片转换为ico图片,工具地址:转换地址  ,然后在html文件中的<head></head>标签中加上:<link rel="shortcut  icon" href="img/logo.ico" type="image/x-icon" / >

favicon.ico图标是网站的缩略标志,可以显示在浏览器标签、地址栏左边和收藏夹,是展示网站个性的缩略logo标志,也可以说是网站头像,如果要让网站看起来更专业、更美、更有个性,favicon.ico是必不可少的

浏览器调用favicon的原理是首先在网页所在目录寻找favicon.ico文件,如果没有找到就去网站的根目录寻找。所以最简单的方法就是将制作好的favicon文件命名为favicon.ico然后上传到网站的根目录下。

如果您需要将Favicon.ico放到其他目录下,或者希望让不同的网页显示不同的Favicon,就需要在网页Html文件中做设定了,具体设置也很简单,在Html中的部分加入如下的代码:

<link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon” />

<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”/>

<link rel="icon" href="animated_favicon1.gif" type="image/gif" />

程序代码<link rel="shortcut icon" href="favicon.ico" />

<link rel="icon" href="animated_favicon.gif" type="image/gif" />

含义:在浏览器标签中显示favicon,在收藏夹中显示favicon。

除此之外,Firefox还支持GIF动画格式的Favicon,使用方法如下:

首先制作一个16*16的gif动画,然后在html代码 <head></head>中加入如下代码:

相关文章

  • 网站小图标制作

    网页title旁边的小图片设置,图片要求格式必须是.ico,可以使用在线的转换工具把jpg和png图片转换为ico...

  • 关于自己更改网站小图标的方法

    一般我们的网站左边都有一个自己网站的小图标logo,那么这个小图标是如何更改的呢? 如果要更改我们的小图标,首先要...

  • ui设计自学

    今天开始练习制作小图标。 云课堂上有小图标课程,跟着做感觉不是很难,但是由于不熟练,动作比较慢。 总的来说,小图标...

  • 推荐20个超实用的免费PPT图标网站(值得收藏)

    目前来说,小图标常常被用在网站设计中,一个使用恰当的小图标能快速传达所要表达的意思,同时,还能让网站增色不少。 既...

  • 修改网站小图标

    建议使用16色,16*16大小,ico格式图标。 普通HTML中: VUE中: VueCli3中:

  • css 制作小图标

    1. outline 制作方块和加号 outline 不占空间, 像 box-shadow, border-rad...

  • icon小图标制作

    一、css sprite方法 将多个小图标组合到一张大图片上,这就是传说中的雪碧图,然后运用background-...

  • 如何用PS制作UI界面小图标

    制作界面小图标 哈喽大家好~我是阿默老师。今天给大家更新一个有趣的制作界面小图标的教程。 1、首先我们先新建一个宽...

  • 真•干货 | 这6个网站解决你图标搜集的后顾之忧

    在制作PPT,设计网站或者进行其他一些文档的排版时,适当得使用一些小图标不仅能起到锦上添花的作用,使页面看起来更有...

  • css字体图标引入方法

    css字体图标引入方法在网页中将小图标制作成字体是很多网站的常用做法,为的是减少页面请求。 先推荐一个字体图标库(...

网友评论

      本文标题:网站小图标制作

      本文链接:https://www.haomeiwen.com/subject/nmnlzxtx.html