Email Blog

Email Marketing Made Simple

IMPORTANT Favicon Design Tips For 2020!

IMPORTANT Favicon Design Tips For 2020!


we’re going to be looking at favicons
and exactly what they are how to use them and everything else in between all
of that in just under five minutes so you might have heard the term thrown
around and you might even know what a favicon is but briefly puts a favicon is
a short term for a favorite icon they are very simplified and small icons
that represent a brand or business and they can be found in browser address
biased tabbed browsing and also in bookmark lists now the goal of a favicon
is to make the internet more efficient so a user can locate certain tabs or
websites that much more easily often people have many tabs open at once and
so having a favicon in the tab offers a more friendly experience to the end-user
if you’re a brand or you have a portfolio website you’re going to want
to use a favicon so the user of your website will feel more welcome and also
more secure it just looks that much more official but also they can navigate to
your page that much easier so that’s what a favicon is but now let’s get
technical and look at some of the rules and the tips for designing them so first
and foremost it’s really really important to remember these things are
very very tiny favicons are very very small now you can find many ranges in
size for differing applications say for example the standard size for a desktop
browser a favicon is 32 by 32 pixels and they can go all of the way up to 196 by
196 pixels for Androids chrome homescreen now I’m going to post a list
in the description box below of this video that will explain all of the
different sizes of the types of favicon but what does this mean essentially the
best workflow method here is to design the same and design of favicon but to
multiple different files according to each size that you need the file format
that you want to be using is PNG for the most parts and you should provide two
different options one that is transparent and another one with a solid
background color now this is because some applications
require a transparent background such as desktop browsers and other locations
make use of a color background favicon such as for Apple touch and Android so
though there’s some technical formalities out of the way
but now let’s take a look at the creative tips for designing favicons now
as I mentioned before favicons are tiny and this is going to impact your design
choices or at least it should do and I’ve said so many times on this channel
about how important it is to design a logo in a simple way and that’s because
when it’s scaled down to a small size it remains functional and it’s not blurred
with too much detail with a favicon you really need to take that to the next
level so simplicity is king when it comes to designing a favicon also when
designing a favicon you should be aware that most browser buyers are light gray
whites or shades of blue and so with that in mind it would be wise to choose
colors that stand out against these hues and that’s because your favicon doesn’t
want to be lost on the screen of the end user now I mentioned earlier that PNG is
the desired format for most favicon designs now you might be thinking why
not use SVG as an option because it’s a scalable graphic or simply put most
browsers don’t support the SVG file formats for favicons and so it’s best to
stick to PNG for your designs considering the design is so small and
so simple it might be tricky to relate the design itself to the brand or the
business however this is essential and so you really need to treat the favicon
as a logo design project in the same sense that it needs to reflect the
brand’s identity and the message calling a single and small design so there was a
brief and a rundown of favicons and how to design them it was short but
I do consider all of the information there to be useful and like I said there
are some links down below keep posting your ideas for content on this channel
because I like making videos that relate to you guys and I’m gonna boost your
skills as a graphic designer so do subscribe to my channel if you
haven’t done already and of course until next time guys this on your future today
peace you

14 thoughts on “IMPORTANT Favicon Design Tips For 2020!

  1. An often overlooked but crucial item is this. Any designer worth their salt would look into this along with the logo/design work.

    If the original brief doesn't mention it you can offer it as an extra. The customer maybe very happy with your proactive stance.

  2. The Satori Graphics channel has rapidly become one of my favorites precisely because of contents such as this. I don't believe anyone else (at least that I have seen) has taken the time to talk about favicons. Some businesses do not think of every possible client touchpoints so it is up to us to really focus on these topics no matter how small. Kudos to you Thomas for presenting yet another video full of important info.

  3. FIRE ADVICE! ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ
    I always struggled to make these favicons working for my clients.
    Thank you for this post! Really helpful to get them better the next time! ๐Ÿ™๐Ÿป

  4. Hi, can you please do a video, which shows the different colours used in logo for different sectors- like financial sector, industrial sectors
    And by the way your videos are awesome ๐Ÿ’–๐Ÿ’•

Leave comment

Your email address will not be published. Required fields are marked with *.