search

GoogleChromeLabs / houdini.how

A community-driven gathering place for CSS Houdini worklets and resources.
https://houdini.how
Apache License 2.0
152 stars 39 forks source link

Add Favicon generated from demo #139

Open ConradSollitt opened 3 years ago

ConradSollitt commented 3 years ago

Just an idea - I think it would be nice to have a favicon generated from one of the demos. I noticed when going through the code it uses an empty favicon:

https://github.com/GoogleChromeLabs/houdini.how/blob/main/public/index.html

<link rel="icon" href="data:,">

Here is a mockup using confetti demo.

image

Having a custom favicon is practical as well. When working with local build and comparing with main site I had many tabs open and had a hard time (well few seconds of clicking) to find the site because I had other sites open without a favicon at the time as well. And if it had the standard web.dev favicon it might get mixed with other ChromeLab sites. Granted maybe I have to many tabs open at the same time.

ConradSollitt commented 3 years ago

Last mockup of the idea - same as above but with a border:

image

dollyjain51099 commented 3 years ago

I would like to work on this issue, please assign it to me!

nucliweb commented 3 years ago

Feel free @dollyjain51099 to send your proposal 😊

dollyjain51099 commented 3 years ago

Should I design the favicon similar to the one displayed above with border, if not can you brief me!

ConradSollitt commented 3 years ago

Hi @dollyjain51099

My advice would be to create several different icons from your favorite demos and see what you like best. Then submit that as your proposal. You can try with and without border to see what you like the best as well. I'm sure there are many more strategies for icons but 3 that come to the top of my mind would be:

For the one I created I simply played around the confetti demo, took a print screen (screenshot), and cropped it to 16x16 pixels. If you are on Windows I would recommend the free and widely used program Paint.net https://www.getpaint.net/ which is what I used. On Mac for reference my icon/graphic program of choice is Sketch App https://www.sketch.com/ but it's not free and only works on Mac. Adobe programs work great too but only if you already have a copy (or plan on actively using it) as you wouldn't want to pay that much to create a simple icon. Of course there are many many more programs out there.

At a minimum you would want to create a 16 by 16 pixel icon probably in both *.png and then converted to *.ico format.

Although since your willing and would like to work on this I would recommend three (or four) icons which will cover the vast majority of all devices as of late 2020:

Once the icons are created it looks like this in the HTML (page location in my initial issue):

<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="196x196" href="favicon-196x196.png">

To convert 16x16 and 32x32 files from ico to png there are many websites available that you can google or locally you can use the widely used program ImageMagick (free for all OS's) https://imagemagick.org/index.php

# With newer versions of ImageMagick the following should work:

# Combine 16x16 and 32x32 PNGs to a single [favicon.ico] file
convert favicon-16x16.png favicon-32x32.png favicon.ico

# Resize [image.png] to a [favicon.ico] with 3 different sizes [16x16, 32x32, 48x48)
convert image.png -define icon:auto-resize=16,32,48 favicon.ico

# Resize a single image to another since size
convert image.png -resize 196x196 favicon-196x196.png

If you end up creating Apple (180px) and Android Icons (196px) then you might want to try the demo you choose with 3 different large icons (example below I picked the circles demo and cropped it to a selection of 180x180 after trying different options on the demo).

image

You could even just create one large image (196x196) then scale it down to the other sizes using ImageMagick; that usually works well and looks nice.

I know this is a lot of info but hopefully it helps and possibly you can learn something from it. If you have any questions respond in the issue as I've created a lot of icons over the years so I can help with your questions. 😄

Favicon Resources and Info Note - Some of these are dated and include older devices as the icon sizes have typically changed every few years but overall the content is still relevant and good for learning.

dollyjain51099 commented 3 years ago

Hi @dollyjain51099

My advice would be to create several different icons from your favorite demos and see what you like best. Then submit that as your proposal. You can try with and without border to see what you like the best as well. I'm sure there are many more strategies for icons but 3 that come to the top of my mind would be:

  • Larger Icon, Logo, or Photo Image scaled down to the favicon size (probably the most common)
  • Something highly engineered to fix exactly 16x16 and 32x32 pixels
  • Something more along the lines of Art, and for this site I feel the Art generalization is good for this site because it's a site showcasing Art created with a new CSS and JS Technology.

For the one I created I simply played around the confetti demo, took a print screen (screenshot), and cropped it to 16x16 pixels. If you are on Windows I would recommend the free and widely used program Paint.net https://www.getpaint.net/ which is what I used. On Mac for reference my icon/graphic program of choice is Sketch App https://www.sketch.com/ but it's not free and only works on Mac. Adobe programs work great too but only if you already have a copy (or plan on actively using it) as you wouldn't want to pay that much to create a simple icon. Of course there are many many more programs out there.

At a minimum you would want to create a 16 by 16 pixel icon probably in both *.png and then converted to *.ico format.

Although since your willing and would like to work on this I would recommend three (or four) icons which will cover the vast majority of all devices as of late 2020:

  • favicon.ico - Good to include both 16x16 pixel and 32x32 pixel icons. At least include the 16x16 version. PNG for the main favicon also works but generally it's a good idea to include a favicon.ico file in the root of the site's public directory because Web Browsers will request this file if no favicon is specified.
  • apple-touch-icon.png - 180x180 - This will cover the vast majority of iPhones and iPads - anything purchased or updated within the past 5 years or longer.
  • favicon-196x196.png - 196x196 as indicated by the file name. This will cover most Android Devices. The name of the file doesn't matter but for clarity I would recommend this name.
  • If a Progressive Web App (PWA) is being created then a 512x512 icon is also needed but currently this site is not a PWA.

Once the icons are created it looks like this in the HTML (page location in my initial issue):

<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="196x196" href="favicon-196x196.png">

To convert 16x16 and 32x32 files from ico to png there are many websites available that you can google or locally you can use the widely used program ImageMagick (free for all OS's) https://imagemagick.org/index.php

# With newer versions of ImageMagick the following should work:

# Combine 16x16 and 32x32 PNGs to a single [favicon.ico] file
convert favicon-16x16.png favicon-32x32.png favicon.ico

# Resize [image.png] to a [favicon.ico] with 3 different sizes [16x16, 32x32, 48x48)
convert image.png -define icon:auto-resize=16,32,48 favicon.ico

# Resize a single image to another since size
convert image.png -resize 196x196 favicon-196x196.png

If you end up creating Apple (180px) and Android Icons (196px) then you might want to try the demo you choose with 3 different large icons (example below I picked the circles demo and cropped it to a selection of 180x180 after trying different options on the demo).

image

You could even just create one large image (196x196) then scale it down to the other sizes using ImageMagick; that usually works well and looks nice.

I know this is a lot of info but hopefully it helps and possibly you can learn something from it. If you have any questions respond in the issue as I've created a lot of icons over the years so I can help with your questions. 😄

Favicon Resources and Info Note - Some of these are dated and include older devices as the icon sizes have typically changed every few years but overall the content is still relevant and good for learning.

Thank you for the help! I will do my best to present you the expected output.

dollyjain51099 commented 3 years ago

fav_demo I have designed the favicon, kindly comment if the design looks good!