Favicon Иконки для сайта
Вы наверняка обращали внимание на иконки в адресной строке браузеров. Эти иконки называются 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, поэтому в названии иконки необходимо указать ее размер.