Фавикон — это маленькая иконка рядом с названием сайта (точнее 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
После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».
Тип файла для сохранения иконки
Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта.
Вы можете сохранить ссылку на эту страницу себе на компьютер в виде htm файла
Вы будете видеть наш сайт у себя в ленте
Нажмите "Подписаться"
Нажмите "Нравится" или напишите сообщение
Почитать в разделе: ЗАЧЕМ НУЖЕН САЙТ?
- Всего статей в разделе: 5
- Показано статей в списке: 4
- Сортировка: название по алфавиту
Выбор хостинга
Хостинг - это такое место, где живет Ваш сайт (точнее, все Ваши файлы, из которых собран сайт). Хостинг бывает платным и бесплатным. Бесплатное место под сайт - это хорошо, но есть некоторые проблемы: - на бесплатном хостинге могут начать некоторую перестройку и Ваш сайт на время станет недоступным - на Вашем сайте будет размещаться чужая реклама (бесплатному для Вас хостингу надо на что-то жить) - длинное и неудобное имя для Вашего сайта (например www.имя.narod.ru) - почтовый ящик для Вашей почты тоже будет немного не Вашим Частично проблему с именами можно решить, зарегистрировав в RU-центр имя для Вашего сайта вместе с переадресацией: - при...(Читать полностью...)
Как создать домен 3-го уровня
Что такое домен третьего уровня? Домен первого уровня .ru - национальный домен верхнего уровня для России.
Домен второго уровня seotable.ru - открывается наш сайт
Домен третьего уровня subdomen.seotable.ru - открывается мини-сайт (из одной строки "Hello, World") на PHP
Домен третьего уровня может быть использован для нескольких целей
1. как алиас основного сайта, делаются настройки у регистратора и наш сайт будет открываться по двум адресам
2. как часть для размещения важного раздела основного сайта
Создаем домен 3-го уровня через редактирование DNS
Что бы сайт в домене 3-го уровня отзывался на subdomen.seotable.ru -...(Читать полностью...)
Основные метатэги
Метатеги (англ. meta tags) — теги, предназначенные для предоставления структурированных метаданных о веб-странице. Как правило, указываются в заголовке HEAD, внутри структуры страницы HTML
<html>
<head>
</head>
<body>
</body>
</html>
Элемент meta принимает как минимум четыре атрибута: content, http-equiv, name и scheme. Из них обязателен только атрибут content и исключение тег revisit.
Метатеги разделены на нескольких основных групп. Основные — NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о странице, её авторе, а также — рекомендации для поисковых систем. HTTP-EQUIV фактически эквивалентны гипертекстовым...(Читать полностью...)
Сервер доменных имен DNS
DNS – что это за «зверь» такой? DNS – это Domain Name Server, т.е сервер доменных имен. На этом сервере лежат служебные записи, в которых указано:
- на каком сервере лежат файлы сайта (хостинг)
- какой используется почтовый сервер
- другие полезные настройки для работы сайта В целом обеспечение технической работы сайта состоит из 4-х частей: 1. Регистратор доменного имени, т.е. та организация, которая выделяет Вам доменное имя = имя.ru У регистратора же (в данном случае nic.ru) указывается, где находится таблица DNS Указано, что таблица DNS находится на серверах Мастерхоста. В данном случае говорится «домен делегирован на Мастерхост». Видно, что Еще DNS бывают...(Читать полностью...)
