search

gbowne1 / codebooker

This is a book recommendation app created with React 18.2 and MUI for coders/programmers looking for reccomendations to books on programming/coding to read
MIT License
31 stars 57 forks source link

Refactor the CodeBooker logo #200

Closed gbowne1 closed 1 year ago

gbowne1 commented 1 year ago

The CodeBooker Logo I intend to use is at src/assets/codebooker.png

It can be used in the app.

I'm no good with any of the image programs like GIMP

It has a watermarked background that says LOGO. I don't know if the background could be extracted from the logo .png?

I am sure the logo could look a lot nicer and more useable.

The icons need to be 192x192 and 512x512. The browser favicon nedds to be 16x16 and 32x32. They could be separate images.

BlackBond06 commented 1 year ago

@gbowne1 I've assigned myself this issue.

BlackBond06 commented 1 year ago

@gbowne1 I have a few questions to ask concerning this issue:

  1. You suggested using 192 x 192 and 512 x 512 for the logo size. Which size should we use from either of the two ? P.S: I have tested both sizes and have found size 192 x 192 the most fitting.
  2. You also spoke about using favicon but the app dosent have a favicon icon. what do we do about that ?
gbowne1 commented 1 year ago

@BlackBond06

From my limited research on compatibility.

Different browsers and devices require different sizes of these sorts of graphics, however these sizes stood out to me to be the most required.

It also suggested the use of .png vs .svg

Google Lighthouse & Google Pagespeed also suggested it wanted a specific size for SEO, etc.

The icons and images will have to be also added to the manifest.json file as well. It is still the default.

192x192 does work with most browsers. But we should also include 512x512 just to be sure.

As for the .ico file, I am not sure.

gbowne1 commented 1 year ago

Oh and the current favicon is the default React one in the public folder.

BlackBond06 commented 1 year ago

@BlackBond06

From my limited research on compatibility.

Different browsers and devices require different sizes of these sorts of graphics, however these sizes stood out to me to be the most required.

It also suggested the use of .png vs .svg

Google Lighthouse & Google Pagespeed also suggested it wanted a specific size for SEO, etc.

The icons and images will have to be also added to the manifest.json file as well. It is still the default.

192x192 does work with most browsers. But we should also include 512x512 just to be sure.

As for the .ico file, I am not sure.

Yea. I totally agree. But we have to agree on one of the two sizes to use tho. I noticed that size 512 x 512 doesn't fit with the current height of the apps navbar.

gbowne1 commented 1 year ago

Yeah, the bigger one may have to be used in a media query, but that would take some more browser / device testing. For now we can use the 192x192 one.

I forget how to do icon sizing in a media query. Might go ask perplexity.ai about this.

I think some browsers and devices may automatically resize. I dont have great information on this.

gbowne1 commented 1 year ago

It might be different if its a font based icon... but...

/* Define a media query for smaller screens */ 

@media screen and (max-width: 600px) { /* Adjust the max-width of the image for smaller screens */ 

img {

     max-width: 100%; /* Ensure the image is responsive */

     height: auto; /* Allow the image to scale proportionally */ 
}
}
BlackBond06 commented 1 year ago

Yea, for really large devices we could use the 512 x 512, otherwise the 192 x 192 fits well with the current height of the app's navbar. Now, what do we do about the favicon for the app ? can I go ahead and create something and the share with you to see if you like it ?

gbowne1 commented 1 year ago

Sure, you can always share ideas etc with myself, @LOGESH-B and collaborators.