Blog Topic #10: What’s a Favicon?

A favicon or “fave-icon” a small iconic style image that represents a website. Most often found on the address bar of your browser, but can used for bookmarks and feeds as well. It generally follows your logo, website theme or color palette so that user can quickly recognize and associate it.

What is needed? Usually Microsoft ICO format is used but most modern browsers can recognize png gif and jpf formats as a favicon. The Microsoft ICO format will work across all browsers. The ICO file also fits multiple sizes into one file, it useful in preventing bad scaling(like a website shortcut on a desktop). Sizes are 16×16, 32×32, 48×48 and the larger 64×64/128×128.

While there are many ways to create a favicon the easiest is through websites like https://favikon.com/ where you upload the final image you want as a icon. You can crop further using the linked tool and then export as ICO or PNG. Simple as that.

It is best practice to upload the ICO file in the root directory as a browser can find it automatically, but! don’t rely on that method. Instead you can tell the browser where to find it:

<link rel=“shortcut icon” href=“/favicon.ico” type=“image/x-icon” />

Make sure the href points to the location of the ICO file. That’s it! you now have a Favicon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

Powered by WordPress.com.

Up ↑

Octavio's MAT 165 Blogging

Gatherings from here and there.

Hackaday

Fresh hacks every day

Theme Showcase

Find the perfect theme for your blog.

%d bloggers like this: