"Discrepancy found between the local Jekyll serve and the final

I'm experiencing an issue with a discrepancy between my local Jekyll serve and the actual output of my website.

In the first picture, the favicon is not displaying properly on the site.

However, in the second picture from my local Jekyll serve, the favicon shows up correctly.

I have already attempted to follow advice from another source by making changes to my _config.yml file as per the instructions provided:

The suggestion was to adjust this code: 

url: "http://flash-kim142.github.io"
to 
url: "https://flash-kim142.github.io"

Currently, my favicon.png is located at 

/Desktop/Documents/Github/My Blog/assets

Should I relocate this file or try something else to resolve this issue?

cssjekyllfavicon

Answer №1

Ensure that the URL for your favicon is relative to your file by using 

assets/<filename>.<extension>
. Avoid hard-coding the entire path like Desktop/Documents/....

This snippet represents your code on the homepage:

<!-- For all browsers -->
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/Documents/GitHub/My Blog/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/Documents/GitHub/My Blog/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/Documents/GitHub/My Blog/favicon-16x16.png">
<link rel="icon" type="image/png" href="/Documents/GitHub/My Blog/assets/favicon.png">
<link rel="mask-icon" href="/Documents/GitHub/My Blog/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/Documents/GitHub/My Blog/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/Documents/GitHub/My Blog/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link href="/assets/favicon.png/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"/>

Corrected version should look like this:

<!-- For all browsers -->
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="shortcut icon" href="./favicon.ico">
<link rel="shortcut icon" type="image/png" href="./favicon.png">
<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="icon" type="image/png" href="./assets/favicon.png">
<link rel="mask-icon" href="./safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="./favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="./browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link href="/assets/favicon.png/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to adjust the footer width to match the sidebar using Bootstrap 5?

Currently working on a Bootstrap 5 template for my website, but being new to it makes it a bit challenging. Specifically struggling with aligning the footer to fit the full width of the sidebar. <!DOCTYPE html> <html lang="en"> <head&g ...

htmlcssbootstrap-5

Issue with the dimensions and proportions of the canvas

After creating a canvas with HTML and setting the ratio to 16/9 in the CSS, I specified a width of 100vw and added a border. However, I noticed that the canvas appeared larger than expected on the screen. #canvas{ width: 100vw; aspect-ratio: 16/9; border: ...

css

adjust the @page rule size for different classname matches during printing

I am attempting to adjust the @page rule size based on matching classnames, however, my research has only led me to pseudo-classes which do not seem to solve my issue. Here is a snippet of my CSS: @media print { @page { margin: 13.2mm 0mm 12.9mm; ...

htmlcssprinting

Creating dynamic "floating divs" with consistent width but varying heights, alignment challenge

Seeking assistance to solve the following challenge: Description of Issue: We are dealing with dynamically generated "floating divs" that have equal width but varying heights based on their content. The "Parent container" will have different width parame ...

javascripthtmlcssresponsive-designfloating

Approach to decoupling design elements from DOM interactions

Seeking recommendations or guidelines for effectively segregating classes utilized for browser styling and DOM manipulation. Specifically, we are developing a single-page app using backbone.js and heavily relying on jQuery for dynamically updating page el ...

cssjquerydom-manipulation

What sets apart auto, 0, and no z-index values?

Can you explain the distinctions between the following: z-index: auto z-index: 0 the absence of z-index In all scenarios mentioned, we have a container div that contains two inner divs, named div1 and div2, with respective z-index values of 9 and 10. T ...

htmlcssz-index

Adjusting the header background color and inserting a logo once a specific threshold is reached

Currently, I am designing a website where I need the background color to transition from transparent to black and display a logo once the user scrolls down to a certain point. I am a beginner in javascript and I am facing some difficulties with this task. ...

javascriptjqueryhtmlcss

Is it safe to exclusively use CSS Selector [type="text"] instead of input[type="text"]?

I've been pondering the safety of exclusively using [type="text"] instead of input[type="text"] in CSS. My concern is that when using input[type="text"], I'm unable to override it with a single class selector. // HTML <input type="text" clas ...

htmlcss

Customizing the CSS for Angular mat-tabsFeel free to reach out

I was looking to customize the label color for a specific mat-tab. Here's the CSS code I used: .mat-tab-label { min-width: 25px !important; padding: 5px; background-color: transparent; color: white; opacity: 1 !important; font-weight: 700; ...

cssangularangular-material

How can I properly display each option of a ngx-bootstrap-multiselect on a separate row?

After upgrading my Angular 8 project to Angular 9, I decided to experiment with the ngx-bootstrap-multiselect plugin. I noticed that the way the items are displayed on a single line is causing some display issues, such as checkboxes appearing to the right ...

cssangular

Tips and Tricks for Resizing Images within an Angular iframe

Can anyone help me figure out how to make the image content inside my iframe fit perfectly within the frame? I noticed that when displaying a PDF it scales correctly, but when displaying a PNG image it does not scale properly and looks distorted. Any ass ...

cssangulartypescriptiframe

Aligning table elements for optimal responsiveness

Need a hand with my HTML email code. I'm struggling to center the "resort boxes" when viewed on smaller screens like phones. Tried everything but can't crack it. Appreciate any help! https://i.sstatic.net/V6Rdr.jpg <html> <head> ...

htmlcsshtml-email

What happens when absolute positioning looks for "relative" inside nested divs?

I'm struggling to grasp the concept of nested divs and how they work together. I understand that when you have a "position absolute" element inside a "position relative" element, the former looks for the latter as its reference point. But what happens ...

htmlcss

What could be causing this code to malfunction on a mobile device?

I am struggling to make this drag and drop function work on mobile devices. Despite implementing the code, it doesn't seem to function properly when accessed on my mobile phones. Here is the snippet of the code: copy = 1; $('.dragArea img&apo ...

javascripthtmlcss

What is the method for incorporating opacity into the background color CSS attribute using a Fluent UI color?

Currently, my challenge involves applying opacity to a background color sourced from the fluent UI library, which utilizes Design Tokens. Typically, I would add opacity to a background color like this: background-color: "rgba(255, 255, 255, 0.5)" However ...

cssreactjstypescriptfluent-uifluentui-react

The kendo ui grid has a bottom border that extends with overlapping heights

Why is the kendo grid displaying like this for me? ...

csskendo-uikendo-grid

In JavaScript, a prompt is used to request the user to input a CSS property. If the input is incorrect,

Implement a while loop that continuously prompts the user to enter a color. If the color entered matches a CSS property such as blue, red, or #000000: The background will change accordingly, but if the user enters an incorrect color, a message will be dis ...

javascriptcss

Transform Angular Material Table selection color with selection

Is it possible to customize the color of the selector in an Angular Material table when using selection? Learn more about it https://i.sstatic.net/5ZJQT.png ...

javascriptcssangularangular-material

Troubleshooting issue: Inability to assign classes to child elements within divs of a designated class

Currently, I am facing an issue while attempting to insert divs into multiple divs that share a common class called ".description". My goal is to assign a unique class to each internal div, but for some reason, this only seems to work for the first div w ...

javascriptjqueryhtmlcss

Positioning a full-width background-image in the center is causing the page to expand

I've been struggling to find a solution to this issue for hours, scouring the internet with no success. The problem I'm facing is trying to center a background image on the page. However, when using the method shown here, it ends up stretching t ...

htmlcss