Стандартная иконка

Вы наверняка обращали внимание на иконки в адресной строке браузеров. Эти иконки называются Favicon (от англ. FAVorites ICON), что в переводе означает «значок для избранного» - значок веб-сайта или отдельной веб-страницы. Яндекс в результатах поиска показывает эту иконку слева от ссылки на сайт, а браузеры в адресной строке и в закладках.

По сложившейся традиции иконка имеет размер 16х16 пикселей в формате ICO, называется favicon.ico и находится в корне сайта. Но иконка может иметь другое название, другой формат и располагаться не в корне сайта.

Допустимые форматы: PNG, APNG, JPEG, GIF (в том числе и анимированные GIF)

Размеры: 16х16, 32х32, 48х48

Цвет: 256 цветов или TrueColor (24-битный цвет)

Многие современные браузеры автоматически ищут в корне сайта файл favicon.ico и отображают его в качестве иконки сайта. Но положение иконки можно явно указать внутри тега head.

Помещаем значок в любую папку нашего сайта, а между тегами <head> и </head> помещаем следующую конструкцию:

<link rel="icon" href="/путь/имя файла.ico" type="image/vnd.microsoft.icon" />

Для иконок с расширением gif:

<link rel="icon" href="/путь/имя файла.gif" type="image/gif" />

Для иконок с расширением png:

<link rel="icon" href="/путь/имя файла.png" type="image/png" />

Таким образом, у каждой страницы сайта может быть своя иконка.

Формат gif позволяет делать анимированные иконки. Но имейте ввиду, не все браузеры поддерживают анимацию. И еще один момент стоит учитывать, чем меньше иконка весит, тем быстрее она будет загружаться. Поэтому, не пытайтесь впихнуть в свою иконку целый анимационный фильм.

Иконки для смартфонов

Мобильные устройства все больше и больше входят в обиход и это следут иметь ввиду.

Помимо стандартных иконок, вам следует добавить еще четыре:

144×144 пикселя для широкоформатных retina-экранов iPhone и iPad
114х114 пикселя для iPhone и iPod touch
72×72 пикселя для iPad-ов прошлого поколения
57×57 пикселя для других смартфонов, к примеру на Android

Такие иконки должны быть более качественными.

Пример подключения всех иконок будет выглядеть так:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../ico/favicon.png">

Для максимальной совместимости, иконки следует указывать именно в таком порядке. iOS до версии 4.2 игнорировал атрибут size, поэтому в названии иконки необходимо указать ее размер.

Поделитесь ссылкой

Статистика

Яндекс цитирования
© 2011 - 2023 Школа MODX
Напишите нам в Telegram