favicon-stealer 1.2.0 → 1.4.0

package/README.md

@@ -1,11 +1,16 @@
 # favicon-stealer
-favicon stealer npm package
+A react component to get clear and consistent favicon of a website easily.
 
 
 # installation
+## npm
 ```shell
 npm install favicon-stealer
 ```
+## pnpm
+```shell
+pnpm add favicon-stealer
+```
 
 # usage
 ```typescript
@@ -20,22 +25,27 @@ import { Favicon } from 'favicon-stealer';
 | `url` | `string` | The URL of the website to fetch the favicon for. |
 | `size` | `number` | The size of the favicon in pixels. Default is 32. |
 | `className` | `string` | A class name to apply to the element. |
-| `timeout` | `number` | The timeout in milliseconds for fetching the favicon. Default is 1000 (1 second). |
+| `timeout` | `number` | The timeout in milliseconds for fetching the favicon. Default is 3000 (3 seconds). |
 | `lazy` | `boolean` | Whether to load the favicon lazily. Default is false. |
 | `border` | `boolean` | Whether to show a border around the favicon. Default is false. |
 | `padding` | `number` | The padding in pixels.(px) Default is 0. |
 | `background` | `string` | The background color of the favicon. Default is transparent.(in hex) |
 | `borderRadius` | `number` | The border radius in pixels.(px) Default is 0. |
+| `preferGoogle` | `boolean` | Whether to prefer Google's favicon service over the website's own favicon. Default is false. |
+
 
 # npm package
 https://www.npmjs.com/package/favicon-stealer
 
+
 # license
 MIT License
 
+
 # Changelog
 - v1.0.0: Initial release (2025.1.21)
 - v1.0.1: Add README.md (2025.1.21)
 - v1.0.2: Update license to MIT (2025.1.21)
 - v1.1.0: Fix show bug(2025.2.1)
-- v1.2.0: Add props(lazy, border, padding, background, borderRadius)(2025.2.1)
+- v1.2.0: Add props(lazy, border, padding, background, borderRadius)(2025.2.1)
+- v1.4.0: Improved favicon detection and optimized package size; Added preferGoogle option and improved favicon loading reliability (2025.2.27)

package/dist/Favicon.js

@@ -36,25 +36,44 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("./lib/utils");
 const react_1 = __importStar(require("react"));
-const Favicon = ({ url, size = 32, className = "", timeout = 1000, // 1 second
-border = false, padding = 0, background = "transparent", borderRadius = 0, lazy = false, }) => {
+const Favicon = ({ url, size = 32, className = "", timeout = 5000, // 增加到5秒，给网站自己的favicon更多加载时间
+border = false, padding = 0, background = "transparent", borderRadius = 0, lazy = false, preferGoogle = false, }) => {
     const domain = (0, utils_1.getDomain)(url);
-    const [imgSrc, setImgSrc] = (0, react_1.useState)(`https://${domain}/logo.svg`);
+    const [imgSrc, setImgSrc] = (0, react_1.useState)("");
     const [fallbackIndex, setFallbackIndex] = (0, react_1.useState)(0);
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
     const [hasError, setHasError] = (0, react_1.useState)(false);
