Іконка в адресному рядку

Хочете щоб ваша власна іконка нагло світилася в рядку з URL'ом. Або в меню "Вибране". Зробити це насправді елементарно.

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

В налаштуваннях сервера повинен бути прописаний mime type для типу файлів ico (якщо ви використовуєте віртуальний хостинг, то можете уточнити це питання у хостинг-провайдера). Перевірити нескладно: треба в браузері спробувати завантажити файлик - наприклад, yandex.ru/favicon.ico - якщо вантажиться текст - значить, mime-type для .ico не прописаний.

Якщо mime type не прописаний, то це можна зробити в файлі .htaccess (для веб-сервера Apache), якщо вам він вам доступний для зміни. Формат приблизно наступний:

Файлик зробили, mime type навіть прописали. а все одно нічого не бачимо?

З того дня, як була написана ця замітка, багато що змінилося.

Зараз багато браузери не вимагають явного вказівки на favicon.ico в коді сторінки, якщо положення іконки не вказано в тілі HTML документа, то браузер намагається завантажити favicon.ico з кореневого каталогу сайту.

Для явного вказівки місцеположення favicon.ico необхідно вписати наступний рядок в код сторінки вашого сайту всередину секції head:

  • rel може містити і «shortcut icon» (при цьому Microsoft Internet Explorer буде реагувати на рядок «shortcut icon», а браузери, що відповідають стандартам - на слово «icon»)
  • href містить абсолютний або відносний URI до файлу (в Mozilla Firefox 3.0, наприклад, підтримуються ті ж URI, що і з тегом img).

Форматом файлу може бути png або gif, розміром 16x16 або 32x32 і з 8-бітної або 24-бітної глибиною кольору (в Mozilla Firefox, наприклад, може бути не тільки цей, а й як у тега img).

При цьому атрибут type повинен містити MIME-тип формату (наприклад, image / png для PNG).

Можна вказати кілька зображень в різних форматах - наприклад, рядок з rel = "shortcut icon" і значком у форматі ICO для Internet Explorer, і рядок з rel = "icon" і значком у форматі GIF або PNG для інших браузерів.

Схожі статті