Favicon generator

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Favicon generator

Post by Albert Wiersch »

Image

You might think that favicons are easy and simple, like I did, until I found this favicon generator site that shows how complicated it can be to support various favicon resolutions and multiple system platforms (Desktop, Windows, IE, Android, iOS, etc).

I wanted to share it here:
https://realfavicongenerator.net/

I am updating the some icons for our websites and just used it. I uploaded a 260x260 icon image (the size it recommends) and it generated a bunch of files at various resolutions and the HTML to put in the "head" section. Honestly, I'm not sure I want to put all that HTML in the head section just for a favicon but I have all the files I need and the HTML just in case.

You may want to review your site's favicon files.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
artonweb
Rank 0 - Newcomer
Posts: 1
Joined: Sat Dec 29, 2012 12:26 am
Location: Greece
Contact:

Re: Favicon generator

Post by artonweb »

Thank you for your link.
Is there the capability a user to draw a custom icon?
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Favicon generator

Post by RSteinwand »

I'm seeing some weirdness in my 404 logs the last couple weeks:

Mozilla/5.0+(Macintosh;+Intel+Mac+OS+X+10_11_4)+AppleWebKit/601.5.17+(KHTML,+like+Gecko)+Version/9.1+Safari/601.5.17

android-chrome-192x192.png+sizes=192x192
favicon-194x194.png+sizes=194x194
favicon-96x96.png+sizes=96x96
favicon-32x32.png+sizes=32x32

My icons are all declared like this, so for some reason, the space before sizes is changed to a plug sign for the requests:
<link rel=icon type=image/png href=/favicon-32x32.png sizes=32x32>

Maybe I need some plus size favicons? :?
Rick
JamesKievits
Rank 0 - Newcomer
Posts: 2
Joined: Tue Oct 04, 2016 8:17 pm

Re: Favicon generator

Post by JamesKievits »

This is great, thanks for the link.
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Here's Everything You Need to Know About Favicons in 2017

Post by RSteinwand »

Rick
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Favicon generator

Post by RSteinwand »

After researching this yesterday and today and deploying several updates, I created new icons via RealFaviconGenerator.net (mainly for the html code) and found the list even shorter.

Code: Select all

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
I still have all my original icons out there, but noticed Chrome downloads more than the one or two icons it needs so the new code is shortening my "fully loaded" time by several tenths of second and about 4 less file requests.

Less is more: https://realfavicongenerator.net/blog/n ... s-is-more/
Rick
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Favicon generator

Post by RSteinwand »

If you haven't done this lately, it might be ok to do it again. They have it down to a LOT less icons now, meaning less html needed for the page. Of course you want upload your png's to tinypng.com too.
Rick
User avatar
Lou
Rank V - Professional
Posts: 295
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: Favicon generator

Post by Lou »

I know old topic - But I finely got around to doing something about the favicon on a domain. realfavicongenerator.net still works just fine.

While working with the domain found a favicon display problem I can't figure out - under different topic. (Edit - This is a FireFox only issue)

Edit: problem turns out to be a really sticky history retention problem. Deleting/clearing ALL history & cache fixed it.
Lou
Say what you will about Sisyphus. He always has work.
Post Reply