How to make cool Favicons

HOW TO
MAKE COOL
CHUNGKONG.NL
FAVICONS
A SHORT INTRODUCTION.

---

I AM
SINCE
: 1968
OCCUPATION : CREATIVE ON AN ADVERTISING AGENCY
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
CHUNGKONG.NL
DO YOU HAVE A DESIGN PROJECT YOU NEED HELP WITH?
I WOULD LOVE TO HEAR ABOUT IT.
PLEASE SEND AN EMAIL: CONTACT@CHUNGKONG.NL

---

CHUNGKONG.NL

---

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.
CHUNGKONG.NL
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
WWW.CABIN12.CA
CHUNGKONG.NL
“ Well, we’re a diner and
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!
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
CHUNGKONG.NL
colors!
Other formats out there are: 32x32, 48x48 and 64 x 64.

---

CHUNGKONG.NL
Grid on 16x16 pixels, 32x32 pixels and 64x64 pixels.

---

A SIMPLE TASK; HOWEVER
Make the design recognizable
Keep the design simple
Support visual identity
Ensure visual clarity
CHUNGKONG.NL
Design within a 16×16 rectangle with 16 colors
It is a creative challenge you shouldn’t underestimate.

---

CHUNGKONG.NL
Original size

---

CHUNGKONG.NL
Original size

---

CHUNGKONG.NL
Original size

---

GOLDEN TIP! THINK ICONIC.
A LOGO IS NOT A FAVICON!
Most logo’s, if not all, are unreadable on a
16x16 pixel size.
CHUNGKONG.NL
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.

---

RIGHT
CHUNGKONG.NL
WRONG

---

TECHNIACAL
FILE FORMAT = FAVICON.ICO
Save your file as .png and remane it: favicon.ico
Remember: use only 16 colors!
CHUNGKONG.NL

---

CHUNGKONG.NL
Other files are allowed but
don’t work on all browsers.
The following table gives
you an inside on which
browser uses what file:

---

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.
CHUNGKONG.NL
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.
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:
CHUNGKONG.NL
<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?
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
CHUNGKONG.NL
<link rel=”icon” href=”/favicon.gif” type=”image/gif”>

---

CHUNGKONG.NL

---

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
CHUNGKONG.NL
Just search: favicon generators on google and have
fun with it.

---

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.
CHUNGKONG.NL

---