Is there a free and easy text-only favicon generator? There are numerous online favicon generators asking for a image+text to create a favicon. I am interested in putting only text into my favicon, probably with a choice of different fonts. Anybody knows of a a good online text-only favicon generator?
Also, any desktop solution that does not involve paid software will also do. Does anybody know of such an option (I use a MAC)?
A simple only solution is http://antifavicon.com/
Not the prettiest favicons, but very simple, with a retro look ;)
I have found one site which exactly does what you want, the site address is https://favicon.io/. (see the image below)
It can generate 16X16 and 32x32 favicon image. It can also generate a 1024x1024 png image. You can use this site to generate various favicon from the big image.
I don't know a good online one, but why not just boot up MacPaint and put some black text on a white background? You could save the result as an image in the right size yourself, or upload it to one of the generators to get the sizing and formatting done for you. Your font choice would be quite large, as you could use any of the free fonts available on the web.
http://www.animatedfavicon.com
With this one you can generate an animated gif of a scrolling text (and an icon). It's very easy to use. Rename the gif to favicon.ico and put it in the root folder of your webpage.
For the "no icon" part. Simply use a 16px white gif as "icon"
It has nice font collection and simple color scheme.
Faviconist is a Favicon generator with a difference: No need for image uploading or editing. Just provide a letter (or another character) and a color scheme, and we'll make the icon for you. Click "Save Favicon" to keep it.
Personally, I would just boot up some image editor and make a 16x16 png image, then use the png image as the favicon. It doesn't have to be an ico file, and even if it does just convert it using something (I don't know what software would do this on a mac, gimp maybe?)
No matter what it's going to be an image, but if you want the image to just be a letter or something you can do that.
I think this is the easiest way:
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?
