关于favicon网站图标的学习

最新推荐文章于 2024-05-05 07:41:03 发布
最新推荐文章于 2024-05-05 07:41:03 发布
阅读量723 收藏
点赞数
分类专栏： HTML 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/not_in_mountain/article/details/52456263
版权

①关于favicon.ico（收藏夹图标）:

一般作为网站的缩略图，呈现于地址栏的前端和收藏夹等地方；

例如：

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

具体做法是：

在head 之间插入下面的代码（记得要将图片文件重命名为favicon.ico）:

<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="bookmark" href="/favicon.ico"/>

若是gif，改成：

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

推荐使用.ico文件，因为png与gif格式对于不同浏览器并未都能显示；

②favicon图标大小：

因为其长宽的大小限制，所以没有必要像素非常高，1~3kb的大小即可，过高会影响网站速度；
一般是16*16,32*32格式；

③favicon的使用：

A.可以将favicon.ico文件存放于网站的根目录，网站会自动调用图标进行显示；
B.将代码写于网站首页的<head></head>元素内，具体做法见①；

④favicon是否必要：

surf时，浏览器会首先请求favicon.ico，因此如果不设置的话，由于干扰请求程序，有时会造成网站速度变慢，甚至显示404错误；
因此为保证浏览器的正常请求顺序，建议使用favicon，并将其像素控制在较小值；


