Add favicon

[KaratasFurkan]

Hi, I recently saw this issue and I was also wishing to have a favicon, mostly to distinguish ccbv.co.uk and localhost :smile:

So I created and added a favicon, nothing fancy but I hope you like it :slightly_smiling_face:

[KaratasFurkan]

Hi @meshy , glad you liked it!

I'm working on it :+1: we may still need the manifest file, though. It's needed by android devices as far as I understand but I need to research further.

This is my first time setting up a favicon, and I'm surprised it's not a straightforward task :smile:. It's been a good practice, though, I'm learning the best practices of favicons :grin:

[meshy]

Yes, favicons are tricky! Thankfully I think using an SVG should cut out most of the hassle on most major browsers with the exception of Safari, which I'm happy to use a single PNG for.

I could be wrong, but I believe the manifest file might only be required on Android when setting up a link to the website as an icon on the homescreen, and I suspect that's fairly rare for this site. I think we can skip it for now, unless you find otherwise.

[KaratasFurkan]

Thanks for the comments @meshy, I agree about the android part. I'm creating the svg icon, I'll update the PR accordingly :+1:

[KaratasFurkan]

Hey @meshy, the SVG icon is ready. I also updated the font to Iosevka, since it's characters are taller, the text is more visible. Also, it is my favorite font for coding :smile:

Here is the new version for a quick check:

I could be wrong, but I believe the manifest file might only be required on Android when setting up a link to the website as an icon on the homescreen, and I suspect that's fairly rare for this site. I think we can skip it for now, unless you find otherwise.

Android & iOS homescreen icons are removed as you suggested :+1:

[KaratasFurkan]

As a reference, this is the simpler version of the SVG code I used to generate this image:

<svg height="512" width="512" xmlns="http://www.w3.org/2000/svg">
  <rect width="512" height="512" rx="20" ry="20" fill="#092E20" />
  <text font-family="Iosevka" font-weight="bold" font-size="300" textLength="515" x="1" y="366">
    <tspan fill="#CFB955">C</tspan><tspan fill="#FFF">CBV</tspan>
  </text>
</svg>

Since it's not supported on many places this way, I converted the rect & text elements to paths with Inkscape. So that's how I created the final version.

[meshy]

Thank you!