How Do I Get My Page Title To Have An Icon? - Stack Overflow

Trang chủ » Html Icon In Head Title » How Do I Get My Page Title To Have An Icon? - Stack Overflow

Có thể bạn quan tâm

    1. Home
    2. Questions
    3. Tags
    4. Users
    5. Companies
    6. Labs
    7. Jobs
    8. Discussions
    9. Collectives

    10. Communities for your favorite technologies. Explore all Collectives

  2. Teams

    Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

    Try Teams for free Explore Teams
  3. Teams

  4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs How do I get my page title to have an icon? Ask Question Asked 15 years, 3 months ago Modified 3 years, 2 months ago Viewed 251k times 74

I would like to have my site’s logo shown in the icon area of the title rather than the default white document. Exactly as Stack Overflow has it.

  • html
  • icons
Share Improve this question Follow edited Jun 1, 2015 at 21:21 unor's user avatar unor 96.2k28 gold badges224 silver badges377 bronze badges asked Sep 13, 2009 at 11:09 littlechris's user avatar littlechrislittlechris 4,18410 gold badges46 silver badges67 bronze badges Add a comment |

9 Answers 9

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 106 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

add this to your HTML Head. Of course the file "favicon.ico" has to exist. I think 16x16 or 32x32 pixel files are best.

Share Improve this answer Follow edited Sep 17, 2018 at 14:53 user142162 answered Sep 13, 2009 at 11:14 NiklasMM's user avatar NiklasMMNiklasMM 2,9722 gold badges23 silver badges27 bronze badges 4
  • 5 For the code, I think wikipedia has a better explanation and better cross browser compatibility. en.wikipedia.org/wiki/Favicon – Andy Li Commented Sep 13, 2009 at 11:18
  • Thanks! Just took this codeline from my Website and since it works, I thought it can't be too wrong. ;-) – NiklasMM Commented Sep 13, 2009 at 11:19
  • Thanks Nick! Kust had to convert my image to an ico to get it working in IE. <link rel="shortcut icon" href="/Content/images/MyIcon.ico" /> – littlechris Commented Sep 13, 2009 at 11:32
  • If using in ruby rails <link rel="icon" type="image/png" href="<%= asset_path('icon_name.jpg')%>"> – Sunil Kumar Commented Nov 6, 2018 at 2:20
Add a comment | 21

this is an interesting question so let check it if you have a image for use as a website-icon then

Add this to your script

<link rel="icon" type="image/gif" href="animated_favicon1.gif" />

otherwise if you have a icon for your website icon then you chose

<link rel="shortcut icon" href="favicon.ico" />

I always use http://www.iconspedia.com/ for more icons

if my answer solved your problem then give me vote ok

Share Improve this answer Follow edited Oct 1, 2016 at 7:25 Community's user avatar CommunityBot 11 silver badge answered Sep 13, 2009 at 15:40 anirudhaanirudha 0 Add a comment | 8

They're called favicons, and are quite easy to make/use. Have a read of http://www.favicon.com/ for help.

Share Improve this answer Follow answered Sep 13, 2009 at 11:11 Paul McLean's user avatar Paul McLeanPaul McLean 3,5506 gold badges27 silver badges36 bronze badges Add a comment | 8

Apparently you can use this trick.

<title>📈 My title</title>

That icon-alike is actually a text.

Share Improve this answer Follow answered Apr 22, 2015 at 10:01 devXen's user avatar devXendevXen 3,1223 gold badges36 silver badges44 bronze badges 2
  • 4 Where do you find these? – Max Rose-Collins Commented May 19, 2015 at 11:40
  • There's a minor issue with this approach. – Amir Shabani Commented May 30, 2019 at 2:19
Add a comment | 8

The accepted answer works perfectly fine. I just want to mention a minor problem with the answer devXen has given.

If you set the icon like this:

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

The icon will work as expected:

enter image description here

However, if you set it like devXen has suggested:

<title>🧐 Amir A. Shabani</title>

The title of the page moves upon refresh:

enter image description here

So I would advise using <link> instead.

Share Improve this answer Follow edited May 30, 2019 at 1:58 answered Mar 28, 2019 at 6:35 Amir Shabani's user avatar Amir ShabaniAmir Shabani 4,1577 gold badges34 silver badges76 bronze badges Add a comment | 2

