diff --git a/index.html b/index.html index 0b19df9..43cf60c 100644 --- a/index.html +++ b/index.html @@ -8,17 +8,35 @@ <meta name="author" content="Jonas Andresen"> <title>Jonas Andresen</title> - <!-- Favicon links --> - <link rel="icon" href="favicon/favicon.ico" type="image/x-icon"> - <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png"> - <link rel="apple-touch-icon" href="favicon/apple-touch-icon.png"> - <link rel="manifest" href="favicon/site.webmanifest"> + <!-- Default Favicon (Light Mode) --> + <link rel="icon" href="favicon/favicon_black.ico" type="image/x-icon"> + <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32_black.png"> + <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16_black.png"> + + <!-- Dark Mode Favicon --> + <link rel="icon" href="favicon/favicon_white.ico" type="image/x-icon" media="(prefers-color-scheme: dark)"> + <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32_white.png" media="(prefers-color-scheme: dark)"> + <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16_white.png" media="(prefers-color-scheme: dark)"> + + <!-- Apple Touch Icons --> + <link rel="apple-touch-icon" href="favicon/apple-touch-icon_black.png"> + <link rel="apple-touch-icon" href="favicon/apple-touch-icon_white.png" media="(prefers-color-scheme: dark)"> + + <!-- Android Chrome Icons --> + <link rel="icon" type="image/png" sizes="192x192" href="favicon/android-chrome-192x192_black.png"> + <link rel="icon" type="image/png" sizes="512x512" href="favicon/android-chrome-512x512_black.png"> + <link rel="icon" type="image/png" sizes="192x192" href="favicon/android-chrome-192x192_white.png" media="(prefers-color-scheme: dark)"> + <link rel="icon" type="image/png" sizes="512x512" href="favicon/android-chrome-512x512_white.png" media="(prefers-color-scheme: dark)"> + + <!-- Web Manifest --> + <link rel="manifest" href="favicon/site_black.webmanifest"> + <link rel="manifest" href="favicon/site_white.webmanifest" media="(prefers-color-scheme: dark)"> <!-- Icon libraries --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-icons@v4/iconsfont/simple-icons.min.css"> + <!-- Custom Styles --> <style> body { font-family: Helvetica, Arial, sans-serif;