I tried to add a favicon (simple #101010 square) to my website. However, it isn't visible and I have no clue why. Can anybody help me?
I use the following code to embed the favicon in Wordpress.
<link rel="shortcut icon" href="http://www.dstruning.com/wp-content/themes/dstruning/img/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://www.dstruning.com/wp-content/themes/dstruning/img/favicon.ico" type="image/x-icon">
Related
I have the following code:
<head>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<title>EPDM Polymers | EPDM Rubber Granules | Poured-In-Place Rubber</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="./css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<link rel="stylesheet" href="./js/BackToTop.jquery.css" type="text/css" />
</head>
However, The favicon is not showing up on www.epdmpolymers.com I have the favicon.ico file in my images folder. Any ideas?
You have 2 links for favicon.ico, try removing the first link from your code. I guess it would work for you.
Or once again cross-check the path of the image, try using relative path to the file.
For example: If your image is in root/images folder, so use (/images/favicon.ico)
One of my favorite debugging methods is to download and use a favicon.ico file from a working site like http://www.google.com/favicon.ico
If it works then the issue will be because of your file size or
format.
If it does not work then the issue will be either with the
html tag.
To rule out file permission issue try accessing your favicon file
directly using its url through the browser address bar.
I'm using this online favicon generator to create a favicon for my site and the tool output provides a lot of icons, not only the website favicon. I was curious about which of them do you consider mandatory for a website, and which do you think are unnecessary:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
Unless you have specific needs, your website should probably support all major platforms: desktop browsers, iOS Safari, Android Chrome, etc.
Is the "online favicon generator" you mention RealFaviconGenerator? If so, you may want to know it's undergoing a huge refactoring to produce a minimalist set of icons.
While its output is still in testing phase, here it is:
A single 180x180 Touch icon. iOS Safari scales it down just fine if it needs to.
A manifest.json file for Android Chrome, with two 192x192 and 512x512 icons.
A browserconfig.xml file for Windows 8.1 and 10, with a single icon.
A mask icon for Mac OS Safari.
The classic gang for desktop browsers: favicon.ico and two 16x16 and 32x32 icons. Maybe some of these icons might be dropped.
In the end, the code:
<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="#14b036">
... if you put the files in your root directory. Else, you need to declare browserconfig.xml and favicon.ico, too.
Full disclosure: I'm the author of RealFaviconGenerator.
You want to have ICO pictures at least for these standard dimensions: 16x16, 32x32 and 48x48 pictures in ICO format. However, in same cases you may want to have up to 196x196. I would keep them all, so that each client configuration can pick its preferred one.
References: Ref1 Ref2 Ref3
If you want to limit it to just what may be necessary, you might want to consider the three favicons.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
You can choose one of these, the deciding factor being the size, which affects the quality of the icon.
is there a clear way to change the favicon in ImpressPages4?
I Would use something like this:
<link rel="icon" type="image/png" href="http://example.com/Theme/Bootstrapfree/assets/icon.png">
<link rel="shortcut icon" type="image/png" href="http://example.com/Theme/Bootstrapfree/assets/icon.png">
<link type="image/png" href="http://example.com/Theme/Bootstrapfree/assets/icon.png">
it seems that: Ip/Response/Layout.php sets the favicon, which is called bei Ip/Internal/PageAssets.php
But is it possible to change it inside an Theme?
I found no config regarding on favicon.
Or is it not recommended to Change the Favicon?
Sure i could replace the favicon.ico file under / but thats isn't really comfortable.
Kind regards
There is a plugin way of doing https://github.com/impresspages-plugins/Favicon
I have a weird problem, I hope somebody can help.
I have designed this responsive site and it works fine but on mobile phones it does a weird thing. Before the final site as it would be seen on a small screen it loads for a few milliseconds the site all messed up, with the sidebard above the main content, but afterwards it loads the right layout.
I wasn't worrying too much abuot this but later I realized that on iphones you could only see the messed up site, not the proper layout as it should be.
My media queries are like this:
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:479px)" href="css/screen-layout-small.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:480px) and (max-width:767px)" href="css/screen-layout-medium.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:959px)" href="css/screen-layout-large.css">
<link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=2">
Hope someone can help as I'm going a bit out of my mind here. Thanks!
I checked the site on my android phone now, i noticed this div( barritaloca) was not properly formatted in your media queries.
Its floating to the top page thereby causing the site to load abnormally.
You should correct that div and revert.
Meanwhile, post your css here for reveiew
Thanks
I am trying to do a very simple preliminary exercise to setting up a website which is creating a favicon.
This is the code I am using:
<!DOCTYPE html >
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
</html>
But it is not working - can anyone please assist?
I've saved the file favicon.ico on the same level as my html file (on a subdirectory).
Many thanks
With the introduction of (i|android|windows)phones, things have changed, and to get a correct and complete solution that works on any device is really time-consuming.
You can have a peek at https://realfavicongenerator.net/favicon_compatibility or http://caniuse.com/#search=favicon to get an idea on the best way to get something that works on any device.
You should have a look at
http://realfavicongenerator.net/
to automate a large part of this work, and probably at https://github.com/audreyr/favicon-cheat-sheet to understand how it works (even if this latter resource hasn't been updated in a loooong time).
One complete solution requires to add to you header the following (with the corresponding pictures and files, of course) :
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">
In June 2016, RealFaviconGenerator claimed that the following 5 lines of code were supporting as many devices as the previous 18 lines:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
I use this on my site and it works great.
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
There is a very simple method to set a favicon, which had been around for a long time AFAIK.
Place the favicon.ico file in the default location.
i.e
http://www.yoursite.com/favicon.ico
This works in almost every browser without a <link> tag.
However, this works only if it is an *.ico file. PNGs and other formats still have to be linked with a <link> tag
Below given some information about fav Icon
What Is FavIcon?
FavIcon is nothing but small image which appears top left along with the application address bar title.Standard size specification for favicon.ico is 16 by 16 pixel. Please see below attached figure.
How It Works ?
Usually we add our FavIcon.ico image in the route solution folder and automatically application picks it while running. But most of the time we might have to use below both link reference.
<link rel="icon" href="favicon.ico" type="image/ico"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
Some browser expect one (rel="icon") Some other browser expect other rel="shortcut icon"
Type=”image/x-icon” OR Type=”image/ico”: once expect exact ico image and one expect any image even formatted from .jpg or .pn ..etc.
We have to use above two tags to the common pages like – Master page , Main frame which is getting used in all the pages
you could take a look at the w3 how to, i think you will find it helpful
your link tag attribute should be rel="icon"
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
</head>
<body>
...
</body>
</html>
rel="shortcut icon" should be rel="icon"
Source: W3C
From experience of my favicon.ico not appearing, I am sharing my experience. You can't get it to show until you put your website on a host, therefore, try put it on a localhost using XAMPP - http://www.apachefriends.org/en/xampp.html. This is how the favicon appears and like others recommended, change:
rel="shortcut icon"
to
rel="icon"
Also this way .png favicons can be used for slickness.
<head>
<link rel="shortcut icon" href="favicon.ico">
</head>
In my site, I use this:
<!-- for FF, Chrome, Opera -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">
<!-- for IE -->
<link rel="icon" type="image/x-icon" href="/assets/favicons/favicon.ico" >
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico"/>
To simplify your life, use this favicons generator http://realfavicongenerator.net
This method is recommended
<link rel="icon"
type="image/png"
href="/somewhere/myicon.png" />
Try put this in the head of the document:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
I use this https://realfavicongenerator.net/ to generate all the possible favicons scenarios and it is free.