how to make cool favicons

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: inFo@iDFctrY.com

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