精华内容
下载资源
问答
  • 在添加网页到收藏夹之后会看到一个漂亮的图标,很好奇是怎么实现的呢?下面小编就给大家讲解下网页收藏夹显示ICO图标(代码少),有需要的小伙伴可以来参考下
  • 网页添加 ico图标

    千次阅读 2019-02-10 17:21:35
    通常将这种图标称之为 ico图标 在这里推荐一个ico图标下载网站 图标下载,ICON(SVG/PNG/ICO/ICNS) 图标搜索下载 输入关键词 选择对应的图标后下载需要的图标格式,这里选择的是 ICO图标下载 ...
    什么是 ico图标

    ico是Icon file的缩写,是Windows的图标文件格式的一种。图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透明区域。

    ico图标的用途

    ico可以作为浏览器首段图标显示,还可以在收藏夹内收藏内容的前段显示小图标。

    在实际的应用场景中

    通常作为一个刚入门的前端小白来说,写出来的网页是这样的
    在这里插入图片描述
    而一般情况下,当我们打开一个新的网页时看到的却是这样的
    在这里插入图片描述

    咦~~这是咋做到的呢?

    其实这并不难,一小段代码就OK啦

    通常将这种图标称之为 ico图标

    在这里推荐一个ico图标下载网站
    图标下载,ICON(SVG/PNG/ICO/ICNS) 图标搜索下载

    进入后输入关键词,如:
    在这里插入图片描述

    选择对应的图标后下载需要的图标格式,这里选择的是 ico图标下载
    在这里插入图片描述

    待图标下载完成之后在相应的HTML文档中进行引入添加

    <head>标签内插入<link>标签,并将<link>标签内的 rel="stylesheet" 属性值修改为rel="shortcut icon"然后添加相应的 ico图标 路径

    如:<link rel="shortcut icon" href="Images/blog.ico">

    保存
    浏览器中打开,设置成功
    在这里插入图片描述

    展开全文
  • 那么怎么在自己的网站标题(title)上显示ico图标呢? 方法一、自己制作一个格式为ico的图片,更改其像素为:16*16,更改其名称为favicon.ico,然后讲favicon.ico放到网站的更目录即可。 ...

    我们在浏览别人的网页的时候会发现很多网站在浏览器上显示的时候,在浏览器标签处会显示一个特殊的图标和标题,当网页被收藏到书签的时候也会出现网页的图标,给人的感觉更为个性,也更加舒适。那么怎么在自己的网站标题(title)上显示ico图标呢?

    方法一、自己制作一个格式为ico的图片,更改其像素为:16*16,更改其名称为favicon.ico,然后讲favicon.ico放到网站的更目录即可。

    当浏览器搜索我们网站根目录的时候便会发现favicon.ico这个图片,便会自然地将该图标显示在访问者的地址栏和收藏夹中。

    方法二、在网页的head标签中加入如下代码(更推荐用此方法):

    标题栏:

    <link rel="icon" href="ico地址" type="image/x-icon">

    收藏夹:

    <link rel="shortcut icon" href="ico地址" type="image/x-icon">

    例如要加入qq的icon

    <link rel="icon" href="https://im.qq.com/favicon.ico">

    需要注意的是:图标要用 16*16 色;另外,如果将 16*16 的 bmp 文件改为 ico ,在WINDOWS 支持,但放在浏览器或别的软件就会出错 。

    展开全文
  • 网页标题添加ico图标

    千次阅读 2018-09-27 09:16:00
    每个网站都有自己的标题和logo,当访问某个网站时,浏览器窗口会显示该网站的logo+标题,以便清晰的知道我们正在访问的是哪一个网站,如: 实现步骤: 1、找到logo,访问https://www.网站名.com/favicon.ico 2...

    每个网站都有自己的标题和logo,当访问某个网站时,浏览器窗口会显示该网站的logo+标题,以便清晰的知道我们正在访问的是哪一个网站,如:
    在这里插入图片描述

    转换ico图标

    实现步骤:
    1、先切图,尽量透明背景,png格式
    2、访问网站 http://www.bitbug.net/
    3、把图片转换为小图标,如图所示
    在这里插入图片描述

    引用ico图标

    实现步骤:
    1、找到logo,访问https://www.网站名.com/favicon.ico
    2、右键保存该图标至根目录
    3、引用该图标
    实现代码:

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

    注意:

    1. 她(它)不是iconfont字体也不是图片。

    2. 位置是放到 head 标签中间。

    3. 后面的type=“image/x-icon” 属性可以省略。

    4. 为了兼容性,请将favicon.ico 这个图标放到根目录下。
      在这里插入图片描述

    展开全文
  • 网页favicon.ico图标设置及制作

    千次阅读 2018-05-29 10:44:20
    favicon图标介绍 favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置, 目前主要的浏览器都支持favicon.ico图标. ...

    favicon图标介绍

    favicon.ico一般用于作为 缩略的网站标志,它显示 位于浏览器的地址栏或者在标签上,用于显示 网站的logo,如图 红圈的位置, 目前主要的浏览器都支持 favicon.ico图标.
    google ico for introduce favicon
    yahoo ico for introduce favicon

    图标生成网址:http://bitbug.net/

    如何安装Favicon

    当成功生成 favicon.ico图像文件后,浏览器会自动弹出一个zip的压缩文件
    将压缩文件中的 favicon.ico图像放在根目录下(也可以是其他目录)
    在页面源文件的<head></head>标签之间插入
    <link rel="shortcut icon" href=" /favicon.ico" type="image/x-icon" />

    最后形成(在<head>标签中引入需修改我们图标的href):
    <head>
    ...
    <link rel="shortcut icon" href="/favicon.ico" />
    </head>
    案例如下:

    Images文件夹下用于放置图标/图片

     home.html 代码如下:
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>home page</title>
         <link rel="icon" href="Images/wangyi.ico" type="image/x-icon" />
        <link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
    </head>
    <body>
        home page
    </body>
    </html>

    下面两行代码就可以告诉浏览器使用wangyi.ico 作为home.html的图标了(注意路径href):

    <link rel="icon" href="Images/wangyi.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
    

    基本上所有的现代浏览器都支持这种写法,例如firefox,ie9.

    firefox:image

    ie9:image

     

    可惜的是普通用户用的基本上是360浏览器,搜狗浏览器,qq浏览器等。

    搜狗浏览器:image

    可以知道,我们在网站根目录下面的favicon.ico 起作用了,所以显示的是网站根目录下面的favicon.ico 图标。

    打开360浏览器:image

    奇怪了,google的图标哪里来的。。。。???

    我们的faviconTestWeb 只有3个图标,一个是wangyi.ico.baidu.ico.favicon.ico(cnblogs的图标)。

    为什么使用360显示的是google的图标?

     

    其实360浏览器在浏览网页的时候,它会忽略端口,也就是说http://localhost:3529/home.html

    firefox请求的是:link 的href所对应的图标。

    搜狗浏览器等:请求的是http://localhost:3529/favicon.ico.

    360浏览器等:请求的是http://localhost/favicon.ico,

    也就是不管你请求的是http://host/home.html,还是http://host:333/home.html,还是http://host/test/home.html.

    它请求的都是http://host/favicon.ico.

     

    证据就是打开360se的安装目录:

    image

     

     

    所以如果你的网站favicon.ico 不起作用,或者是想要让favicon.ico 的兼容性更好,要使用下面几个步骤:

    1:检查网站根目录下面的favicon.ico,也就是:http://host/favicon.ico.,而不是http://host/some/favicon.ico.

    2:确保<link rel="icon" href="http://host/favicon.ico" type="image/x-icon" />

     <link rel="shortcut icon" href="http://host/favicon.ico" type="image/x-icon" />

    使用的是http://host/favicon.ico

    3:如果你的网站带端口,或者是测试版本的话,那么尤其要注意360等浏览器,它们在请求favicon.ico 的时候会忽略端口号的。



    如有不足请多多指教!希望给您带来帮助!
    展开全文
  • 我正在使用服务器的根目录编写一个简单的网页,并在" /favicon.ico"中使用快捷方式图标,但是我的浏览器从未请求过此favicon.ico。 我在html中包含以下内容:当我打开开发人员工具的"网络"标签时,看到了对192.168....
  • 显示在浏览器的地址栏、浏览器标签上或者在收藏夹上,是展示网站个性的缩略logo标志,也可以说是网站头像,目前主要的浏览器都支持favicon.ico图标,如果要让网站看起来更专业、更美、更有个性,favicon.ico是必...
  • 如何在网页标题栏上显示ICO图标

    千次阅读 2014-01-14 11:04:09
    第一步,准备一个图标制作软件。  首先您必须了解所谓的图标(Icon)是一种...普通的图像设计软件无法使用这种格式,所以您需要到下载一个ico图标工具,本站常用软件既有,推荐强大的Microangelo,可以方便的制作ico图标
  • <...link rel="shortcut icon" href="favicon.ico" /><link rel="shortcut icon" href="../favicon.ico" /> <!--FOR IE6--><link rel="icon" href="favicon.ico" type="i...
  • 1.关闭搜狗浏览器; 2.按下Win键+R键打开运行窗口; 2.输入:%appdata%/SogouExplorer/FavIcon ,点击“确定”打开搜狗浏览器的FavIcon目录 3.把FavIcon目录下的内容全部删除即可。...
  • discuz3.2显示 ico图标问题

    千次阅读 2015-11-25 14:39:17
    Discuz! X3.1 ico图标不显示 修改template/模版/common/header_common.htm <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
  • 网页favicon.ico图标设置

    万次阅读 2014-12-18 10:10:45
    可以看到在浏览器的标签头上面显示了一个图标,这个图标是:,也就是我们常说的favicon.ico.   由于这篇文章主要讨论favicon.ico,以及各个浏览器对其的不同处理,所以还是新建web项目如下: ...
  • 设置网页ico图标

    千次阅读 2017-11-02 18:50:57
    网站开发时经常要给网站做一个ico图标,今天记录下 1.选择一张需要显示的图片,在https://www.ico.la/制作ico图标,选择16*16的,然后下载另存为favicon.ico 2.将图标放在项目中 3.在之间添加代码 images/common...
  • 网页加载ico图标方法

    2020-08-21 14:30:25
    其实在ico图标引进中,有很多方法,有的是HTML页面,有的是PHP 但是我无意中发现在PHP中引入png格式的ico显示来,只有引 ico格式的才可以我也知道为什么哈,大神勿喷!一下是我理解的两种引进ico的方法 语句...
  • 1.首先制作一个16x16的icon图标,命名为cssbbs.ico(这里的名字可以随便改!),放在根目录下。2.然后将下面的代码嵌入head区:<link rel="icon" href="cssbbs.ico" type="image/x-icon" /><link rel=...
  • 可以看到在浏览器的标签头上面显示了一个图标,这个图标是:,也就是我们常说的favicon.ico. 由于这篇文章主要讨论favicon.ico,以及各个浏览器对其的不同处理,所以还是新建web项目如下: home.html 代码如下...
  • vue中网页图标favicon.ico不显示

    千次阅读 2020-09-23 15:57:05
    在index.html里,添加link,若href是引用服务器上的图片,在跨域的情况下ok的 <link rel="shortcut icon" type="image/x-icon" href="http://img.81lianpin.com/manage/favicon.ico" media="screen" /> 2、...
  • 首先,写这篇博客之前是因为我先简单介绍一下我使用的框架架构,这个框架是...因为比较喜欢研究架构和阅读开源网站大佬开源的优秀框架,所以在一次偶然的重构中,我想更改传统SSM框架的favicon.ico图标,那么如何做呢
  • 关于ico图标不显示的问题

    千次阅读 2011-08-24 18:21:51
    最近写个web系统,加上个ico图标,可老是不显示。 解决办法如下: 一:制作ico图标,16*16或32*32的都行,32*32可以作为快捷方式图标。 二:把ico图标放到工程根目录下,名字为favicon.ico,在显示页面的 与 之间...
  • 实现前面显示小图标的操作如下:设计一个ico图标,将设计好的图标命名为favicon.ico
  • vue项目打包后浏览器ico图标不显示

    千次阅读 2020-04-24 16:50:03
    vue项目打包后ico图标消失 公司的vue项目 还有index.html文件中head加上:href直接用网络地址,如果用相对路径容易出错。
  • ico图标和WinForm图标

    热门讨论 2012-09-22 09:13:36
    这里为你整理了很齐全的ico图标,以及窗体设计的图标,网页的一些裁剪图片,很全很实用,希望大家喜欢!
  • idea设置favicon.ico图标不显示

    千次阅读 2020-08-02 11:15:49
    用idea在项目里设置网页图标没有效果 问题过程 1.今天,我用idea做一个小demo,设置网页的logo,把
  • <link rel="icon" type="image/x-ico" href="文件的路径"> 如何生成 .ico图标? 先将图片尺寸设置为16px×16px后,再将其后缀先改为 .bmp 后,最后改为 .icon ...
  • 直接改名字为ico不可用,保存后加了网站名称,可修改名称为favicon.ico) 3、用Xftp传给目标网站相应目录下; 4、打开index.html在head后添加:(注意不是body里面) &amp;amp;lt;link rel=&amp;quot;...
  • public目录下的index.html原配置,icon图标不显示,netWork也不加载favicon.ico 解决方法: 将上面圈住的内容加上/,如下即可 打包后dist下面的index.html如下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,857
精华内容 5,142
关键字:

网页不显示ico图标