LoginLogin
Nintendo shutting down 3DS + Wii U online services, see our post

favicon suggestion

Root / Site Discussion / [.]

TriforceOfKirbyCreated:
The console says [PROJECTNAME]OK after running a program. ?" is only used if uo're bad. EDIT: And ?" is horribly asymmetrical.

The console says [PROJECTNAME]OK after running a program. ?" is only used if uo're bad.
but you can't run OK as a command, and ?" is meant to have something after it.

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.
Well I guess it depends on where you want to measure from. I'm measuring from the centers of the shapes rather than the edges or corners (though measuring from the edge gives the same result in this case). Perhaps if I make a circumscribed ellipse around the 2 letters as the bounding box and center that it will be more visually centered?

The console says [PROJECTNAME]OK after running a program. ?" is only used if uo're bad.
but you can't run OK as a command, and ?" is meant to have something after it.
OK is used as a sort of welcome message in SmileBASIC as well as its predecessor Petit Computer. I think it's fairly fitting, as it's also used as a sort of welcome icon for the site, but I'm open to suggestions. ?" is a shorthand for PRINT "", I would personally prefer the latter as it's more readable. PRINT would also be a bit more iconic to the BASIC programming language as a whole. Keep in mind that the icon is displayed on the tab in most web browsers at 16x16 resolution; so there is little room for detail. I'm designing the icon in a 192x192 SVG with a grid size of 4. 3x3 of these grid cells would be displayed as 1 pixel in browser tabs.

For anyone who's curious on how I make the icon, I first code the SVG in a text editor. I then convert the SVG to other formats as most web browsers do not support SVG as a favicon (with the exception of Firefox). I convert the SVG to PNG format using this tool, which renders the SVG via JavaScript in your browser; so the resulting image looks exactly the same as in the browser that renders it (I'm using the latest stable version of Chromium for this). Next, I optimize the PNG with zopflipng to losslessly reduce file size with the following command:
Spoiler
zopflipng -ym --iterations=5000 favicon.png favicon.png
Next, I convert the PNG to a lossless WebP using cwebp with the following command:
Spoiler
cwebp -z 9 favicon.png -o favicon.webp
Finally, I convert the PNG to an ICO using icotool with the following command:
Spoiler
icotool -c -r favicon.png -o favicon.ico

Wouldn't it be faster to use an actual SVG editor?

Wouldn't it be faster to use an actual SVG editor?
A text editor IS an actual SVG editor, SVG is just XML after all; that aside, I'm not a visual person, I find coding it much easier. It's not much different than using a text editor for HTML rather than a visual editor.

Here's what centering it looks like with an elliptical bounding:
Spoiler

Don't use an elliptical boundary, just use the boundary defined by the edges of the letters.

Don't use an elliptical boundary, just use the boundary defined by the edges of the letters.
How's this?
Spoiler

Don't use an elliptical boundary, just use the boundary defined by the edges of the letters.
How's this?
Spoiler
That looks good.

Don't use an elliptical boundary, just use the boundary defined by the edges of the letters.
How's this?
Spoiler
That looks good.
Alright I'll render it and update the link on GitHub.

Yeah that's perfect I'll use it

