Как сделать favicon?

12 июл. 2008 г. ·

Вообще-то, тема создания favicon - это жуткий баян. В интернете так много информации по этому поводу, что действительно удивляешься отсутствию этой фишки у многих блоггеров.
Что такое favicon? Это иконка размером 16х16 пикселей.
Левее http:// вы видите эту иконку. Посмотрите на закладки, которые вы сохраняете в вашем браузере. Там та же иконка. И такие иконки есть у многих блогов и сайтов. Почему же ее нет в вашем блоге?
Ведь сделать ее очень просто.
Берёте иконку в формате 16х16 пикселов. Выкладываете ее на какой-нибудь бесплатный файл-хостинг в интернете (легче всего воспользоваться Google Page Creator). Затем копируете код, который видите ниже, и вставляете его в код вашего шаблона после тега.<head>.

<link href='http://nicantic.googlepages.com/5favicon.ico'

rel='shortcut icon'/>


А текст, выделенный красным, заменяете на адрес иконки, по которому она хранится в интернете (этот адрес вы можете получить на вашем файл-хостинге, в Google Page Creator кликните по файлу правой кнопкой и выберите "копировать ссылку"). Сохраняете шаблон и вуаля - у вас тоже есть favicon.

"А где же взять эту иконку?", - спросите вы.
Есть 3 варианта решения:
1. Взять готовую иконку в бесплатных галереях в интернете.

Favicon gallery1 Favicon gallery2 Favicon gallery3

2. Сделать иконку из любого имеющегося у вас изображения с помощью онлайн-сервисов.
Вы загружаете на сайт изображение и через секунду получаете favicon.

Favicon Generator Favicon Generator Favicon Generator

3. Самому сделать такую иконку. Этот вариант, как по мне, самый лучший: ваша иконка будет уникальной!
Вот давайте и попробуем сделать такую иконку с помощью сервиса favicon.cc

1. Заходим на сайт.


Перед нами рабочая область, разделенная на несколько зон: зона меню слева, рабочая зона по центру, зона выбора цвета справа, зона предварительного просмотра внизу. Управление осуществляется с помощью левой кнопки мыши: клик - выбор необходимого цвета,"стирачки", "пипетки"; удержание - непрерывная линия.
Рабочая область - это квадрат 16х16 ячеек. Каждая ячейка отвечает одному пикселу в разрешении иконки. Окно предварительно просмотра показывает изменения в реальном времени - поэтому вы можете сразу видеть конечный результат.

2. Для начала делаем рамку иконки. Выбираем черный цвет, кликнув в необходимой области справа. Зажав левую кнопку, проводим линии по периметру рабочей области.


3. Затем таким же образом рисуем сам узор.



4. Выбираем белый цвет и заполняем им прозрачные области внутри рисунка.


Дело в том, что "шапка" вкладки интернет-страницы, на которой будет расположена ваша иконка, может иметь разный цвет в зависимости от того, каким браузером вы пользуетесь, стоят ли у вас плагины, которые раскрашивают заголовки вкладок в разный цвет, и даже от того, активна ваша вкладка или нет. Поэтому прозрачные области лучше заполнять белым цветом, даже не смотря на то, что в поле адреса прозрачные области всегда будут белыми. Ориентируйтесь на favicon на вкладке - она более всего заметна.

5. Кликаем "Downloud favicon", сохраняем иконку на локальном компьютере, заходим в Google Page Creator, загружаем ее на сервера Гугл.


Затем кликаем правой кнопкой по названию файла в поле "Uploaded stuff", выбираем "Копировать ссылку" и проставляем этот адрес в код, как описано выше.
Сохраняем шаблон и наслаждаемся.

8 коммент.:

tespana комментирует...
20 июля 2008 г. в 17:37  

Спасибо за информацию! Попробую сделать.

Tn Pegas комментирует...
1 августа 2008 г. в 00:28  

Пожалуйста, скинь ссылку на свой блог!

Анонимный комментирует...
6 октября 2008 г. в 04:35  
Этот комментарий был удален администратором блога.
Чайка Людмила Викторовна комментирует...
28 июля 2009 г. в 17:21  

А у меня не получается... :-((
Вот адрес блога, куда пыталась поставить свой логотип-favicon: http://inf-2009.blogspot.com/
В чем может быть причина?

Tn Pegas комментирует...
28 июля 2009 г. в 18:49  

Напишите что сделали, как пытались сделать. Экстрасенсов нет=))) Причина в юзере однозначно...
Повторите все с начало и по внимательнее если снова не получиться, будем разбираться!

Unknown комментирует...
8 августа 2009 г. в 22:27  

Объясните плз, а зачем выкладывать на бесплатный хостинг?
Нельзя задать относительный путь? Например:
link href="images/favicon.ico" rel="shortcut icon"

Tn Pegas комментирует...
11 августа 2009 г. в 01:15  

Потому что это самый простой вариант. Этот способ описывается для Blogger, ни о коком images и речи не идет. Если у вас WordPress, то там совсем другое дело.

vital комментирует...
21 декабря 2009 г. в 00:53  

Спасибо за инструкцию, давно хотел сделать себе фавиконку, да всё руки не доходили. Добавил блог в закладки, как соберусь сделаю.

Отправить комментарий

Подписка на блог

Подпишитесь в ридере или, через электронную почту:
Введите ваш E-MAIL адрес:
Поиск Google: