-1

This is mainly a question about the quality of logos/icons used in Websites. I create logos/icons using Illustrator but when I see icons on professional websites (see image and links), they look crisp like a text, with no blurriness. The edges are very clear. For example, please see this image, especially the search icon and the menu list icon:

enter image description here

  1. This is my own Blog that has bad icons, the Logo and the Menu icon. Both of them are PNG images.
  2. This is Entrepreneur website with awesome menu icon and search icon. If you check the Inspect Element for mobile site, you'll see that the search icon and menu icon are not images (I don't know actually the reality). It is using a pseudo element. How does it work? Maybe this has something to do with quality.
  3. Same is true with TimeofIndia website. Here the menu icon is made using hr tag, so it's obviously great, but still the search icon is beyond understanding as it is using a pseudo element.
  4. And another scenario is related to this Business Insider website's technique. I've seen it at most of the websites, especially Facebook like sites. They use a single image for all icons. How's it possible? If you don't understand please visit this website and check the URL of the menu and search icon's image. How's it done?

So first I would like to know how these things work? How these icons render?

Secondly why I'm not getting the quality like them? Should I stop using images like them? I'm asking this because I've tried exporting in many ways using Illustrator, with same dimensions as required, but still quality sucks. If you can see, in my own blog's (Blog) mobile site, the middle horizontal bar is blurred despite the original image looks awesome before upload. Why is that?

I think these are too many questions. I would appreciate if you can provide suitable links to understand these things fully, if explaining them here is not easy.

Thank you.

  • Can I improve this question to remove 1 downvote? – Vikas Jan 25 at 8:40
1
  1. Use icon fonts for atleast the hamburger menu
  2. Since im not in India i get redirected to non-indian site so hard to say.
  3. it is a icon font it is defined thus:

    .s::before {
        color: #fff;
        content: "";
        font: bold 25px/1 "Genericons";
        position: relative;
    }
    

    To work it depends on the font Genericons

  4. They are cropped by css instructions read more here: css-sprites

  • 3. They have used '\f400' as content. What does it mean? – Vikas Sep 24 '16 at 4:26
  • Also, I tried to find on Google about Icon fonts but I couldn't find satisfactory results, especially this pseudo element technique. Do you know any site for this? – Vikas Sep 24 '16 at 7:07
  • @VikasKumar '\f400' is just the name of the character in the font just like 'a' or 'b' it just has no symbol associated with it in most fonts. The range \e000-\f8ff is one of three so called private use areas, meaning theres no formal definition of what that character is representing but the maker of the font can define whatever they want. Examples of its use can be found for example in fontawesome that contains lots of standard web icons as font entries in the private use area. – joojaa Sep 24 '16 at 7:21
  • @VikasKumar and here is the list of font avesomes characters and what location they hold: fontawesome.io/cheatsheet – joojaa Sep 24 '16 at 7:25
  • I tried to print some of the symbols but they didn't render. I tried to put content as '\f400' and '' but both didn't work. – Vikas Sep 24 '16 at 7:52
4

These sites are using vectors. When you export as png you can maintain a lot of quality, but with an svg (vector) you maintain the full integrity of the graphic.

From AI, you can export to svg directly. If you intend to include text in the graphic, you need to "expand" the text to capture the outlines of the letters.

  • What about those pseudo concepts and that single image for all icons? Could you please add this to your answer? – Vikas Sep 24 '16 at 4:23
  • Are you sure all of them are using Vectors for search icons? Did you read the answer below? – Vikas Sep 24 '16 at 4:28
  • The comments about the font icons are correct. This pseudo element you are asking about is just part of how they load. As for the single image for all icons, this is achieved with sprite sheets. – Ryanthehouse Sep 24 '16 at 12:11
  • If you have knowledge about Front end technologies, could you please look at this problem? It's related to SVG. Something is not working: stackoverflow.com/questions/39678361/… – Vikas Sep 25 '16 at 6:45
  • Ah, looks like you got an answer. Let me know if you still need help. – Ryanthehouse Sep 25 '16 at 14:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.