当前位置：文江博客话题详情

如何创建纯文本图标？

发布于 2024-08-02 07:53:03 字数 153 浏览 9 评论 0原文

有免费且简单的纯文本图标生成器吗？有许多在线网站图标生成器要求提供图像+文本来创建网站图标。我有兴趣只将文本放入我的图标中，可能可以选择不同的字体。有人知道一个好的在线纯文本图标生成器吗？

此外，任何不涉及付费软件的桌面解决方案也可以。有人知道这样的选项吗（我用的是MAC）？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寄居者 2024-08-09 07:53:03

唯一简单的解决方案是 http://antifavicon.com/

不是最漂亮的图标，但非常简单，具有复古的外观;)

回复收藏 0 原文

浅笑轻吟梦一曲 2024-08-09 07:53:03

我找到了一个完全符合您要求的网站，该网站地址是 https://favicon.io/。（见下图）

它可以生成 16X16 和 32x32 的 favicon 图像。它还可以生成 1024x1024 png 图像。您可以使用此网站从大图像生成各种favicon。

回复收藏 0 原文

再浓的妆也掩不了殇 2024-08-09 07:53:03

我不知道有什么好的在线工具，但为什么不直接启动 MacPaint 并在白色背景上放置一些黑色文本呢？您可以自行将结果保存为正确尺寸的图像，或将其上传到其中一个生成器以完成尺寸调整和格式设置。您的字体选择将非常多，因为您可以使用网络上提供的任何免费字体。

回复收藏 0 原文

時窥 2024-08-09 07:53:03

http://www.animatedfavicon.com

使用这个，您可以生成滚动文本的动画 gif（以及一个图标）。
它非常容易使用。
将 gif 重命名为 favicon.ico 并将其放入网页的根文件夹中。

对于“无图标”部分。只需使用 16px 白色 gif 作为“图标”

替代文本 http://www.animatedfavicon.com/ iconz/5d7acd6919b25b7651ee9bd9fefbbb69_extra_animated_favicon.gif

回复收藏 0 原文

深海蓝天 2024-08-09 07:53:03

http://faviconist.com/

它有漂亮的字体集合和简单的配色方案。

Faviconist 是一个 Favicon 生成器，但有一个不同之处：不需要图像
上传或编辑。只需提供一个字母（或另一个字符）并
配色方案，我们将为您制作图标。点击“保存网站图标”
保留它。

回复收藏 0 原文

奢华的一滴泪 2024-08-09 07:53:03

就我个人而言，我会启动一些图像编辑器并制作一个 16x16 png 图像，然后使用该 png 图像作为图标。它不一定是一个 ico 文件，即使它只是使用某些东西来转换它（我不知道什么软件可以在 mac 上执行此操作，也许是 gimp？）

无论它是什么图像，但如果你希望图像只是一封信或其他东西，你可以这样做。

回复收藏 0 原文

一紙繁鸢 2024-08-09 07:53:03

我认为这是最简单的方法：

打开微软的画图软件。
输入您想要的文本。
从“画图”菜单中，按“像素”“调整大小”至 16x16。
将图像另存为 .png 以获得清晰的背景。
转至 http://www.favicon-generator.org/
相应地遵循 favicon-generator 说明。
完毕！

回复收藏 0 原文

一杯敬自由 2024-08-09 07:53:03

假设您在网页上使用图标，您可以在页面中动态生成文本图标。我是这样做的。我这样做的方式是你必须给图标链接一个“id”，然后生成一个填充颜色和文本的画布。

下面是一个示例网页，显示了带有 id 的链接、javascript 函数以及正在调用的 javascript 函数。您可能需要调整 x 和 y 坐标以及字体大小才能使文本在图标中居中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--  Need this link in the head -->
    <link id="favicon-link" rel="icon" type="image/x-icon" href="">
    <!--------------------------------->
    <title>Document</title>
</head>
<body>
    <p>You document here</p>
    <script>
        //The function to make the favicon.
        function makeFavicon(letters, color, backgroundColor, fontSizeInPixels, x, y) {
            //put this in head of html document
            //<link id="favicon-link" rel="icon" type="image/x-icon" href="">
            let canvas = document.createElement('canvas');
            canvas.width = 16;
            canvas.height = 16;

            let ctx = canvas.getContext('2d');
            ctx.fillStyle = backgroundColor;
            ctx.fillRect(0, 0, 16, 16);

            let ctx2 = canvas.getContext("2d");
            ctx2.fillStyle = color;
            ctx2.font = "bold "+fontSizeInPixels.toString()+"px Arial";
            ctx2.fillText(letters, x, y);

            let link = document.getElementById("favicon-link");
            link.href = canvas.toDataURL("image/x-icon");
        }
        //Call the function to make the favicon
        makeFavicon("Yo", "white", "blue", 12, 1, 12);
    </script>
</body>
</html>

受以下因素影响的想法：
https://stackoverflow.com/users/906658/bengt，
如何在 JavaScript 中创建网站图标？

Assuming you are using the favicon on a webpage, you could generate a text favicon on the fly in your page. Here is how I have done that. They way I have done it is you have to give the favicon link an "id", then generate a canvas filled with colors and text.

Here is a sample webpage, showing the link with the id, the javascript function, and the javascript function being called. You may have to fiddle with the x and y coordinates and font size to get the text centered in the favicon.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--  Need this link in the head -->
    <link id="favicon-link" rel="icon" type="image/x-icon" href="">
    <!--------------------------------->
    <title>Document</title>
</head>
<body>
    <p>You document here</p>
    <script>
        //The function to make the favicon.
        function makeFavicon(letters, color, backgroundColor, fontSizeInPixels, x, y) {
            //put this in head of html document
            //<link id="favicon-link" rel="icon" type="image/x-icon" href="">
            let canvas = document.createElement('canvas');
            canvas.width = 16;
            canvas.height = 16;

            let ctx = canvas.getContext('2d');
            ctx.fillStyle = backgroundColor;
            ctx.fillRect(0, 0, 16, 16);

            let ctx2 = canvas.getContext("2d");
            ctx2.fillStyle = color;
            ctx2.font = "bold "+fontSizeInPixels.toString()+"px Arial";
            ctx2.fillText(letters, x, y);

            let link = document.getElementById("favicon-link");
            link.href = canvas.toDataURL("image/x-icon");
        }
        //Call the function to make the favicon
        makeFavicon("Yo", "white", "blue", 12, 1, 12);
    </script>
</body>
</html>

Ideas influenced by:
https://stackoverflow.com/users/906658/bengt,
How to create a favicon in javascript?

回复收藏 0 原文

~没有更多了~