Фавикон – это маленькая иконка рядом с названием сайта (точнее 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> </head> Элемент 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 бывают...(Читать полностью...)
