DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.