-    const fallbackSources = [
+    const [isInitialized, setIsInitialized] = (0, react_1.useState)(false);
+    const standardSources = [
+        `https://${domain}/favicon.ico`,
         `https://${domain}/logo.svg`,
         `https://${domain}/logo.png`,
         `https://${domain}/apple-touch-icon.png`,
         `https://${domain}/apple-touch-icon-precomposed.png`,
-        `https://www.google.com/s2/favicons?domain=${domain}&sz=64`,
+        `https://${domain}/static/img/favicon.ico`,
+        `https://${domain}/static/img/favicon.png`,
+        `https://${domain}/img/favicon.png`,
+        `https://${domain}/img/favicon.ico`,
+        `https://${domain}/static/img/logo.svg`,
+        `https://${domain}/apple-touch-icon-precomposed.png`,
+    ];
+    const fallbackServices = [
+        `https://www.google.com/s2/favicons?domain=https://${domain}&sz=64`,
+        `https://www.google.com/s2/favicons?domain=http://${domain}&sz=64`,
         `https://icons.duckduckgo.com/ip3/${domain}.ico`,
-        `https://${domain}/favicon.ico`,
     ];
+    const fallbackSources = preferGoogle
+        ? [...fallbackServices, ...standardSources]
+        : [...standardSources, ...fallbackServices];
+    (0, react_1.useEffect)(() => {
+        if (!isInitialized) {
+            setImgSrc(fallbackSources[0]);
+            setIsInitialized(true);
+        }
+    }, [isInitialized, fallbackSources]);
     (0, react_1.useEffect)(() => {
         let timeoutId;
-        if (isLoading) {
+        if (isLoading && imgSrc) {
             timeoutId = setTimeout(() => {
                 handleError();
             }, timeout);
@@ -64,7 +83,7 @@ border = false, padding = 0, background = "transparent", borderRadius = 0, lazy
                 clearTimeout(timeoutId);
             }
         };
-    }, [imgSrc, isLoading]);
+    }, [imgSrc, isLoading, timeout]);
     const handleError = () => {
         const nextIndex = fallbackIndex + 1;
         if (nextIndex < fallbackSources.length) {
@@ -96,10 +115,10 @@ border = false, padding = 0, background = "transparent", borderRadius = 0, lazy
         } },
         isLoading && (react_1.default.createElement("div", { className: "absolute inset-0 animate-pulse" },
             react_1.default.createElement("div", { className: "w-full h-full rounded-md bg-gray-200/60" }))),
-        react_1.default.createElement("img", { src: imgSrc, alt: `${domain} logo`, width: size, height: size, loading: lazy ? "lazy" : "eager", onError: handleError, onLoad: handleLoad, className: `inline-block transition-opacity duration-300 ${isLoading ? "opacity-0" : "opacity-100"}`, style: {
+        imgSrc && (react_1.default.createElement("img", { src: imgSrc, alt: `${domain} logo`, width: size, height: size, loading: lazy ? "lazy" : "eager", onError: handleError, onLoad: handleLoad, className: `inline-block transition-opacity duration-300 ${isLoading ? "opacity-0" : "opacity-100"}`, style: {
                 objectFit: "contain",
                 display: hasError ? "none" : "inline-block",
-            } }),
+            } })),
         hasError && (react_1.default.createElement("div", { className: "w-full h-full flex items-center justify-center bg-gray-100 rounded-md", style: { fontSize: `${size * 0.5}px` } }, domain.charAt(0).toUpperCase()))));
 };
 exports.default = Favicon;

package/dist/types/Favicon.d.ts

@@ -9,6 +9,7 @@ interface IProps {
     background?: string;
     borderRadius?: number;
     lazy?: boolean;
+    preferGoogle?: boolean;
 }
-declare const Favicon: ({ url, size, className, timeout, border, padding, background, borderRadius, lazy, }: IProps) => React.JSX.Element;
+declare const Favicon: ({ url, size, className, timeout, border, padding, background, borderRadius, lazy, preferGoogle, }: IProps) => React.JSX.Element;
 export default Favicon;

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "favicon-stealer",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

package/src/Favicon.tsx

