网页网站您现在的位置是:首页 > 博客日志 > 网页网站

如何使用 Emoji 表情符号作为网页 Favicon图标

<a href='mailto:'>微wx笑</a>的头像微wx笑2021-06-06 15:18:15网页网站人已围观关键字: 网页  Emoji  Favicon  

本文介绍如何将 svg 格式的 Emoji 图案,作为网页的 Favicon 图标。

原文:https://css-tricks.com/emojis-as-favicons/ LyL编程技术_踩坑日志_进阶指南_无知人生

想出了一个天才的点子,用表情符号作为图标。这个想法直到最近才成为可能,因为浏览器已经开始支持图标的 SVG。在 SVG < text > 元素中包含一个表情符号,并使用它作为图标。LyL编程技术_踩坑日志_进阶指南_无知人生

现在所有的现代浏览器都支持 SVG 图标,这里有如何将任何表情符号转换为图标!LyL编程技术_踩坑日志_进阶指南_无知人生

下面介绍如何将任何表情符号转换为favicon.svgLyL编程技术_踩坑日志_进阶指南_无知人生

<svg xmlns="https://t.co/TJalgdayix" viewBox="0 0 100 100">
<text y=".9em" font-size="90">💩</text>
</svg>

对于想快速构建应用程序的人来说这很有用,当你不用费心设计一个favicon!LyL编程技术_踩坑日志_进阶指南_无知人生


LyL编程技术_踩坑日志_进阶指南_无知人生

这里有一个常用的单行代码:LyL编程技术_踩坑日志_进阶指南_无知人生

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎯</text></svg>">

示范项目

我做了一个小小的演示项目,这样你就可以在工作中看到它。查看已部署的项目以实际查看图标。这在 Firefox 和 Chrome 中都适用。Safari 只在 SVG 中做那些“蒙版”风格的图标,所以在那里不起作用。也许它可以呢?我不知道,我让你试试。LyL编程技术_踩坑日志_进阶指南_无知人生

如果你想看的话,这里有一段视频。LyL编程技术_踩坑日志_进阶指南_无知人生

image.pngLyL编程技术_踩坑日志_进阶指南_无知人生

相关概念

  • Ada Rose Cannon added a badge that can increment.LyL编程技术_踩坑日志_进阶指南_无知人生

  • Taylor Hunt dropped some code on how he uses the current Git branch name to create an SVG favicon (related to the “different favicon for development” idea)LyL编程技术_踩坑日志_进阶指南_无知人生

  • You could duck a prefers-color-scheme media query in the SVG if you wanted to do something special for dark mode (although emojis generally work well on any background)LyL编程技术_踩坑日志_进阶指南_无知人生


LyL编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()