According to w3school:

<link rel="icon" href="your_icon"/> Share Improve this answer Follow edited Mar 4, 2017 at 23:16 Tunaki's user avatar Tunaki 137k46 gold badges364 silver badges434 bronze badges answered Mar 4, 2017 at 18:36 C.A. Gavin Lee's user avatar C.A. Gavin LeeC.A. Gavin Lee 511 silver badge7 bronze badges 0 Add a comment | 2

This code will definitely work. In a comment I saw they are using a 'js' syntax that is not for everyone only for those who are working with 'express.js'

<link rel="icon" href="demo_icon.gif" sizes="16x16"> <title> Reddit</title>

you can also add png and jpg

Share Improve this answer Follow edited Oct 11, 2021 at 23:10 Rohit Gupta's user avatar Rohit Gupta 4,17321 gold badges34 silver badges46 bronze badges answered Jan 19, 2019 at 20:00 MD SHAYON's user avatar MD SHAYONMD SHAYON 8,00754 silver badges43 bronze badges Add a comment | 1

If using in ruby rails use the below code.

For calculating the path of the file, asset_path function is used to find the image that we are using inside of the rails code embedded in <%= code %>

<link rel="icon" type="image/png" href="<%= asset_path('icon_name.jpg')%>"> Share Improve this answer Follow answered Nov 6, 2018 at 2:23 Sunil Kumar's user avatar Sunil KumarSunil Kumar 4186 silver badges16 bronze badges Add a comment | 1

If you wanna use a URL just you can use this code.

<link rel="shortcut icon" type="image/x-icon" href="https://..." /> Share Improve this answer Follow answered Jun 13, 2020 at 15:58 behdad setoodegan's user avatar behdad setoodeganbehdad setoodegan 412 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid …

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged
  • html
  • icons
or ask your own question.

  • The Overflow Blog
  • The real 10x developer makes their whole team better
  • The ghost jobs haunting your career search
  • Featured on Meta
  • The December 2024 Community Asks Sprint has been moved to March 2025 (and...
  • Stack Overflow Jobs is expanding to more countries
18 How to insert logo with the title of a HTML page? 1 icon/image IN the title 4 How to set icon of an page using CSS 1 How can I make an icon appear next to my title in the <title> tag? 0 icons in html page 0 add icon to html code title 4 place icon in WordPress page title 14 Adding Custom icon to HTML Page 2 HTML- Adding or controling Icons in Title Bar 0 How to show icon to small opened web page title

Hot Network Questions

  • Sous vide pouches puffed up - Is this product contaminated?
  • Double factorial power series closed form expression
  • PostgreSQL Daemon Not Working
  • Movie where a city is being divided by a huge wall
  • Why are the layers of the James Webb Telescope’s sunshield so thin?
  • Oral tradition after Rav Ashi
  • Is it possible to shrink back a GoPro battery?
  • With a sense of humor, just for fun. TeX and 3d printers
  • When is Parker's first "I'm OK!" signal expected after it's close flyby of the Sun? Which dishes (if any) have been reserved for it?
  • Can I use bootstrapping for small sample sizes to satisfy the power analysis requirements?
  • Why do most philosophers of religion believe in God?
  • Four fours, except with 1 1 2 2
  • How to apply for Turkey eVisa as a Pakistani passport holder with US valid visa?
  • Determining Which Points on the Perimeter of a Circle Fall Between Two Other Points That Are on Its Radius
  • How to limit width of a cell in an array?
  • Improve traction on icy path to campsite
  • Can you attempt a risky task without risking your mind or body?
  • How to make the spacing between these circles consistent?
  • Debian Bookworm always sets `COLUMNS` to be a little less than the actual terminal width
  • A probability inequality used Chernoff bounds.
  • It's a Wonderful Life Mr. Potter
  • Does Acts 20:28 say that the church was purchased with the blood of God or the blood of the Lord?
  • How does Heidegger account for the imagination and mental images in his monism?
  • What's the name of the form of the song "12 Days of Christmas"?
more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html

Từ khóa » Html Icon In Head Title