@@ -1,134 +0,0 @@
-"use client";
-
-import { getDomain } from "./lib/utils";
-import React, { useEffect, useState } from "react";
-
-interface IProps {
-  url: string;
-  size?: number;
-  className?: string;
-  timeout?: number;
-  border?: boolean;
-  padding?: number;
-  background?: string;
-  borderRadius?: number;
-  lazy?: boolean;
-}
-
-const Favicon = ({
-  url,
-  size = 32,
-  className = "",
-  timeout = 1000, // 1 second
-  border = false,
-  padding = 0,
-  background = "transparent",
-  borderRadius = 0,
-  lazy = false,
-}: IProps) => {
-  const domain = getDomain(url);
-  const [imgSrc, setImgSrc] = useState(`https://${domain}/logo.svg`);
-  const [fallbackIndex, setFallbackIndex] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
-  const [hasError, setHasError] = useState(false);
-
-  const fallbackSources = [
-    `https://${domain}/logo.svg`,
-    `https://${domain}/logo.png`,
-    `https://${domain}/apple-touch-icon.png`,
-    `https://${domain}/apple-touch-icon-precomposed.png`,
-    `https://www.google.com/s2/favicons?domain=${domain}&sz=64`,
-    `https://icons.duckduckgo.com/ip3/${domain}.ico`,
-    `https://${domain}/favicon.ico`,
-  ];
-
-  useEffect(() => {
-    let timeoutId: any;
-
-    if (isLoading) {
-      timeoutId = setTimeout(() => {
-        handleError();
-      }, timeout);
-    }
-
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [imgSrc, isLoading]);
-
-  const handleError = () => {
-    const nextIndex = fallbackIndex + 1;
-    if (nextIndex < fallbackSources.length) {
-      setFallbackIndex(nextIndex);
-      setImgSrc(fallbackSources[nextIndex]);
-      setIsLoading(true);
-    } else {
-      setHasError(true);
-      setIsLoading(false);
-    }
-  };
-
-  const handleLoad = () => {
-    setIsLoading(false);
-    setHasError(false);
-  };
-
-  return (
-    <div
-      className={
-        `relative inline-block 
-        ${className} 
-        ${border ? "border" : ""} 
-        ${hasError ? "opacity-0" : ""}
-        ${padding ? `p-[${padding}px]` : ""}
-        ${borderRadius ? `rounded-[${borderRadius}px]` : ""}
-        `
-      }
-      style={{
-        width: size,
-        height: size,
-        background: background,
-        padding: padding ? `${padding}px` : 0,
-        borderRadius: borderRadius ? `${borderRadius}px` : 0,
-      }}
-    >
-      {/* placeholder */}
-      {isLoading && (
-        <div className="absolute inset-0 animate-pulse">
-          <div className="w-full h-full rounded-md bg-gray-200/60" />
-        </div>
-      )}
-
-      <img
-        src={imgSrc}
-        alt={`${domain} logo`}
-        width={size}
-        height={size}
-        loading={lazy ? "lazy" : "eager"}
-        onError={handleError}
-        onLoad={handleLoad}
-        className={`inline-block transition-opacity duration-300 ${
-          isLoading ? "opacity-0" : "opacity-100"
-        }`}
-        style={{
-          objectFit: "contain",
-          display: hasError ? "none" : "inline-block",
-        }}
-      />
-
-      {/* Fallback: Display first letter of domain when all image sources fail */}
-      {hasError && (
-        <div
-          className="w-full h-full flex items-center justify-center bg-gray-100 rounded-md"
-          style={{ fontSize: `${size * 0.5}px` }}
-        >
-          {domain.charAt(0).toUpperCase()}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Favicon;

package/src/index.tsx

@@ -1 +0,0 @@
-export { default as Favicon } from './Favicon';

package/src/lib/utils/index.ts

@@ -1,12 +0,0 @@
-export const getDomain = (url: string) => {
-  try {
-    // Add https:// protocol if not present
-    const urlWithProtocol = url.startsWith('http') ? url : `https://${url}`;
-    const domain = new URL(urlWithProtocol).hostname;
-    // Remove 'www.' prefix if exists
-    return domain.replace(/^www\./, '');
-  } catch (error) {
-    // Return original input if URL parsing fails
-    return url;
-  }
-};

package/tsconfig.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "dist",
-    "module": "commonjs",
-    "target": "es2015",
-    "jsx": "react",
-    "declaration": true,
-    "declarationDir": "dist/types",
-    "strict": true,
-    "moduleResolution": "node",
-    "baseUrl": "./src",
-    "rootDir": "./src",
-    "paths": {
-      "@/*": ["./*"]
-    },
-    "esModuleInterop": true
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}