favicon suggestion
Root / Site Discussion / [.]
TriforceOfKirbyCreated:
Just something I created in my spare time as a replacement favicon.
Download
Alternative command-line download via curl+tar:
curl 'https://brandon-schumann.github.io/images/smilebasic-source/favicon.tar.xz' | tar xJHTML:
<link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg"> <link rel="icon" type="image/webp" sizes="192x192" href="/favicon.webp"> <link rel="icon" type="image/png" sizes="192x192" href="/favicon.png">Browser support information:
- SVG: Firefox and Linux desktops.
- WebP: Chrome and Opera (experimental support in Firefox and Safari)
- PNG: Universal
- ICO: Universal (usually only used as a last resort. linked automatically when placed at /favicon.ico; useful for non-HTML pages)
Take your time, it’s only a minor change anyways; Just a bit more SmileBASICy.
Wow when is it gonna show up? It's definitely there: http://direct.smilebasicsource.com/main/favicon.ico
I think it would look better if you moved the O and K closer together, and made them bigger. That way there isn't so much empty space at the top and bottom.The icon was originally exactly the same font as in SmileBASIC (including letter spacing). Random suggested making each pixel larger while retaining the same position, which is what the icon looks like now. I’ll try your suggestion and see how it looks.
Small issue with the current markup:
<link rel="icon" type="image/x-icon" sizes="16x16 24x24 32x32 48x48 64x64 96x96 128x128 192x192 256x256" href="/favicon.ico">
That ICO doesn’t have all those sizes, just the 192x192; so you’re lying to browsers (lol). I decided to only include the 1 size since browsers can scale images perfectly fine on their own, and having a lot of pre-rendered sizes creates a lot of bulk.
The ICO really doesn’t need to be linked anyways, as /favicon.ico is automatically found as part of the specification , and the majority of browsers prefer a PNG over the old ICO format; only using the ICO format favicon as a last resort.
I’m still messing around with tweaking the sizing and spacing to make it look better at smaller scales.
The bookmark icon on iOS doesn't seem to be changed. Maybe it's just my device, but I don't know.You may have to recreate the bookmark and/or clear the browser cache.
I updated the front post with a new icon:
I think it looks a bit better at small sizes than the previous one.
Spoiler
Yeah, the K is hitting the edge while the O is closer to the middle, plz fixI updated the front post with a new icon:But now the OK is off center and it's destroying my soul.I think it looks a bit better at small sizes than the previous one.Spoiler
It's actually perfectly centered believe it or not (maybe it's just an optical thing).I updated the front post with a new icon:But now the OK is off center and it's destroying my soul.I think it looks a bit better at small sizes than the previous one.Spoiler
Spoiler
O is exactly as close as K is to the middle. I could move the O and K closer together so that it's not touching the edge.Yeah, the K is hitting the edge while the O is closer to the middle, plz fixI updated the front post with a new icon:But now the OK is off center and it's destroying my soul.I think it looks a bit better at small sizes than the previous one.Spoiler
KerningShould I make the O off center?
The distance between letters (or between letters and other objects) isn't just the distance between the bounding boxes, it depends on the actual shape. If you measure at the corners (for example), the O is actually further away from the edge than the K. You don't have to think of it as making the O off center.