Can anyone provide insights on the quality of logos and icons used in professional websites? I often create logos and icons using Illustrator, but when comparing them to icons on websites like those shown in the provided image and links, mine appear blurry with unclear edges.
https://i.sstatic.net/irjvd.png
- My own Blog showcases poorly made icons - the logo and menu icon are both PNG images.
- The Entrepreneur website boasts crisp menu and search icons. Upon inspecting their mobile site, it seems they use pseudo elements for these icons. How does this technique contribute to higher quality?
- A similar situation can be seen on the Times of India website, where the menu icon is created using an hr tag. However, the search icon uses a pseudo element, which adds an element of mystery to its quality.
- Furthermore, sites like Business Insider employ a single image for all icons. How is this achieved, and what advantages does it offer over individual images? By analyzing the URLs for the menu and search icons on these sites, a deeper understanding of their techniques may be gained.
I am keen to learn more about how these icons render and why the quality of my own logos/icons falls short. Should I refrain from using images altogether? Despite numerous attempts at exporting from Illustrator with the correct dimensions, the quality still disappoints. For instance, the middle horizontal bar on my blog's mobile site appears blurred despite looking sharp initially. What could be causing this discrepancy?
If possible, I would appreciate any relevant resources or links that delve into these topics further. Thank you.