Перейти до основного вмісту

Apple Touch Icon проти Favicon: що має містити сучасний сайт?

Автор: Converty Team

Порівняйте сенсорні піктограми та піктограми веб-сайтів Apple, зрозумійте, чому сучасні сайти часто потребують обох, і дізнайтеся, як упакувати їх із одного вихідного зображення.

Apple Touch Icon проти Favicon: що має містити сучасний сайт?

Сенсорна піктограма Apple і фавікон пов’язані, але це не той самий файл, який служить для однієї мети. Фавікон зазвичай асоціюється з вкладками веб-переглядача, закладками та знайомим веб-переглядачем chrome. Сенсорна піктограма Apple призначена для поверхонь ярликів пристроїв Apple, де сайт може виглядати більше як піктограма програми.

Плутанина зрозуміла, оскільки обидва файли починаються з однієї торгової марки в багатьох проектах. Вихідним зображенням може бути одне квадратне зображення, але пакет має обслуговувати різні поверхні. Ось чому сучасний робочий процес favicon не повинен зупинятися на одному файлі favicon.ico.

Що робить фавікон

Фавікон — це невеликий візуальний маркер, який користувачі бачать у вкладках, закладках, історії та пов’язаних інтерфейсах браузера. Це допомагає користувачам швидко розпізнавати сайт, коли відкрито кілька вкладок.

Класичний файл — favicon.ico, хоча багато сучасних налаштувань також включають файли піктограм PNG. Для звичайних запусків сайтів збереження favicon.ico у пакеті все ще є доцільним, оскільки воно покриває звичні очікування та шляхи сумісності.

Що робить сенсорний значок Apple

Сенсорна піктограма Apple використовується, коли сайт зберігається на поверхнях пристроїв Apple, таких як ярлики на головному екрані. Це не просто крихітний маркер вкладки. Він має працювати як значок у контексті, більш схожому на додаток.

Це змінює проектний тиск. Піктограма вкладки браузера може бути надзвичайно маленькою. Піктограма дотику може виглядати більшою, але вона також має бути чистою, розташованою по центру та впізнаваною як окрема позначка. Одне і те саме вихідне зображення може працювати для обох, якщо воно просте та квадратне, але виходи все одно потрібно правильно запакувати.

Чому сучасні сайти часто потребують обох

Якщо на вашому сайті є лише піктограма веб-сайту, веб-переглядач на робочому столі може виглядати нормально, тоді як поверхні ярликів для мобільних пристроїв виглядатимуть неповними або суперечливими. Якщо ваш пакет зосереджений лише на сенсорних піктограмах, ви все одно можете пропустити традиційний шлях вкладки браузера.

Для запуску SaaS, сайту документації, мікросайту продукту або невеликої веб-програми практичною відповіддю зазвичай є обидва. Вам потрібен пакет, який охоплює вкладки веб-переглядача та ярлики програм, не вимагаючи від когось вручну експортувати кожен варіант значка.

Тут підходить Favicon / генератор значків додатків. Він генерує favicon.ico, піктограми PNG, сенсорні піктограми Apple, готові піктограми для Android і стартовий site.webmanifest з одного квадратного вихідного зображення.

Ілюстрація джерела є спільним обмеженням

Найбільшим фактором якості є вихідне зображення. Один і той самий знак повинен витримувати різні поверхні та розміри. Детальні ілюстрації, дрібний текст і зображення від краю до краю зазвичай погано працюють. Проста форма з достатньою прокладкою, швидше за все, залишиться впізнаваною.

Converty включає круглу опцію для виведення в браузері та Android, тоді як сенсорні піктограми Apple залишаються квадратними. Це важливо, коли знак вашого бренду краще працює всередині круглої рамки, але ви все одно хочете, щоб поверхні Apple зберігали очікувану квадратну форму.

Практичне рішення

Використовуйте піктограму сайту, коли вам потрібно розпізнати браузер. Використовуйте сенсорну піктограму Apple, коли вам турбуються поверхні ярликів Apple. Використовуйте повний пакет, якщо хочете, щоб сайт був завершеним для обох.

Для детальнішого контрольного списку файлів прочитайте Які файли вам потрібні в пакеті Favicon?. Коли ви будете готові експортувати ресурси, відкрийте Favicon/App Icon Generator, завантажте одне квадратне вихідне зображення, перегляньте пакет і завантажте ZIP.

Вам також може сподобатися