Upload
idfctry-com
View
119
Download
2
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
How to make coolFaviconsa sHort introDUction.
iDFc
trY.
com
i am
occUpation : creative at iDFctrY.comeDUcation : tHe DUtcH acaDemY oF art anD Design
rietvelD acaDemie amsterDam.pHilosopHY : everYtHing is a cHance.tHinks : realitY is cHaosnaï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: [email protected]
iDFc
trY.
com
iDFc
trY.
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.
iDFc
trY.
com
“�Well,�we’re�a�diner�and�we�thought�a�fried�egg�would�be�appropriate�for�our�favicon.”
Cabin12�is�an�all�day�breakfast�restaurant
www.cabin12.ca
Original�image Favicon�translation
One word describes this favicon the best: brilliant. it’s funny, to the point and tells you exactly what they do.
iDFc
trY.
com
tHe Designer cHallangesize matters!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.
iDFc
trY.
com
Grid on 16x16 pixels, 32x32 pixels and 64x64 pixels.
iDFc
trY.
com
a simple task; However
make the design recognizablekeep the design simplesupport visual identityensure visual clarityDesign within a 16×16 rectangle with 16 colors
It�is�a�creative�challenge�you�shouldn’t�underestimate.
iDFc
trY.
com
Original�size
iDFc
trY.
com
Original�size
iDFc
trY.
com
Original�size
iDFc
trY.
com
golDen tip! tHink iconic.
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.
iDFc
trY.
com
rigHt
wrongiDFc
trY.
com
tecHniacalFile Format = Favicon.icosave your file as .png and remane it: favicon.ico
remember: use only 16 colors!
iDFc
trY.
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:
iDFc
trY.
com
tecHniacalUploaDing tHe Favicon.icoonce 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.
iDFc
trY.
com
tecHniacal extra coDes? tecHHeaDs onlY.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.
iDFc
trY.
com
tecHniacalgiF or png insteaD?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”>�
iDFc
trY.
com
iDFc
trY.
com
online Favicon generatorsonline tools to create or download favicon.ico’sif 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.
iDFc
trY.
com
Disclaimer
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.
iDFc
trY.
com