not_in_mountain
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何优雅地处理Django中的favicon.ico图标详解
12-25
前言 favicon.ico是网站的图标也是网站的头像，简单来说，就是让我们的网站更加好看。 本文主要给大家介绍了关于优雅处理Django中favicon.ico图标的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧 起步 默认情况下，浏览器会访问网站 “/favicon.ico” 这个地址获取网站的图标。如果没有配置的话，Django 会返回一个 404 错误。这对于强迫症的人来说，真的很烦。我们有现有的图标，且按开发规范一般存放 static/ 下。 网上的方法 网上找了大概两种处理方式，但都不够优雅。 方法一：使用重定向 在项目的 urls.py 中添加规则:
Favicon 生成网站推荐
Little Lamb 的博客
01-17 936
网站图标 Favicon 生成网站推荐
在线生成Favicon的九个网站
快乐向日葵
02-27 631
Favicon可以是一个网站的重要标识,它的作用是在地址栏的左端及用户的收藏夹里显示你的标志,让用户一眼即可认出你.一个好的Favicon会让你的网站更加深入人心. 　　前不久Google更换了自己的Favicon，但引来了不少的争议.所以，为自己的网站制作一个好看醒目的favicon就好比女生为自己打扮一样重要. 　　下面就为大家介绍九个在线制作favcion的网站服务. Favicon...
如何获取网页图标（favicon.ico无效的一种方法）
weixin_51971726的博客
02-22 5380
我在找一个网页图标时发现网址后加facicon.ico没有用。自己试着误打误撞成功了，来分享一下。没怎么学过前端，可能有很大局限性。
Vue工程的浏览器小图标（缩略的网站标志）无法解析或修改的问题
m0_52116878的博客
11-30 661
vue工程的浏览器小图标（缩略的网站标志）无法解析或修改的问题
网站favicon图标查看、制作及使用方法总结
jackie_bobo的博客
11-05 2462
网站favicon图标查看、制作及使用方法总结 favicon图标介绍 favicon查看方法 网站favicon制作方法 favicon icon图标使用方法 favicon图标介绍： 收藏夹图标就是出现在浏览器地址栏左侧的那个小图标。收藏夹图标，也作网站头像。当然，这不仅仅是收藏夹图标的全部，根据浏览器的不同，收藏夹图标显示也有所区别：在大多数主流浏览器如FireFox和Internet E
网站的favicon详解
webdev
08-22 212
一、使用方法 做个ico图标，命名为favicon.ico，把它传到你的页面下面。 并在相应的页面里加上代码在页面&lt;heah&gt;&lt;/heah&gt;之间加： &lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /&gt; 二、ico图标做法： 1.在线生成favicon.ico地址:http..
如何拿网站的favicon.ico
HoeWang的博客
02-26 1598
一般的方法是直接在该网站的网址后面加上/favicon.ico就可以直接打开这张图片
laravel-favicon：根据您的环境设置创建动态图标
02-03
Laravel Favicon 根据您的环境设置创建动态图标。 Laravel套件开发 ...您可以完全自定义要为网站图标生成启用的环境，以及将使用的字体和颜色。 要修改默认值，请使用以下方法发布程序包配置文件： php arti
Z-BlogPHP博客学习SEM网站模板 v1.2
12-03
Z-BlogPHP博客学习SEM网站模板是一个专门为Z-BlogPHP博客系统进行设计的...后台主题配置可以修改网站logo和网站favicon ico图标，不限制格式； 2.网站后台配置可以自定义网站首页关键词、描述内容，添加备案号和统计
favicon-cheat-sheet：针对favicon尺寸类型的强迫症备忘单。 请贡献！ （注意：当我学习有关网站图标最佳做法的新知识时，可能会不断变化。）
02-22
网站图标备忘单 一个痛苦的备忘单，适合收藏夹大小/类型。 编译自： <-特别感谢 <-特别感谢 HTML 基本 对于主要的网站图标本身，最好是跨浏览器兼容性而不使用任何HTML。 只需将文件命名为favicon.ico并将...
Z-BlogPHP博客学习SEM网站模板 v1.3
10-23
后台主题配置可以修改网站logo和网站favicon ico图标，不限制格式；2.网站后台配置可以自定义网站首页关键词、描述内容，添加备案号和统计代码；3.多说可以使用插件，也可以自己添加修改代码；（系统版样式稍大，但...
如何给网站设置favicon.ico图标
热门推荐
赵天铭的博客
06-28 5万+
favicon.ico是什么？ 所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。 favicon.ico是一个网站必要的吗？ 不是必要的，但是web服务器在网站加载时都会请求favicon.ico这个文件，如果不存在就会报404错误，并且会记录到错误日志中，所以最好的设置。 favicon.ico怎么...
网站的favicon怎样找
Legend的博客
12-03 716
我们有时会发现网站的小图标像这样的，一般都会在网站的根部如取百度的favicon可以在https://www.baidu.com/favicon.ico
下载网站 favicon 图标的 3 种方法
AI悦创·编程私教1v1
07-02 4180
你好，我是悦创。 在工作中，有时候我们会需要用到一些网站图标，但是浏览器上没有提供直接下载网站图标的方法，想要下载必须使用一些技巧，本文中就来分享下获取网站 favicon 的几种方法。 1.直接访问 favicon 地址获取 ico 文件 对于熟悉网站开发的人来说，相信很多人都知道网站的 favicon 是如何设置的，就是把一个文件名为 favicon.ico 的图片上传到网站根目录，然后浏览器就会自动识别其为网站的标签页的图标。 知道了这个后，我们就可以直接访问这个网址下载图标，格式为 域名/favic
获取网站 favicon.ico 的三种方法
香葱芝士面包
01-16 1万+
获取网站 favicon.ico的三种方法 方法一： 直接在网站网址后面加favicon.ico 例如：https://www.baidu.com/favicon.ico （有一些网站可能会直接跳转到网站页面，并不会显示图标文件） 方法二： F12或者右键查看网页源代码，然后再网页头部找到 ,链接指向即为favicon.ico的地址 例如：有道翻译网站的图标获取 <link rel="shortcut icon" href="http://shared.ydstatic.com/images/favi
ico的尺寸_Favicon.ico浏览器图标文件制作和正确使用
weixin_39796752的博客
10-25 1155
favicon图标介绍所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不仅仅是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在地...
favicon 尺寸问题
MichaelAn的博客
07-01 5184
Favicon dimensions 最近更新网站的 favicon.ico 图标文件，需要美女设计师重新设计图标，那么需要设计什么尺寸的图标呢？有没有固定的标准？ 百度上的解释是 又查了下其他的资料 在栈溢出找到了详细的解释：https://stackoverflow.com/questions/2268204/favicon-dimensions I have a favicon wit...
html--魔方
最新发布
stqer的博客
05-05 736
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> :root { --cube-size: 50vmin; --side-size: calc(var(--cube-size) /
写一个php获取网站favicon图标
06-11
获取网站的 favicon 可以通过以下步骤来实现： 1. 从网站根目录下的 `favicon.ico` 获取图标。 2. 如果 `favicon.ico` 不存在，可以通过解析网页代码中的 `<link>` 标签获取 favicon 地址。 下面是一个获取 favicon 的 PHP 代码示例： ```php <?php function getFavicon($url) { $favicon_url = ''; // 1. 从网站根目录下的 favicon.ico 获取图标 $favicon_url = $url . '/favicon.ico'; $headers = @get_headers($favicon_url); if ($headers && strpos($headers[0], '200')) { return $favicon_url; } // 2. 解析网页代码中的 <link> 标签获取 favicon 地址 $html = file_get_contents($url); $doc = new DOMDocument(); @$doc->loadHTML($html); $links = $doc->getElementsByTagName('link'); for ($i = 0; $i < $links->length; $i++) { $link = $links->item($i); if ($link->getAttribute('rel') == 'icon') { $favicon_url = $link->getAttribute('href'); if (strpos($favicon_url, '//') === 0) { $favicon_url = 'http:' . $favicon_url; } elseif (strpos($favicon_url, '/') === 0) { $favicon_url = $url . $favicon_url; } break; } } return $favicon_url; } ``` 使用方法： ```php $url = 'http://www.example.com'; $favicon_url = getFavicon($url); echo $favicon_url; ``` 注意：获取 favicon 图标可能会因为网络问题或者网站设置问题而失败，需要做好错误处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值