<img height="1" width="1" style="display:none;" alt="" src="" data-consent-src="https://px.ads.linkedin.com/collect/?pid=233274&amp;fmt=gif" data-category-consent="cookie_cat_marketing">
Convert PDF to Flipbook and use Facicons

How To Make a Favicon - Quick Guide

Ever wonder where those little icons in your browser tabs come from? And how to use them in your branding efforts? 

 

Favicons are the small 16x16 icons every website should have.

 

Not all do, though. 

 

They are used in a browser to show a graphical representation of the site in the address bar.

 

Some argue they are really important to increase brand recall with your customers.

 

Other say they are not worth spending time on. Personally, I think it is the cherry on top. 

 

 

favicon.jpgIllustration of three Favicons online. Yes, Gru is my background image. 

How to Quickly Create Favicons

 

If you want to create your favorite icon with Photoshop, create a new document with a size of 128x128.

 

When you are done with the design, export it as a PNG with transparent background.

 

Now you only need to transform your PNG to ICO, but unfortunately, Photoshop does not support the .ico format by default.

 

You need a third-party tool, and several tools can help you accomplish that:

 

 

How to implement Favicons

 

For Online Publications Published In iPaper

 

If you use iPaper as your online brochure maker, attaching a favorite icon to your publication is even easier than creating one.

 

You just upload it to your Media Library, and afterward, go to the settings of your iPaper, choose Settings - Design and attach it  from the media library. You are good to go.

For a website

 

If you have access to the HTML code of your site, insert the following code in the <HEAD> element of it.

 

Don't forget to change "website.com" with your website and upload your little image to the root folder.

 

Remember to either name it favicon.ico or amend the name in the code.

 

<link rel="shortcut icon" type="image/x-icon" href="http://website.com/favicon.ico">

For Wordpress

 

Upload the icon to your server, name it "favicon.ico" and copy the following code in the "header.php" file of your theme.

 

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url') ?>/favicon.ico">

Need inspiration?

 

Design is tough, I know. Creating desi

gns for a big screen is tough, but creating something useful that will work in 16x16 is a challenge of its own. 

 

Below you can find a few links for your inspiration:

 

 

Conclusion

 

Although favicons are tiny, the truth is that their importance can be quite significant.

 

If you believe branding is an important part of your strategy, use the small favorite icons.

 

It shows lots of professionalism and that you are attentive to details. 

 

 

About the author

Christian Vasile

Christian Vasile

​Christian comes to work with a single goal in mind: to make sure iPaper stays at the top of the digital publishing industry in terms of usability. His job is all about improving our software's user experience and obsessing about every single detail that makes iPaper great. He can be bribed with pancakes & nutella.

Back to the blog