商业源码 网站默认图标shortcut icon和icon的区别
<link rel="shortcut icon" href="http://examplecom/faviconico"type="image/vndmicrosofticon">
<link rel="icon"href="http://examplecom/faviconico" type="image/vndmicrosofticon">
建议包含上面两行HTML代码，可以支持ico格式的图标
然而，只有第一行是必须的，因为“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词（“shortcut”将被忽略，而仅适用“icon”）；而Internet Explorer将会把它作为一个单独的名称（“shortcut icon”）。这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像（例如动画GIF）时，才有必要添加第二行。
在HTML中，link元件必须在head元件里（在<head>和</head>之间)。
对于XHTML，link必须使用“ />”结束（或“></link>”），而不可以使用“>”结束。
href可以，但不必，指向/faviconico的位置。它可以指向任何URL。
图像通常可以使用任何被浏览器支持的图像格式。
ico文件格式通常可以被所有可以显示favicon的浏览器读取。
设置服务器，以发送正确的MIME标识：
ICO 文件 image/vndmicrosofticon（或者亦可出于兼容性原因使用image/x-icon。然而最好使用IANA注册的MIME类型，因为多数主流浏览器现在支持它）
GIF 文件 image/gif
PNG 文件 image/png
使用适当的分辨率和色深。
ICO：包括多种分辨率（最常使用的是16×16和32×32，Mac OS X有时使用64×64和128×128）以及位深（比特每像素）（多数使用4、8、24 bpp，即16、256和1600万色）。
GIF: 使用16×16，256色。
PNG: 使用16×16，256色或24位。
注意：当faviconico被置于文档根目录时，将会被一些不处理link元件的浏览器找到，即使没有您的站点上没有指向它的链接。
标准化
Favicon 功能最早由微软创设，而微软公司的Internet Explorer网页浏览器会对每一个网站都请求favicon。微软支持的link标签不遵从World Wide Web Consortium（W3C，万维网联盟）的HTML建议[1]，因为：
rel属性必须包含一个用空格作分隔符的link类型的列表，所以一个包含两词的link类型不能被遵守标准的浏览器理解。
当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。
如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线
先来描述一下期间遇到的问题有哪些：
1、打包后将 dist 文件夹和 indexhtml 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。
2、打包好的静态资源均是绝对路径，无法引入进项目，也是 404。
1、项目目录结构
这是打包后的，所以有 dist 文件夹，打包方式：npm run build。
2、webpackconfigjs
这里只是一小部分，因为这边最关键的就是 publicPath,下面会提，这边可以解决静态资源 404 无法引入的问题。
3、npm run build 打包后的文件。
npm run build 打包后生成一个 dist 文件夹，这里面的目录：
我对 webpack 打包工具的原理不是很清楚，所以文件夹应该生成什么不是了解。我这边是这样子的。主要是一个主要的 buildjs, 因为我们的 indexhtml 引入的就是这个 js 文件。还有一些文件和 ElementUI 生成的 ttf 和 woff。
4、如何放到服务器中。
接下来就是需要将生成的 dist 文件夹和 indexhtml 文件放到服务器中，只需要这两个。首先我将这两个文件放在同一个文件夹中，我命名为 gas（随意）。
然后将文件夹放到 tomcat 中，我将文件夹放到 tomcat 的 webapps 文件夹目录下：
ok 部署完成,启动 tomcat，你会发现显示一个空白页，一些静态资源都是 404。
5、解决空白页和静态资源无法引入的问题。
1、首先空白页的问题，可以重 f12 中看出来都是绝对路径的原因，而我们打包后，应该的引入路径是相对路径，这时我们需要的是修改 indexhtml 页面。
看一下没改之前的：
看我 /dist/buildjs 引用的是绝对路径，这就导致了在 tomcat 去访问 indexhtml 页面时，报404。我们需要将路径变成相对路径 /dist/build/。多一个点，很关键。好了到这里应该主页面可以显示了。
但是你会发现，我的静态资源，我的（不包括 img 形式的引入），例如我在 css 中 background:url() 的显示404。
2、解决静态资源失效的问题
这就需要修改我们的 webpackconfigjs 中的 publicPath 了，默认的 vue-cli 脚手架环境搭建好后，publicPath 是这样的：
可以看到我们的路径是： /dist/。所以这时候我们如果打开页面，静态资源的路径都会是这样子的，并且报错404：http://1000181:8088/dist/bgpngfe9b889cea51978538ce352593be0573
显然可以看出和我们想要的路径不一致，上面我贴出来的在 tomcat 的文件目录中我将 dist 和 indexhtml 都放进了一个 gas 的文件夹中。所以正确的路径应该是这样的：
http://1000181:8088/gas/dist/bgpngfe9b889cea51978538ce352593be0573
看出区别了吗！
解决：
所以我需要改变一下 webpackconfigjs 中的输出路径 publicPath: /gas/dist/。将最外层的文件夹路径加进去，这样就可以将静态资源引入进项目了。
ok,到现在为止，最主要的两个问题解决了，一个是 indexhtml 空白页，另一个是 静态资源路径不正确的问题。
6、indexhtml 页面中的link 和 srcipt 引用的资源失效问题：
原因还是路径的地址不对：
妥协的解决方法是：将自己引用的资源手动放到打包出来的 dist 文件夹内，然后在 indexhtml 中按照 dist 的相对路径进行引用。
代码中的 iconico 就是我手动将 icon 图标放到 dist 文件夹中，然后按照对应的引用路径进行引用。其他的 css 和 js 引用一样。
7、待解决的问题：
1、在我的项目中，使用了 ElementUI 框架，但是在打包放到服务器中后，发现按钮样式变了，所有的 padding 失效，所有我只能自己手动进行添加样式。
2、在我的 indexhtml 中如果引入 link css文件时，还是没办法引入相对路径，所以我将 css 样式都放到了各自的组件中的 style 中了，其他的一般都是用 npm 注入依赖的形式进行安装。
8、网上搜索到的相关问题和解决方法。
1、求助！Vue项目用Webpack打包后放到服务器上，但访问是空白页？弄了好久了也不知道什么原因
2、vue项目中，npm run build生成的indexhtml文件只有放在根目录下打开才能生效，怎么解决？
3、Vue应用部署到服务器的正确方式
那个和服务器没关系
那个是你网站的ico
你找到你网站根目录
有个点ico的文件，你修改就下就可以，至于怎么做ico
你百度一下ico制作工具，做好之后用ftp上传覆盖就可以了
可能有两个原因：
你的web服务器只监听了你的网络IP地址，没有监听127001端口。通过netstat -auntp|grep 8080, 看看有没有127001
你的/etc/hosts被修改了，locahost只是与你的机器IP对应了。看一下localhost所在行，有127001与之对应吗？
你指什么LOGO？要是网页上的普通的话，就放在/image那个文件夹里
要是标题栏那个小的——比如百度那个标签的蓝色爪子
你把你的图标文件名取为faviconico，并且放在你网页所在的根目录下，就是跟你首页文件(一般是indexhtm、indexhtml、defaulthtm或defaulthtml放在一起)。这样Internet Explorer 50就会自动读取这个faviconico，从而将这个图标显示出来。
关于网页前面的图标怎么修改具体操作如下：
1、利用制图工具，如：photoshop软件；制作自己喜欢的或是网站需要的；
2、确定图标的尺寸，一般是：1616像素的；图标的格式一定要是ico的；
3、将这个图标文件（faviconico）上传到网站所在的服务器的根目录下。(也就是你的主页indexhtml所在的那个文件夹)不同的服务器的网站根目录有所不同，具体可咨询服务器运营商；
4、百度等搜索引擎会自动的不定时的爬取网站的根目录，只要它一发现了faviconico 这个文件，就会将该图标显示在访问者的地址栏和收藏夹列表中。
5、有时自己的浏览器还没有正确显示已做修改的图标，可以清除浏览器的缓存或是等待几天时间再次查看。
把faviconico代码放入网页版html中，方法如下：
在Html中的<head>部分加入如下的代码：
（1）<link rel=”icon” href=”/dir/faviconico” mce_href=”/dir/faviconico” type=”image/x-icon”>
（2）<link rel=”shortcut icon” href=”/dir/faviconico” mce_href=”/dir/faviconico” type=”image/x-icon”>
（3）<link rel="icon" href="animated_favicon1gif" type="image/gif" >
浏览器调用favicon的原理是首先在网页所在目录寻找faviconico文件，如果没有找到就去网站的根目录寻找。所以最简单的方法就是将制作好的favicon文件命名为faviconico然后上传到网站的根目录下。
扩展资料：
Faviconico的制作：
1、制作Faviconico的方法相当简单，常用的Faviconico图标有3种16×16、32×32、48×48。首先，利用图形工具创建2个反映网站主题的256色的小：1个为32×32像素，另一个为16 ×16像素。
2、需要注意的是，调色板要选用“Windows 默认调色板”，不然，在最终的效果展示中图形可能会发生迥异于您初衷的颜色上变化。
3、需要说明的是，在很多关于Faviconico的说明中，常见到要求为16色的说法，应该说这类说法大大过时。
4、在早期如Windows 95时期，16色的Faviconico可能是个稳妥的选择，保证其在大多数情况下正常使用，但到Windows XP后，完全不存在那类限制，16色只能使图标的展示效果大大降低。
-faviconico
0条评论