Yeah that's perfect I'll use it
Alright link is updated now (may have to clear cache or something since it's the same URL).

I made one that works better at 16x16 pixels, using the "just give up and use a 15x15 pixel image with a shadow" strategy:
improved SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <circle cx="8.5" cy="8.5" r="7.5" fill="rgba(0,0,0,0.25)" /> <!-- shadow --> <circle cx="7.5" cy="7.5" r="6.5" stroke="rgb(0,150,136)" stroke-width="2" fill="black" /> <!-- circle --> <path d="M3 6h1v-1h2v1h1v3h-1v1h-2v-1h-1z M4 6h2v3h-2z" fill="white" fill-rule="evenodd" /> <!-- O --> <path d="M8 5h1v2h1v-1h1v-1h1v1h-1v1h-1v1h1v1h1v1h-1v-1h-1v-1h-1v2h-1z" fill="white" /> <!-- K --> </svg>

I made one that works better at 16x16 pixels, using the "just give up and use a 15x15 pixel image with a shadow" strategy:
SVG <!-- shadow --> <circle cx="8.5" cy="8.5" r="7.5" fill="rgba(0,0,0,0.25)" /> <!-- circle --> <circle cx="7.5" cy="7.5" r="6.5" stroke="#009688" stroke-width="2" fill="black" /> <!-- O --> <rect x="3" y="6" width="1" height="3" fill="white" /> <!-- left --> <rect x="4" y="5" width="2" height="1" fill="white" /> <!-- top --> <rect x="6" y="6" width="1" height="3" fill="white" /> <!-- right --> <rect x="4" y="9" width="2" height="1" fill="white" /> <!-- bottom --> <!-- K --> <rect x="8" y="5" width="1" height="5" fill="white" /> <!-- left --> <rect x="9" y="7" width="1" height="1" fill="white" /> <!-- middle --> <rect x="10" y="6" width="1" height="1" fill="white" /> <!-- upper middle --> <rect x="10" y="8" width="1" height="1" fill="white" /> <!-- lower middle --> <rect x="11" y="5" width="1" height="1" fill="white" /> <!-- upper right --> <rect x="11" y="9" width="1" height="1" fill="white" /> <!-- lower right -->
Wow that's... WEIRD. It looks good all small but I really don't like the drop shadow when it's big lol.

I made one that works better at 16x16 pixels, using the "just give up and use a 15x15 pixel image with a shadow" strategy:
SVG <!-- shadow --> <circle cx="8.5" cy="8.5" r="7.5" fill="rgba(0,0,0,0.25)" /> <!-- circle --> <circle cx="7.5" cy="7.5" r="6.5" stroke="#009688" stroke-width="2" fill="black" /> <!-- O --> <rect x="3" y="6" width="1" height="3" fill="white" /> <!-- left --> <rect x="4" y="5" width="2" height="1" fill="white" /> <!-- top --> <rect x="6" y="6" width="1" height="3" fill="white" /> <!-- right --> <rect x="4" y="9" width="2" height="1" fill="white" /> <!-- bottom --> <!-- K --> <rect x="8" y="5" width="1" height="5" fill="white" /> <!-- left --> <rect x="9" y="7" width="1" height="1" fill="white" /> <!-- middle --> <rect x="10" y="6" width="1" height="1" fill="white" /> <!-- upper middle --> <rect x="10" y="8" width="1" height="1" fill="white" /> <!-- lower middle --> <rect x="11" y="5" width="1" height="1" fill="white" /> <!-- upper right --> <rect x="11" y="9" width="1" height="1" fill="white" /> <!-- lower right -->
Wow that's... WEIRD. It looks good all small but I really don't like the drop shadow when it's big lol.
Something to keep in mind is that it will be displayed at large scales for desktop shortcuts (including mobile). I could go back to the original OK font in SmileBASIC for the text. I only made it larger and altered it because random said so lol. Could use a drop shadow filter rather than a translucent circle.

Original SmileBASIC font, soft drop shadow, stroke widths set to display at exactly 1px at 16x16:
SVG image
16x16 PNG image
SVG code
<defs>
  <filter id="shadow">
    <feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#000000" flood-opacity="0.2"/>
  </filter>
</defs>

<!-- Outer circle -->
<circle cx="96" cy="96" r="82" fill="#212121" stroke="#009688" stroke-width="12" filter="url(#shadow)"/>

<!-- OK -->
<g fill="#FFFFFF">
  <path d="m40 54h36v12h12v60h-12v12h-36v-12h-12v-60h12zm0 12v60h36v-60z"/>
  <path d="m96 54h12v36h12v-12h12v-12h12v-12h12v12h-12v12h-12v12h-12v12h12v12h12v12h12v12h-12v-12h-12v-12h-12v-12h-12v36h-12z"/>
</g>

I changed the "shadow" to the same color as the edge of the logo (with an opacity of 33%), so it looks a bit better. 16x16 PNG: SVG:
<svg viewBox="0 0 16 16">
 <g stroke="rgb(0,150,136)"> <!-- BORDER -->
  <line x1="7.5" y1="7.5" x2="8.5" y2="8.5" stroke-width="15" stroke-linecap="round" opacity="0.33" /> <!-- side -->
  <circle cx="7.5" cy="7.5" r="6.5" fill="black" stroke-width="2" /> <!-- circle --> 
 </g>
 <g fill="white"> <!-- TEXT -->
  <path d="M3 6h1v-1h2v1h1v3h-1v1h-2v-1h-1z M4 6h2v3h-2z" fill-rule="evenodd" /> <!-- O -->
  <path d="M8 5h1v2h1v-1h1v-1h1v1h-1v1h-1v1h1v1h1v1h-1v-1h-1v-1h-1v2h-1z" /> <!-- K -->
 </g>
</svg>
Keep in mind that this one is only meant to be displayed at 16x16. If possible, the current one (or some variant) should be used when displaying the logo at larger sizes. Trying to get a logo to look good at 16x16 pixels and 1000x1000 will just make it look worse.

I changed the "shadow" to the same color as the edge of the logo (with an opacity of 33%), so it looks a bit better. 16x16 PNG: SVG:
<svg viewBox="0 0 16 16">
 <g stroke="rgb(0,150,136)"> <!-- BORDER -->
  <line x1="7.5" y1="7.5" x2="8.5" y2="8.5" stroke-width="15" stroke-linecap="round" opacity="0.33" /> <!-- side -->
  <circle cx="7.5" cy="7.5" r="6.5" fill="black" stroke-width="2" /> <!-- circle --> 
 </g>
 <g fill="white"> <!-- TEXT -->
  <path d="M3 6h1v-1h2v1h1v3h-1v1h-2v-1h-1z M4 6h2v3h-2z" fill-rule="evenodd" /> <!-- O -->
  <path d="M8 5h1v2h1v-1h1v-1h1v1h-1v1h-1v1h1v1h1v1h-1v-1h-1v-1h-1v2h-1z" /> <!-- K -->
 </g>
</svg>
Keep in mind that this one is only meant to be displayed at 16x16. If possible, the current one (or some variant) should be used when displaying the logo at larger sizes. Trying to get a logo to look good at 16x16 pixels and 1000x1000 will just make it look worse.
Consistency is also important. The icon shouldn't really look different at different sizes. Nothing really uses 1000x1000, the largest favicon size that I know of is 192x192 used by Android Chrome at 4.0 screen density. I would think it wouldn't be too difficult to achieve an icon that looks good in the range of 16x16 to 192x192.