Главная » 2015 » Октябрь » 20 » Установка Фавикона на сайт

Установка Фавикона на сайт

По мнению веб-дизайнеров нашей студии НИКА, фавикон для сайта - это бренд компании, часть имиджа. Фавикон -это логотип, маленькая иконка, которая отображается в браузере. Favicon (FAVorites ICON) – дословно «очень маленькое изображение» (16×16px). Фавикон - это визитная карточка сайта или компании. Фавикон отображается рядом с названием сайта в верхней части страницы браузера, в адресной строке браузера, в поисковых выдачах, в виде ярлыков на рабочем столе,  или в папке, для хранения web страниц. Те же кнопки социальных сетей — это тоже фавикон, логотип социальной сети. Если у Вас нет фавикона, нужно срочно его создать, так как отсутствие своей марки – признак непрофессионального подхода к вашему бренду.  Специалисты студии НИКА легко разработают для Вас Фавикон и установят на любой сайт. На рисунке ниже стрелочка указывает на фавикон сайта NIKA-WS.RU.

Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый html-код между тегами <head></head< вашего сайта.Для добавления favicon html код является следующим:

<link rel ="icon" href ="http://nika-ws.ru/favicon.ico" type=" image/x-icon"/>

<link rel ="chorcut icon" href ="http://nika-ws.ru/favicon.ico" type=" image/x-icon"/>

После добавления кода на страницу необходимо обновить кэш браузера.

Favicon на WordPress

1. Из админ панели блога Ворпресс, через настройки шаблона.

2. Обычная установка без плагина

3. С помощью плагина

Во многих премиум-шаблонах WordPress есть возможность устанавливать логотипы и иконки. Для этого идем в настройки темы, выбираем нужный файл на компьютере и жмем “Загрузить“. Сохраняем изменения и любуемся результатом. Добавить Favicon на сайт очень легко. Надо просто скопировать его в корневую директорию сайта по FTP. На Вордпресс это папка public_html (там, куда устанавливали robots.txt).  В принципе, можно больше ничего не делать. Современные браузеры сами найдут пиктограмму, если она расположена в корневой папке блога. Но мы ведь хотим, чтобы наша иконка отображалась и в поисковой выдаче. Поэтому, будет лучше, если указать специальному роботу Яндекса путь к файлу favicon.ico. Для этого в html-коде страниц блога между тегами <head> </head> надо прописать такой код:

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

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

В данном примере файл находится в корне сайта, а его адрес прописан в виде относительной ссылки. Если вы загрузили картинку в другую папку, то укажите полный путь к ней в атрибуте href. Если картинка не в формате .ico, то укажите это в атрибуте type, заменив x-icon на нужный формат. 

Favicon на Joomla.

Если в шаблоне, который вы используете на сайте уже имеется файл favicon.ico, то вам достаточно просто заменить его на свой. Как это проверить? Зайдите в папку с вашим сайтом, далее перейдите в папку templates/название вашего шаблона/. Если в этой папке имеется файл favicon.ico, то просто замените его на свой. Если у вас другая ситуация, то вначале необходимо подключить фавикон к вашему сайту. В начале поменстите ваш значок в корневую папку с вашим сайтом.  После этого в файле index.php вашего шаблона необходимо прописать путь к данному файлу. Для этого в файде index.php перед тегом </head> необходимо вставить следующие строчки:

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

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

В коде выше, указаны относительные пути к файлу favicon.ico, в некоторых случаях нужно указывать обсолютные пути, для этого замените "/favicon.ico" на   http://ваш-сайт.ru/favicon.ico

В административной панели Joomla пройдите в пункт  Расширения >> Менеджер шаблонов. Откроется таблица в которой будут отображаться все шаблоны установленные в вашей системе. В колонке "Шаблон" найдите название вашего шаблона и кликните по нему. На открывшейся странице кликните по ссылке "Изменить шаблон главной страницы" в результате чего откроется для редактирования файл index.php вашего шаблона. В коде найдите тег </head> и перед ним вставьте предложенный выше код и нажмите на кнопку "Сохранить".

Второй способ заключается в том, что вы можете зайти в папку с вашей темой и отредактировать файл index.php при помощи какого либо редактора, например Notepad2.

Favicon на Ucoz

Прежде чем ставить иконку на сайт она должна быть у Вас на компьюторе. Создать иконку вы можете с помощью fotoshop или paint. Размер иконки должен быть 16х16 пикселей. На компьюторе иконка должна называться "favicon.ico". Если у вас уже есть иконка то загружайте её в корень сайта (файловый менеджер): Управление-->Файловый менеджер. В файловом менеджере иконка ОБЯЗАТЕЛЬНО должна называтся "favicon.ico" (без ""). Все, теперь через некотарое время иконка появится.

Favicon на MODX

Помещаем значок в любую папку нашего сайта, а между тегами <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 позволяет делать анимированные иконки. Но имейте ввиду, не все браузеры поддерживают анимацию. И еще один момент стоит учитывать, чем меньше иконка весит, тем быстрее она будет загружаться. Поэтому, не пытайтесь впихнуть в свою иконку целый анимационный фильм.

Категория: Опыт создания сайтов | Просмотров: 2169 | Добавил: nikozavr | Рейтинг: 5.0/1
Всего комментариев: 0
avatar

Категории раздела

Заметки разработчика [8]
Заметки на тему работы с HTML. Уроки от дизайнеров и программистов студии НИКА. От простого к сложному.
Регламент веб-дизайнера [4]
Специалисты веб студии НИКА расскажут о секретках и правилах веб-дизайна.
Регламент копирайтера [2]
Специалисты студии НИКА пишут тексты с уникальностью до 100% на любую тематику. Некоторыми правилами и приемами копирайтинга делимся с начинающими писать.
Секреты дизайнера сайтов [2]
Основы работы с CSS
Опыт создания сайтов [1]
Специалисты студии НИКА рассказывают о нюансах при разработке веб-сайтов

Вход на сайт

Поиск