Favicon для ретина-дисплев, Master-web
Внесіть обидва варіанти розміру, і збережіть ваш файл .ico як favicon.ico в кореневій папці вашого сайту.
Ви можете легко перевірити, чи підходить ваш значок веб-сайту для ретіна-дисплея, просто використовуйте програму Preview.app. З'являться усі варіанти розміру.
Коли справа доходить до фавіконів, з'являється складність у деяких деталях, наприклад, іноді буває потрібно вручну налаштувати зображення форматом 16×16 пікселів за пікселем, щоб переконатися, що воно залишилося гострим та чітким. Ви можете дізнатися багато нового про гарний дизайн іконок різних розмірів з десктопних програм, де іконки зазвичай були доступні в різних розмірах. Ось наприклад, іконка з Fantastical, додаток для календаря OS X, показує найменший (16×16) і найбільший (512×512) варіант:
Ви можете чітко бачити, що менша версія це не просто автоматично зменшений варіант великої іконки – що просто призведе до безладу, що розплився. Натомість маленька іконка намальована від руки, непотрібні деталі видалені та значно спрощені.
Зверніть увагу, що ви можете мати той же розмір іконки у вашому фавікон-файлі неодноразово, з різними альфа-каналами. Наприклад, favicon.ico файл сайту Apple.com має чотири різні варіанти, з 1-бітною та 8-бітною прозорістю для обох розмірів іконки.
На практиці вам вистачить двох іконок, 16px на 16px для стандартних дисплеїв, та 32px на 32px для ретина-дисплеїв, в обох використовуйте 8-бітну прозорість – тільки старі браузери не зможуть використовувати цей формат.
Faviconдля сенсорних пристроїв
Додатково вам потрібно буде створити низку варіантів дозволу іконок для мобільного робочого столу. Ці файли не відносяться до фавіконівта конфігуруються за допомогою мета-тегів.
Для найширшої підтримки, вам необхідно створити чотири іконки 57×57, 72×72, 114×114 та 144×144.
Для підключення створених картинок у форматі PNG, використовуйте наступний HTML фрагмент:
Зауважте, що потрібно вказати різні розміри в точному порядку для максимальної сумісності. Іконки будуть виглядати чудово в будь-якому IOS або Android пристрої, коли користувач додасть вашу URL-адресу як посилання на робочому столі.
І ось воно – гарні іконки з високою роздільною здатністю, які чудово виглядають на комп'ютері та в мобільному пристрої!