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
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.
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.
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.
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.
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.
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.
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.
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”
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.
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.