Генератор фавіконів
Створіть фавікон онлайн: додайте логотип і отримайте повний набір файлів, від іконки вкладки на 16 пікселів до іконки застосунку на 512, а також HTML для вставлення. Усе відбувається у вашому браузері, тож зображення ніколи не завантажується на сервер.
Qwyzzle
Summit Roasters
Fox EsportsПеретягніть логотип сюди
PNG, JPG, WebP або SVG. Найкраще квадратне, від 512 px.
Створюється у вашому браузері. Зображення ніколи не завантажується.
Що таке фавікон і де його видно
Фавікон є маленькою квадратною іконкою, що позначає ваш сайт. Назва походить від англійського «favorite icon»: перший браузер, який його показував, ставив його поруч із закладками, які називав «Вибраним».
Ви бачите його у вкладках браузера поруч із назвою сторінки, завширшки 16 пікселів або 32 на чіткішому екрані. Він позначає ваш сайт і в закладках та історії. Коли хтось додає сайт на головний екран телефона, фавікон стає іконкою застосунку. А Google показує його поруч із назвою сайту в результатах пошуку.
Усюди в нього одне завдання: щоб його впізнавали з першого погляду серед інших іконок.
Чому один фавікон стає набором файлів
Кожне з цих місць з’явилося в різний час і просить власний файл. Генератор фавіконів вище робить їх усі з одного зображення.
Вкладки браузера, закладки й історія використовують favicon.ico: один файл, усередині якого версії на 16, 32 і 48 пікселів. Це найстаріший формат: коли сторінка не вказує іконку, браузери досі шукають favicon.ico в кореневій папці сайту.
Якщо почати з SVG, ви також отримаєте favicon.svg, який використовують браузери, що вміють малювати SVG-іконки. Він складається з фігур, а не пікселів, тому лишається чітким на будь-якому екрані.
iPhone та iPad використовують apple-touch-icon.png, квадрат на 180 пікселів, коли хтось додає ваш сайт на головний екран. iPhone заповнює прозорі ділянки чорним, тому ця іконка завжди має суцільний фон: ваш колір або білий, якщо ви вибрали прозорий.
Телефони Android і сайти, встановлені з браузера як застосунки, використовують icon-192.png та icon-512.png. Вони знаходять їх через site.webmanifest, невеликий текстовий файл, що повідомляє браузерам назву сайту, якщо ви ввели її в інструменті, і де лежать більші іконки.
Окремі PNG від 16 до 48 пікселів є запасними для сервісів, яким потрібен PNG. Для результатів пошуку Google читає посилання на іконки в HTML головної сторінки.
Як додати файли фавікона на сайт
Якщо ви або ваш розробник редагуєте файли сайту, знадобиться два кроки.
Спершу розпакуйте завантаження й покладіть файли в кореневу папку сайту, верхню папку, де лежить головна сторінка. Щоб перевірити, додайте /favicon.ico до адреси сайту: має відкритися іконка.
Потім вставте рядки HTML з README (інструмент теж їх показує) у head ваших сторінок: розділ на початку HTML, де міститься заголовок сторінки. Там по рядку для файлу ICO, іконки Apple touch і маніфесту, а також для SVG, якщо він є.
Зазвичай усі сторінки мають спільний шаблон, тож вставити їх треба лише раз. Спершу видаліть старі рядки з іконками, інакше браузери можуть і далі брати стару іконку.
У конструкторі сайтів обидва кроки можна пропустити: завантажте icon-512.png у налаштуванні іконки сайту, і конструктор сам додасть HTML.
Як зробити, щоб логотип працював на 16 пікселях
На 16 на 16 уся ваша іконка складається з 256 крихітних кольорових квадратиків. Більшість логотипів малювали не для цього.
Почніть із символу, а не з назви: втисніть назву з восьми літер у 16 пікселів, і кожна літера отримає два пікселі ширини. Немає символу? Візьміть першу літеру, велику й жирну. Товсті літери витримують зменшення значно довше за тонкі.
Потім приберіть деталі. Дуже тонкі лінії й малі проміжки зливаються з оточенням, а слоган перетворюється на пляму.
Важить світле проти темного, а не самі кольори. Вкладки бувають світлі або темні залежно від теми, і темно-синя іконка зникає на темній панелі вкладок. Якщо ваш знак темний, дайте йому світлий фон в інструменті, і навпаки.
Відступ, тобто простір між логотипом і краєм квадрата, є компромісом. Забагато, і логотип зменшується у вкладці. Замало, і iPhone, що заокруглює іконки на головному екрані, обріже кути логотипа.
Наостанок перегляньте попередній вигляд світлої й темної вкладки вище в реальному розмірі, без збільшення. Наша безкоштовна перевірка якості логотипу йде далі: вона зменшує логотип до 32 пікселів і вимірює, скільки деталей уціліло.
Коли знак краще перемалювати, ніж зменшувати
Іноді нічого не допомагає. У детальній ілюстрації чи 3D-вигляді, побудованому на тінях, деталі і є дизайном, а на 16 пікселях їх не стає. Цей інструмент може змінити розмір логотипа, але не перемалювати його.
Це не робить логотип поганим, лише створеним для більших місць. Намалюйте малу версію навмисно: спрощений символ або ваш ініціал шрифтом бренду. Збережіть кольори й щось від форми, і люди пов’яжуть одне з іншим. Ми щоразу обрали б чіткий ініціал замість розмитої мініатюри.
Потрібен новий знак? Наш генератор логотипів ШІ створить його за назвою бренду та коротким описом, якщо захочете. Логотипи з наших шаблонів логотипів мають символ окремим файлом, коли він є, а кожен куплений у нас логотип містить свої файли фавіконів.
Запитання про фавікони
Він безкоштовний, без реєстрації й без водяного знака. І зображення лишається у вас. Інструмент працює повністю у вашому браузері: усі розміри й архів створюються просто на вашому пристрої, а зображення ніколи не надсилається на наші сервери. Тож ним можна користуватися навіть для логотипа, який ви ще нікому не показували.
Квадратне, щонайменше 512 пікселів з кожного боку. Найбільша іконка в наборі має 512 пікселів, тож менший PNG, JPG чи WebP доводиться розтягувати, і великі іконки виходять м’якими. Інструмент скаже, коли так стається. SVG такого обмеження не має: він складається з фігур, а не пікселів, тому лишається чітким у будь-якому розмірі. Широкий логотип заповнює лише вузьку смужку квадрата, тож почніть із символу чи ініціала.
Потрібні всі, бо різні браузери й телефони просять різні файли, а HTML з інструмента підказує кожному, який файл брати. Файл ICO розуміє кожен браузер. PNG призначені для телефонів і встановлених застосунків, із запасними файлами в малих розмірах. SVG, який ви отримуєте, коли починаєте з SVG, лишається чітким на будь-якому екрані в браузерах, що його підтримують.
Найімовірніше, браузер показує збережену копію. Браузери тримають фавікони значно довше, ніж решту сторінки, тож стара іконка може лишатися й після того, як нові файли вже на сайті. Спробуйте жорстке оновлення, яке перезавантажує сторінку без збережених файлів: Ctrl+Shift+R у Windows, Cmd+Shift+R на Mac (Option+Cmd+R у Safari). Якщо не допомогло, відкрийте адресу сайту з /favicon.ico в кінці й оновіть її або перегляньте сайт у приватному вікні. Браузери інших людей з часом наздоженуть.
У налаштування конструктора, а не в папку. Більшість конструкторів сайтів і платформ інтернет-магазинів мають налаштування іконки сайту чи фавікона, куди завантажують один квадратний PNG. Виберіть icon-512.png, найбільший файл в архіві, щоб конструктору було з чого робити менші розміри. Якщо налаштування просить певний розмір, візьміть відповідний файл. Конструктори самі додають HTML, тож README можна пропустити.
Google помічає новий фавікон, коли його пошуковий робот, програма, що читає сторінки для Google, наступного разу відвідує вашу головну сторінку. Сталого розкладу для цього немає. Google потрібне квадратне зображення й посилання на іконку в HTML головної сторінки, тож перевірте, що обидва на місці. Далі, що й коли показувати, вирішує Google, тож дайте йому час.
Ще немає логотипа? Почніть з нього.
Створіть його в нашому генераторі логотипів ШІ або з шаблону в конструкторі логотипів. Кожен логотип, завантажений з DepthLogo, уже має свої фавікони.