How to make cool favicons

15,997 views

Published on

A really short introduction to the basic elements on how to created cool favicons. 21 pages with minimal text and examples of big, small and famous brands.

Published in: Design, Technology
2 Comments
40 Likes
Statistics
Notes
No Downloads
Views
Total views
15,997
On SlideShare
0
From Embeds
0
Number of Embeds
1,834
Actions
Shares
0
Downloads
452
Comments
2
Likes
40
Embeds 0
No embeds

No notes for slide

How to make cool favicons

  1. IDFCTRY.COM How to make cool Favicons A short introDUCTION.
  2. IDFCTRY.COM I am Occupation : CREATIVE AT IDFCTRY.COM Education : The Dutch Academy of Art and Design Rietveld Academie Amsterdam. Philosophy : Everything is a chance. Thinks : Reality is chaos Naïeve belief : Everybody is creative. Motivation : Let’s make better mistakes tomorrow. Do you have a design project you need help with? I would love to hear about it. Please send an email: INFO@IDFCTRY.COM
  3. IDFCTRY.COM
  4. IDFCTRY.COM A Favicon, Tiny Artwork A favicon (or “favorites icons”) is a little custom icon that appears next to a website’s URL in the address bar of a web browser. Since visual elements are easier to remember, they can be used to draw visitors’ attention to the brand identity of the site.
  5. Original image Favicon translation IDFCTRY.COM www.cabin12.ca “ ell, we’re a diner and W we thought a fried egg would be appropriate for our favicon. ” Cabin12 is an all day breakfast restaurant One word describes this favicon the best: brilliant. It’s funny, to the point and tells you exactly what they do.
  6. The Designer challange Size matters! IDFCTRY.COM The canvas of a favicon is small. I mean really tiny. They come in variable sizes, but in this case the smallest one sets the rules: 16x16 pixels with 16 colors! Other formats out there are: 32x32, 48x48 and 64 x 64.
  7. IDFCTRY.COM Grid on 16x16 pixels, 32x32 pixels and 64x64 pixels.
  8. IDFCTRY.COM A SIMPLE TASK; HOWEVER Make the design recognizable Keep the design simple Support visual identity Ensure visual clarity Design within a 16×16 rectangle with 16 colors It is a creative challenge you shouldn’t underestimate.
  9. IDFCTRY.COM Original size
  10. IDFCTRY.COM Original size
  11. IDFCTRY.COM Original size
  12. Golden tip! Think iconic. IDFCTRY.COM A logo is not a favicon! Most logo’s, if not all, are unreadable on a 16x16 pixel size. Think of making an icon. Take just a part of the logo, an initial or a symbol. Sometimes it’s works if you only use a one color square.
  13. IDFCTRY.COM RIGHT Wrong
  14. Techniacal file format = favicon.ico IDFCTRY.COM Save your file as .png and remane it: favicon.ico Remember: use only 16 colors!
  15. IDFCTRY.COM Other files are allowed but don’t work on all browsers. The following table gives you an inside on which browser uses what file:
  16. IDFCTRY.COM Techniacal Uploading The Favicon.ico Once you got your Favicon.ico. Connect to your server and upload your Favicon.ico file to your website. Place it into the same directory as your home (index) page, and leave it loose. Don’t put it in an images directory or other folder. If you put it there (and name it favicon.ico), most browsers will find it automatically.
  17. Techniacal Extra codes? techheads only. IDFCTRY.COM Some browsers will look for a direct link in the HTML source code to your site’s favicon.ico file. You can help these browsers by adding this link in the head section of each page on which you want the Favicon.ico to appear. Here is the link code to include: link rel=”icon” href=”/favicon.ico” type=”image/x-icon” Once you’ve added this code, upload all of your modified pages.
  18. Techniacal GIF or PNG instead? IDFCTRY.COM If you want to use a GIF or PNG (won’t work in IE) use these codes: link rel=”icon” href=”/favicon.png” type=”image/png” or link rel=”icon” href=”/favicon.gif” type=”image/gif”
  19. IDFCTRY.COM
  20. IDFCTRY.COM Online favicon generators Online tools to create or download favicon.ico’s If you’re not a designer or don’t have access to designer software, then there are lots online web tools to create favicon.ico’s Just search: favicon generators on google and have fun with it.
  21. Disclaimer IDFCTRY.COM The information in this document is intended for informational and educational purposes only, to provide readers better understanding about Graphic design and corporate design. all Designated trademarks and brands are the property of their respective owners. please respect them.

×