DEV Community

Cover image for How to create a Logo & use it as Favicon!
Anne Quinkenstein
Anne Quinkenstein

Posted on • Updated on

How to create a Logo & use it as Favicon!

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 (0)