loading...
Cover image for How to create a Logo & use it as Favicon!

How to create a Logo & use it as Favicon!

annequinkenstein profile image Anne Quinkenstein Updated on ・1 min read

Create Logo

Try Canva
or get help with creating one

Use it in Navbar

Logo AQ

Use it as Favicon

A Favicon is a small logo for the website, tab, URL, bookmark.
Create Favicon on Faviconer

React

just replace favicon.ico in the public folder

html

add the line(s) below to<head> section

!-- default favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

<!-- wideley used favicon -->
<link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">

<!-- for apple mobile devices -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="120x120">

<!-- google tv favicon -->
<link rel="icon" href="/favicon-googletv.png" sizes="96x96" type="image/png">
Enter fullscreen mode Exit fullscreen mode

different types

<link rel="icon" type="image/gif" href="https://example.com/image.gif">

<link rel="icon" type="image/png" href="https://example.com/image.png">

<link rel="icon" type="image/svg+xml" href="https://example.com/image.svg">

Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide