Без качване, 100% локално, без акаунт

Генератор на фавикони

Качете логото или иконата си и изтеглете всички стандартни размери на фавикони като PNG. Включва иконата Apple Touch и PWA иконите. Нищо не напуска устройството ви.

Как работи Генератор на фавикони

Генераторът на favicon взема всяко предоставено от вас изображение и го преоразмерява до стандартните размери на favicon с помощта на Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (Apple touch icon), 192x192 (Android Chrome) и 512x512 (PWA манифест). Всичките шест размера се генерират в браузъра, заедно с многоразмерен favicon.ico, който събира изображенията 16x16, 32x32 и 48x48 в един файл за по-стари браузъри. Изходното ви изображение никога не напуска устройството ви.

Пълният набор от favicon покрива пълния диапазон от икони в раздели на браузъра, отметки, преки пътища към начален екран и PWA начални екрани. Използването на изходно изображение с висока разделителна способност (поне 512x512 пиксела) дава на алгоритъма за намаляване на мащаба най-много детайли за работа. HTML link таговете, необходими за препращане към всеки генериран файл, се показват в фрагмент, който можете да копирате директно в елемента head на страницата.

Написано от Bastien Sulyan

Как да използвате Генератор на фавикони, стъпка по стъпка

  1. Пуснете изходното изображение върху зоната за качване. За най-добри резултати използвайте квадратно изображение 512 пиксела или по-голямо.
  2. Прегледайте шестте генерирани размера в панела с резултати.
  3. Изтеглете шестте PNG файла и favicon.ico от панела с резултати.
  4. Копирайте HTML фрагмента, показващ link таговете за всички размери.
  5. Поставете PNG файловете в корена на сайта и поставете link таговете в заглавката на страницата.

Често срещани приложения

  • Разработчик създава нов уебсайт и се нуждае от всички размери на favicon, генерирани от фирменото лого, без абонамент за инструмент за дизайн.
  • Автор на PWA генерира иконите 192x192 и 512x512, изисквани в манифеста на уеб приложението за инсталиране на начален екран.
  • Блогър обновява идентичността на сайта и заменя favicon по подразбиране с персонализирана икона, изградена от логото му.
  • Фрийлансър бързо произвежда пълния набор от favicon за клиентски проект, без да чака инсталиране на офлайн дизайн софтуер.

Често задавани въпроси

Кои формати на изображения мога да използвам като изходни?

Всеки формат, който браузърът може да декодира, работи като вход: JPEG, PNG, WebP, GIF и SVG. За SVG изходни файлове браузърът растеризира вектора в Canvas преди преоразмеряване, така че изходните PNG са растерни изображения независимо от това.

Защо favicon е размито в раздела на браузъра?

Размерите 16x16 и 32x32 са много малки. Ако изходното изображение съдържа фини детайли или тънки линии, те няма да оцелеят при намаляване на мащаба. Прост, смел дизайн с ясни форми работи много по-добре при малки размери от сложна илюстрация.

Генерира ли инструментът ICO файлове?

Да. Освен шестте PNG файла, инструментът събира favicon.ico, съдържащ изображенията 16x16, 32x32 и 48x48 в един файл - точно това, което по-старите браузъри в Windows и някои роботи за индексиране все още търсят в корена на сайта. Съвременните браузъри се задоволяват с PNG връзките, така че публикуването и на двата формата не струва нищо и позволява на всеки клиент да избере.

Обработва ли се изходното изображение на сървър?

Не. Извикванията на Canvas drawImage, произвеждащи всеки размер, се изпълняват в раздела на браузъра. Изходното изображение се чете от локалния диск и шестте PNG изхода се създават в паметта и се предлагат за изтегляне. Никакви файлови данни не преминават през сървър.

Кой размер трябва да използвам за Apple touch icon?

iOS и iPadOS използват PNG с 180x180 пиксела, препратен от link тага apple-touch-icon. Този размер се използва, когато потребителят добавя сайта към началния екран на Apple устройство. Инструментът генерира този файл заедно с другите размери.

Мога ли да използвам правоъгълно изображение като изходно?

Да, но изходът ще бъде поставен в рамка, за да се побере в квадратния canvas. За най-добри резултати започнете с квадратно изображение или изрежете изходното изображение до квадрат, преди да използвате инструмента.

Свързани инструменти

Пазете всичко локално, разгледайте допълнителни инструменти.

Всички инструменти за изображения