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

Всички икони, които са нужни на уебсайта ви, направени от логото ви и готови за качване.

Други инструменти: JPEG в JPG Компресиране на JPG Компресиране на PNG Компресиране на WebP Промяна на размера на снимка Изрязване на снимка Обединяване на снимки Обединяване на PDF Компресиране на PDF Разделяне на PDF Извличане на изображения от PDF Завъртане на PDF

Изберете своето PNG, JPG, WebP или SVG изображение

По един файл, до 20 MB.

Вписване в квадрат

Вписване Цялото изображение Запълване Изрязва краищата

Иконите са квадратни. Ако изображението ви не е, изберете дали да се вижда цялото (с прозрачни полета) или да запълни квадрата.

Цвят на фона

За иконата на Apple, която не може да бъде прозрачна, и като цвят на темата в Android.

Файловете ви се изтриват автоматично след конвертирането и най-късно един час след качването. Как обработваме файловете ви

Създайте пълния фавикон на уебсайта си от логото си: иконата за раздела на браузъра, иконите за началния екран на iPhone и Android, манифеста и HTML кода за свързването им. Качете изображение PNG, JPG, WebP или SVG и изтеглете ZIP с всичко, без регистрация и без воден знак.

Как да създадете фавикон

Изберете логото или иконата си като PNG, JPG, WebP или SVG; в идеалния случай квадратно и поне 512 пиксела.
Изберете дали изображението да се показва цялото или да запълва квадрата, както и цвета на фона на иконата за Apple.
Натиснете „Създаване на фавикон“ и изтеглете ZIP файла.
Качете файловете в основната папка на уебсайта си и поставете кода от head.html в етикета head на страниците си.

Какво включва пакетът

Файл	За какво служи
`favicon.ico`	Класическата икона на раздела, с размери 16, 32 и 48 пиксела в един файл. Браузърите го търсят, дори ако не го свържете.
`favicon-16x16.png` и `favicon-32x32.png`	Иконите за раздела и отметките в съвременните браузъри.
`apple-touch-icon.png`	Иконата от 180 пиксела, която iPhone и iPad използват, когато уебсайтът ви се добави към началния екран.
`android-chrome-192x192.png` и `android-chrome-512x512.png`	Иконите за Android и за уеб приложенията, които могат да се инсталират.
`site.webmanifest`	Манифестът, който посочва иконите за Android и цвета на уебсайта ви.
`head.html`	Етикетите за свързване на иконите от страниците ви.

Как да го инсталирате в уебсайта си

Разархивирайте файла и качете всички файлове, освен head.html, в основната папка на уебсайта си (там, където е началната страница).
Копирайте тези етикети, които са и в head.html, в етикета head на страниците си:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Ако желаете, въведете името на уебсайта си в name и short_name в site.webmanifest.

Браузърите кешират фавикона: ако не видите новия веднага, презаредете страницата изцяло или изчакайте малко.

Вписване или запълване

Всички икони са квадратни. Ако изображението ви не е, можете да го впишете, за да се вижда цялото с прозрачни полета, или да запълните квадрата, като изрежете излишното отстрани. За хоризонтално лого с текст обикновено е по-добре да използвате само символа на логото, изрязан като квадрат.

Иконата за Apple не може да е прозрачна: iOS би запълнил фона с черно. Затова я създаваме с избрания от вас цвят на фона, който се използва и като цвят на уебсайта ви в Android. Останалите икони запазват прозрачността си.

Съвети за добър резултат

Започнете от голямо изображение, поне 512 × 512 пиксела, или още по-добре от SVG: малките икони се изчисляват от него.
Нека е просто: при 16 пиксела текстът и фините детайли не се четат. Символ или инициал в контрастни цветове работи много по-добре.

Ако ви трябва само файлът .ico, можете да конвертирате своя PNG в ICO.

Ограничения

По едно изображение, до 20 MB и 100 мегапиксела.
Не променяме уебсайта ви: трябва сами да качите файловете и да добавите етикетите или да помолите този, който го поддържа.

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

Какъв размер трябва да е изображението, за да създам фавикон?

Колкото по-голямо, толкова по-добре: поне 512 × 512 пиксела или SVG. Всички икони, от 512 до 16 пиксела, се изчисляват от него.

Къде да кача файловете на фавикона?

В основната папка на уебсайта си – същата, в която е началната страница. След това поставете етикетите от head.html в етикета head на страниците си.

Защо не виждам новия фавикон в браузъра си?

Защото браузърите кешират фавикона. Презаредете страницата изцяло, отворете я в частен прозорец или изчакайте малко, докато се обнови.

Защо иконата за Apple има цветен фон?

Защото iOS не поддържа прозрачност в иконите на началния екран и би запълнил фона с черно. Създаваме я с избрания от вас цвят на фона, за да изглежда добре.

Мога ли да създам фавикона на уебсайта си в WordPress?

WordPress има собствена опция – „Икона на сайта“ (в Облик › Персонализиране › Идентичност на сайта или, според версията и темата, в общите настройки): качвате квадратно изображение и той сам създава размерите. Пакетът на този инструмент е за уебсайтове, в които можете да качвате файлове и да редактирате кода.