? favicon suggestion (Page 2) ● SmileBASIC Source Forums

Sign In

Register
*Usernames are case-sensitive
Forgot my password

favicon suggestion

1 2 3
  • #21 ✎ 1583 12Me21 Head Admin Second Year My account is over 2 years old Website Syntax Highlighter Received for creating the code syntax highlighter on SBS Night Person I like the quiet night and sleep late. Express Yourself The console says [PROJECTNAME]OK after running a program. ?" is only used if uo're bad. EDIT: And ?" is horribly asymmetrical. Posted Edited by 12Me21
  • #22 ✎ 408 kenchic Avatar Taboo I didn't change my avatar for 180 days Website Third Year My account is over 3 years old Website Good Page Hidden Achievements
    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.
    Posted
  • #23 ✎ 27 TriforceOfKirby
    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?
    Posted
  • #24 ✎ 27 TriforceOfKirby
    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.
    Posted
  • #25 ✎ 27 TriforceOfKirby 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: zopflipng -ym --iterations=5000 favicon.png favicon.png Next, I convert the PNG to a lossless WebP using cwebp with the following command: cwebp -z 9 favicon.png -o favicon.webp Finally, I convert the PNG to an ICO using icotool with the following command: icotool -c -r favicon.png -o favicon.ico Posted Edited by TriforceOfKirby
  • #26 ✎ 1583 12Me21 Head Admin Second Year My account is over 2 years old Website Syntax Highlighter Received for creating the code syntax highlighter on SBS Night Person I like the quiet night and sleep late. Express Yourself Wouldn't it be faster to use an actual SVG editor? Posted
  • #27 ✎ 27 TriforceOfKirby
    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.
    Posted
  • #28 ✎ 27 TriforceOfKirby Here's what centering it looks like with an elliptical bounding: Posted
  • #29 ✎ 1583 12Me21 Head Admin Second Year My account is over 2 years old Website Syntax Highlighter Received for creating the code syntax highlighter on SBS Night Person I like the quiet night and sleep late. Express Yourself Don't use an elliptical boundary, just use the boundary defined by the edges of the letters. Posted
  • #30 ✎ 27 TriforceOfKirby
    Don't use an elliptical boundary, just use the boundary defined by the edges of the letters.
    How's this?
    Posted
  • #31 ✎ 1583 12Me21 Head Admin Second Year My account is over 2 years old Website Syntax Highlighter Received for creating the code syntax highlighter on SBS Night Person I like the quiet night and sleep late. Express Yourself
    Don't use an elliptical boundary, just use the boundary defined by the edges of the letters.
    How's this?
    That looks good.
    Posted
  • #32 ✎ 27 TriforceOfKirby
    Don't use an elliptical boundary, just use the boundary defined by the edges of the letters.
    How's this?
    That looks good.
    Alright I'll render it and update the link on GitHub.
    Posted
  • #33 ✎ 1065 randomous Owner Robot Hidden Easter Eggs Second Year My account is over 2 years old Website Drawing I like to draw! Hobbies Yeah that's perfect I'll use it Posted
  • #34 ✎ 27 TriforceOfKirby
    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).
    Posted
  • #35 ✎ 1583 12Me21 Head Admin Second Year My account is over 2 years old Website Syntax Highlighter Received for creating the code syntax highlighter on SBS Night Person I like the quiet night and sleep late. Express Yourself 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 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> Posted Edited by 12Me21
  • #36 ✎ 1065 randomous Owner Robot Hidden Easter Eggs Second Year My account is over 2 years old Website Drawing I like to draw! Hobbies
    I made one that works better at 16x16 pixels, using the "just give up and use a 15x15 pixel image with a shadow" strategy: <!-- 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.
    Posted
  • #37 ✎ 27 TriforceOfKirby
    I made one that works better at 16x16 pixels, using the "just give up and use a 15x15 pixel image with a shadow" strategy: <!-- 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.
    Posted
  • #38 ✎ 27 TriforceOfKirby Original SmileBASIC font, soft drop shadow, stroke widths set to display at exactly 1px at 16x16: <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> Posted Edited by TriforceOfKirby
  • #39 ✎ 1583 12Me21 Head Admin Second Year My account is over 2 years old Website Syntax Highlighter Received for creating the code syntax highlighter on SBS Night Person I like the quiet night and sleep late. Express Yourself 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. Posted Edited by 12Me21
  • #40 ✎ 27 TriforceOfKirby
    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.
    Posted Edited by TriforceOfKirby
1 2 3