Фавикон - это маленькая иконка рядом с названием сайта (точнее title страницы) в браузере.

Вот, например, сайт www.comphome.ru про домашний компьютер. Мы видим картинку с загадочным треугольником.



Как она туда попала? Это такой специальный файл favicon.ico для хранения иконки сайта. Он же фавикон.

Что бы браузер ее показал, необходимо:

1. Формат файла ICO/png/gif


да, именно так - там может быть и анимированная картинка в формате gif

2. Картинка должна быть физически на сайте:


2.1 Расположение в корне сайта (в 90% случаев это понимают браузеры и поисковые машины для файла favicon.ico)
Например вот так - в корне сайта.




Ничего дополнительно указывать не надо - и так все браузеры "знают", что файл фавикона (именно с расширением .ico) нужно в первую очередь искать в корневой директории.


2.2 Явное указание расположения файла фавикона (или не корневая директория или не ICO)

Например, Вы расположили фавикон в папке image



Тогда внутри тэгов head указываем  

- для ico

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">

- для png/gif

<link rel="shortcut icon" href="/images/favicon.png" type="image/png">
<link rel="shortcut icon" href="/images/favicon.gif" type="image/gif">

Важно:
никакого закрывающего слеша в конце не должно быть.

Вот так неправильно (но работать будет)
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"/>

Сноска.


HTML тег <link..........> определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет закрывающего тега) и всегда должен располагаться внутри элемента <head>.
Атрибут href определяет адрес документа, который может быть как абсолютным так и относительным.
Атрибут rel указывает связь между HTML файлом и тем, на что Вы ссылаетесь
Атрибут type сообщает браузеру MIME тип документа.

Атрибут rel favicon’а это продукт эволюции. В IE5 нужно было обязательно указывать shortcut icon для установления соответствия между страницей и ее иконкой, но потом спецификации HTML определили, что атрибуты указанные через пробел являются 2 атрибутами — shortcut и icon. Затем, в 2010, спецификации HTML5 определили, что необходимо декларировать только идентификатор icon. Получилось, что теперь, во всех браузерах кроме IE, можно не указывать shortcut.

Итого
- лучше указывать вариант "shortcut icon" для обычного фавикона
- для анимированного фавикона придется сделать две записи и два файла соответственно (т.к. не все браузеры могут отображать)

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"> - для всех браузеров
<link rel="icon"              href="/images/favicon.gif" type="image/gif"> - для тех браузеров, которые могут :)

2.3 Указание фавикона через настройки темы в CMS


Конечно, браузеры немного по разному видят эту иконку (с ico, phg, gif обычный = работают все браузеры)

Браузер ICO PNG GIF Анимированный GIF JPEG APNG SVG
Google Chrome Да 4.0 4.0 Нет 4.0 Нет Нет
Internet Explorer 5.0 11.0 11.0 Нет Нет Нет Нет
Firefox 1.0 1.0 1.0 Да Да 3.0 Нет
Opera 7.0 7.0 7.0 7.0 7.0 9.5 9.6
Safari Да 4.0 4.0 Нет 4.0 Нет Нет

Необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

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

Базовый размер фавикона - 16х16 пиксель.
Но формат ico поддерживает хранение нескольких изображений. Зачем?
Что бы можно было сохранять ссылку на сайт себе на компьютер!

Если делать совсем правильно - в файле ico должно храниться 3 картинки:

формат 16х16 - для отображения иконки в браузере
формат 32*32 - для сохранения ссылки на сайт в панели задач
формат 48*48 - для сохранения ссылки на сайт на рабочем столе

Вот более подробно http://habrahabr.ru/post/260777/
Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта.

  • Для чего нужен сайт в интернете (4833)

     Создание сайта (как для фирмы, так и для торговой марки) представляет одно из направлений рекламной политики: - легко запоминающееся имя вида www.имя.ru - удобные ящики электронной почты вида название@имя.ru - размещение на сайте каталога продукции- информация о видах профессионального обучения- независимость...

  • Сервер доменных имен DNS (2150)

    DNS – что это за «зверь» такой? DNS – это Domain Name Server, т.е сервер доменных имен. На этом сервере лежат служебные записи, в которых указано:- на каком сервере лежат файлы сайта (хостинг) - какой используется почтовый сервер- другие полезные настройки для работы сайта В целом обеспечение технической работы сайта состоит из 4-х частей: 1. Регистратор доменного имени, т.е....

  • Выбор хостинга (1387)

    Хостинг - это такое место, где живет Ваш сайт (точнее, все Ваши файлы, из которых собран сайт). Хостинг бывает платным и бесплатным. Бесплатное место под сайт - это хорошо, но есть некоторые проблемы: - на бесплатном хостинге могут начать некоторую перестройку и Ваш сайт на время станет недоступным - на Вашем сайте будет размещаться...

  • Файл favicon.ico (1230)

    Фавикон - это маленькая иконка рядом с названием сайта (точнее title страницы) в браузере.Вот, например, сайт www.comphome.ru про домашний компьютер. Мы видим картинку с загадочным треугольником.Как она туда попала? Это такой специальный файл favicon.ico для хранения иконки сайта. Он же фавикон.Что бы браузер ее показал,...

  • Как создать домен 3-го уровня (1104)

    Что такое домен третьего уровня?Домен первого уровня .ru -  национальный домен верхнего уровня для России. Домен второго уровня seotable.ru - открывается наш сайтДомен третьего уровня subdomen.seotable.ru - открывается мини-сайт на PHP, смотреть здесьДомен третьего уровня может быть использован...

  • Основные метатэги (882)

    Метатеги (англ. meta tags) — теги, предназначенные для предоставления структурированных метаданных о веб-странице. Как правило, указываются в заголовке, внутри структуры <head></head>Элемент meta принимает как минимум четыре атрибута: content, http-equiv, name и scheme. Из них обязателен только атрибут content и...

  • Как отправить e-mail с сайта? (131)

    Хотим получать заявки с сайта по почте или другие важные уведомления. Нужно отправить письмо с сайта. Как это сделать?Есть несколько способов. 1. Через функцию mail() php с использованием почтового сервера хостинга. Синтаксис функции очень простойmail($reciever, $subject, $content, $headers,...