У вас уже є логотип. Що вам потрібне — це той логотип, перетворений на купу крихітних файлів іконок, яких очікує браузер: favicon.ico, жменька PNG конкретних розмірів, вебманіфест і HTML, щоб усе з'єднати. Ця конвертація механічна, і ви можете зробити її приблизно за хвилину, нічого не встановлюючи.
Заковика в тому, що не кожен логотип зменшується граційно. Тож це охоплює і швидкий шлях, і як виправити логотип, що перетворюється на кашу при 16 пікселях.
Коротка версія
- Отримайте свій логотип як квадратне зображення — ідеально 512×512 чи більше, на прозорому чи суцільному фоні.
- Киньте його в Генератор фавіконів.
- Завантажте згенерований набір і киньте файли в корінь вашого сайту.
- Вставте наданий HTML-фрагмент у ваш
<head>.
Це вся робота. Генератор видає favicon.ico, PNG на 16, 32, 48, 180, 192 і 512, webmanifest і точні теги <link> — тож ви не обрізаєте шість зображень вручну й не вгадуєте синтаксис маніфесту.
Спершу підготуйте логотип — саме тут виграється чи програється якість
Фавікон живе при 16×16 у вкладці браузера. Будь-яка деталь, що не може пережити цей розмір, змарнована. Витратьте дві хвилини тут — і результат виглядає різко всюди.
Зробіть його квадратним. Фавікони квадратні. Широкий, горизонтальний логотип отримає чорні смуги чи буде стиснутий. Обріжте до найвпізнаванішого елемента — зазвичай знака чи однієї ініціали — і відцентруйте в квадратному кадрі.
Приберіть словесний знак. Повна назва вашої компанії не буде розбірливою в розмірі вкладки. «Acme Corporation» стає сірою плямою. Збережіть символ чи одну літеру й дайте заголовку вкладки нести назву.
Перевірте контраст на обох темах. Вкладки браузера бувають світлими й темними. Темно-синя іконка зникає на темній вкладці; бліда зникає на світлій. Якщо ваш знак одного плаского кольору, переконайтеся, що цей колір читається на обох. Тонкий контур чи малий суцільний фоновий чіп може допомогти.
Лишіть простір для дихання. Додайте трохи відступу всередині квадрата, щоб іконка не втискалася в краї. Вона виглядатиме врівноваженіше в кожному слоті.
Починайте великим. Джерело 512×512 (чи більше) дає генератору чисту деталь для зменшення. Спершу збільшити крихітний логотип — просто запекти в нього розмиття.
Прозорий чи суцільний фон?
Обидва працюють — залежить від вигляду, який ви хочете.
- Прозорий дозволяє фону вкладки чи домашнього екрана просвічувати. Чисто й сучасно, і адаптується до світлого/темного оточення. Найкраще, коли ваш знак — виразна форма.
- Суцільний фоновий чіп (кольоровий заокруглений квадрат за знаком) гарантує, що іконка читається незалежно від того, що за нею. Це те, що роблять більшість іконок застосунків, і це безпечніший вибір, якщо ваш логотип тонкий чи низькоконтрастний.
Якщо сумніваєтеся, суцільний чіп у кольорі вашого бренду — надійний варіант — він ніколи не зникає у відповідний фон.
Після завантаження: куди йдуть файли
Генератор віддає вам набір файлів і фрагмент. Два правила розміщення це покривають:
favicon.icoіде в корінь вашого сайту (/favicon.ico). Браузери й Windows шукають його там за іменем навіть без тега<link>.- Усе решта може жити де завгодно, доки шляхи в HTML-фрагменті збігаються. Більшість людей кидають усе в корінь і вставляють фрагмент як є.
Далі це просто фрагмент <head> — посилання на іконки, apple-touch-icon і посилання на маніфест. Вставте, розгорніть, зробіть жорстке оновлення — і ви маєте побачити свій логотип у вкладці.
Чому робити це в браузері?
Бо ваш логотип ніколи не залишає вашу машину. Увесь процес — зчитування зображення, зміна розміру до кожного виміру, пакування .ico, написання маніфесту — відбувається локально у вашому браузері за допомогою Canvas. Нічого не завантажується на сервер, немає реєстрації чи водяного знака, а після першого відвідування інструмент працює офлайн. Для брендового матеріалу, який ви, можливо, ще не опублікували, тримати його подалі від сторонніх серверів — розумний стандарт.
Щойно ваш логотип квадратний, висококонтрастний і розбірливий малим, згенерувати повний набір — легка частина.